Правила дизайна HTML-писем

В разработке html-писем есть очень много тонкостей и мелочей, обусловленных тем, что письма открывают на самых разных устройствах, а разброс в «свежести» используемых почтовых клиентах достигает 20-ти лет, в отличие от веб-браузеров, которые сейчас уже обновляются автоматически до актуальной версии. Эта проблема накладывает свой отпечаток на дизайн шаблонов писем, ведь не все можно реализовать. Ниже мы расскажем про главные требования, дайте ссылку дизайнеру на эту страницу, прежде чем приступать к работе.

Ширина письма

600 пикселей — это идеальная ширина для письма, остальное это бекграунд. Такая ширина обусловлена тем, что если сделать больше, но письмо может не влезть в некоторых постовых клиентах и в итоге нужно будет прокручивать письмо горизонтально, а этим никто заниматься не будет.

Шрифты

Используйте только безопасные веб шрифты. Arial, Comic Sans MS, Courier New, Georgia, Lucida, Tahoma, Times New Roman, Trebuchet MS и Verdana. Их поддерживают все почтовые клиенты. Красивые внешние шрифты можно использовать на баннерах, например, там где они будут верстаться картинкой, а не текстом.

Картинки могут не отобразиться

У некоторых отключено отображение картинок, учитывайте это. Когда делайте дизайн, старайтесь делать его так, чтобы даже при выключенных картинках была понятна суть.

Избегайте фоновых картинок

В Outlook’ах не работает отображение фоновых картинок, учитывайте это. Если решили накладывать на фон картинку — убедитесь, что при ее отсутствии не потеряется смысл. Заранее предусмотрите то, каким цветом будет бекграунд в случае отсутствия картинки.

Не налегайте на графику

Графика — это хорошо, красиво, информативно. Но старайтесь соблюдать баланс. Много графики плохо по таким причинам: картинки могут не отобразиться, вес письма увеличивается, спам-рейтинг выше.

Делайте проще

К сожалению не получится так же оперировать с блоками как это делается в веб-дизайне, тут все верстается таблицами, старайтесь не делать каких-либо сложных блоков.

Интерактива нет

Почтовые клиенты не поддерживают скрипты, поэтому не получится делать какие-нибудь всплывающие штучки, формы обратной связи и так далее. Воспринимайте письма как простую html-страницу из каменного века.

Не забудьте проверить офрогарфию!