Спасибо!

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

База знаний


Вернуться к списку статей
Правила дизайна 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-письма

Редактирование исходного файла html-письма

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

Email-рассылка в программе ePochta Mailer

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

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

Краткое коммерческое предложение услуг кейтеринга от компании «Fried Ice Cream».

Коммерческое предложение, от компании занимающейся 3D моделированием.

Краткое коммерческое предложение от компании поставщика крепежных элементов.

Письмо для рассылки новогоднего предложения от компании «Olymp Trade»

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

Телефон:

+7 495 968-10-12

Почта:

email@goodmails.ru

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

Facebook Vkontakte
&

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