Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Цифров@я Эпистолярность

Цифров@я Эпистолярность

31 Октября 2018
Николай Гоцалюк
Frontend TeamLead
Николай Гоцалюк
следующая статья

Современное электронное письмо уже давно не является просто вариантом передачи информации. Письма пишут как живые люди, так и генерируют различные роботы для уведомлений, предложений или предостережений. Email-маркетинг использует массовые рассылки писем для продвижения товаров и услуг, что по мнению многих является весьма эффективным. В таком потоке виртуальной корреспонденции люди (как отправители, так и получатели) начинают ценить качество ее исполнения. В случае халатности проигрывают все, поскольку важные письма могут попросту не прочитаться у конечного адресата или будут проигнорированы при “кривом” их исполнении. И наоборот: дизайнерское и продуманное письмо даже из рассылки обратит на себя внимание того, кому оно адресовано.  

Про контент нужно говорить много и отдельно. Но сегодня наша цель раскрыть глубокий смысл верстки писем еmail-рассылки. Если Вы не знали, что они верстаются подобно сайтам, а не пишутся в поле “Текст” почтового сервиса — дочитайте до конца обязательно.

Письмо — это Вам не сайт!

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

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


На изображении обозначены одинаковые области в письме и в верстке письма

Самое-самое важное

  1. Табличная и только табличная верстка — про Flex- или Grid-технологии забываем сразу;

  2. Стили в атрибуте style прописываем инлайново — теги <style> і <link> будут игнорироваться некоторыми почтовыми роботами или агентами;

  3. Оптимальна  ширина макета — 600-700px;

  4. И никакого JavaScript!

Теги, которые можно использовать:

<table>,<tr>,<td>,<span>,<img>,<a>,<b>,<i>,<br>, <h1>-<h6> — остальные не рекомендованы к применению. Нет стопроцентной гарантии, что другие теги наверняка не прочитаются почтовиком, но такая вероятность значительно высока.

Шрифти, которые можно использовать:

При верстке еmail-рассылки необходимо использовать только стандартные шрифты. Они есть у всех пользователей, а значит получатели смогут без проблем прочитать Ваш текст. Даже в стандартных есть красивые и вот самые популярные из них:
Arial, Helvetica, sans-serif;
Arial Black, Gadget, sans-serif;
Georgia, serif;
MS Sans Serif, Geneva, sans-serif;
MS Serif, 'New York', sans-serif;
Tahoma, Geneva, sans-serif;
Times New Roman', Times, serif;
Trebuchet MS', Helvetica, sans-serif;
Verdana, Geneva, sans-serif;

Чем строже - тем лучше

Большинство браузеров и почтовых служб имеют свои стили для отображения разных тегов по умолчанию. Именно поэтому для табличных тегов необходимо использовать обязательные атрибуты и стили. Это позволит “обнулить” правила по дефолту, тем самым быть уверенным в коректном отображении письма у любого получателя.

Для таблиц :

<table border="0" cellpadding="0" cellspacing="0" style="margin:0;  padding:0">

Для ссылок :

target="_blank" — просто правило хорошего тона.

а color, line-height и font являются обязательными;

-webkit-text-size-adjust:none — обязательное для всех строчных элементов, что позволит избежать проблем с размерами шрифта на   iPhone iOS 6-7/iPad.

Для изображений:

alt — Этот обязательный элемент можно оставить пустым;

border — Если не задаете какого-либо значения, лучше поставте 0;

width — Та же история, но вписать необходимо 100, если не предусматривается чего-либо другого;

display: block / inline-block  — Лучше указать, поскольку почтовые агенты очень любят расставлять отступы самостоятельно;

Не секрет, что все продвинутые фронтендщики при указании цвета #dddddd записывают его как  #ddd. Но при верстка рассылки такого делать нельзя: многим агентам нужен только полный код. По тому же принципу следим и за цветовой схемой rgb/rgba:  rgb (240,248,250) будет работать далеко не везде.

Некоторые почтовые клиенты способны заменять теги. К примеру, если Вы используете <span> на номере телефона или адресе электронки, агент может заменить этот тег на <a> с текстом синего цвета. Поэтому лучше использовать такие методы записи:

Для телефона:

<a href="tel:0979999999" value="+0979999999" target="_blank" style="">097 999 99 99</a>

Для электронной почты:

exemple@gmail.com" target="_blank" style="">exemple@gmail.com

Для вертикального выравнивания:

Используем <td> с паддингом:

<td style="padding: 10px;"></td>

Для адаптации:

Можно употреблять медиа запросы. Да, сработают они не везде, но если получится, это будет приятной мелочью и показателем Вашего мастерства:

@media only screen and (max-width:596px){}

По аналогичному принципу можно пытать судьбу с ховерами — где-то они сработают, а гдето нет.

Готовые помощники

Из собственного опыта могу сказать, что верстка писем для рассылки не самый приятный процесс. Однако сделав все, как положено, всегда чувствуешь определенную гордость и общее удовлетворение от выполненной задачи. Для облегчения своих трудов можно использовать Zurb Fundation. Mожете применять SASS, что сократит время на написание необходимых километров табличной разметки.  

Надеюсь, написанное выше повлияло на Ваше отношение к верстке электронных писем. Обязательно найдите время, чтоб проверить шаблоны своих писем или поиграться с конструкторами, если используете их при подготовке рассылок. И если понадобится совет в современном эпистолярном жанре творчества — Вы знаете, где нас найти :)


Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут