Спасибо!

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

База знаний


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

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

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

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

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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание рассылки в UniSender

Подробная статья о том, как загрузить, отредактировать и отправить свой шаблон письма на примере онлайн-сервиса рассылки Unisender.

Как отправить письмо через Thunderbird с помощью дополнения Stationery

Мало кто знает, но есть специальное дополнение, которое позволяет отправлять html-письма через Mozilla Thunderbird в пару кликов. Оно называется Stationery.

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

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

Редактируемый шаблон еженедельной рассылки для PureOffers.

Предложение сотрудничества для юридической компании
«Новое решение».

Одно из писем для серии информационных рассылок компании Caravan.

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

Телефон:

+7 495 968-10-12

Почта:

email@goodmails.ru

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

Facebook Vkontakte
&

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