Спасибо!

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

База знаний


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

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

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

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

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

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

Шрифты

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

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

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

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

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

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

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

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

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

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

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

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

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

Как отправить письмо через Outlook 2010

Отправить html письмо через программу Outlook 2010 можно, но эту функцию просто так не найти. Сегодня мы этот пробел закроем, и вы сможете без проблем отправлять свои письма.

SendBlaster

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

Несмотря на свой слегка несерьезный, “мультяшный” внешний вид, данный клиент оснащен всем необходимым функционалом для введения email-маркетинга, при этом оставаясь дружелюбным по отношению к пользователю.

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

Редактируемый шаблон для drag’n’drop конструктора GetResponse.

Краткое коммерческое предложение для бухгалтерской компании
«Авангард Бюро»

Шаблон для писем генерируемых CRM-системой для интернет-магазина «Wool & Mania».

Страница для красноярского магазина автозапчастей «Надежный партнер.»

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

Телефон:

+7 495 968-10-12

Почта:

email@goodmails.ru

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

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

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