Спасибо!

Заявка отправлена, скоро мы с вами свяжемся.

База знаний


Вернуться к списку статей
Правила дизайна html-писем

Дата публикации: 28 декабря 2016

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

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

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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

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

ЧИТАЙТЕ ТАКЖЕ

Как отправить html-письмо в Outlook 2016

Outlook 2016, как и весь последний пакет офисных программ от Microsoft вышедший под общим название Office 365, зарекомендовал себя как действительно удобный рабочий инструмент. И поэтому мы не могли обойти этот клиент стороной и сегодня мы расскажем вам как отправлять и редактировать html-письма с помощью Outlook 2016.

Mozilla Thunderbird

Как отправить html письмо через Thunderbird

Не всем нужно отправлять письмо сразу большому списку подписчиков. Иногда нужно отправлять единичные письма, например для презентации услуг какому-то определенному клиенту. Или красиво оформленную смету. Любое персональное письмо.

НАШЕ ПОРТФОЛИО

Шаблон письма для логистической компании в Таллине и Санкт-Петербурге.

Html-письмо для транспортной компании в Красноярске — NTS Logistics.

Краткое коммерческое предложение, от компании производителя гидравлического оборудования.

Шаблон письма для Райффайзен Банка, созданный для рассылки заданий промо акции в формате квеста.

СВЯЖИТЕСЬ С НАМИ ПРЯМО СЕЙЧАС

Телефон:

+7 495 968-10-12

Почта:

email@goodmails.ru

Социальные сети:

Facebook Vkontakte
pdf-icon Маркетинг Кит
&

Обратная связь