Особенности верстки HTML-писем: базовые правила, кнопки, фон

1. Шаблоны HTML-писем
2. Базовые правила верстки
3. Странные отступы
4. Верстка кнопок для HTML-писем
5. Фоновое изображение в HTML-письмах
6. Тестирование HTML-письма

HTML и email — два слова по отдельности безобидны, но в сочетании могут принести дикую боль верстальщику. Если вы занимаетесь веб-разработкой, то рано или поздно вам придётся окунуться в этот адский омут с головой.

Верстка HTML-писем — это машина времени, которая отвезёт вас в начало нулевых или раньше. Если вы уже верстали в то время — это хорошая возможность для ностальгии, а если нет, то вы попадёте в совсем неизвестные стандарты верстки и вам придётся переосмыслить принципы создания HTML страничек. Проблем добавляет уникальность почтовых клиентов, в которых ваше письмо может отобразиться совсем неожиданным образом.

Мой путь через этот омут проходил не без казусов: мне раньше никогда не приходилось встречаться с табличной вёрсткой и с какими-то необоснованными ограничениями в использовании css. Но основная проблема заключалась даже не в этом: скрипт, который организует отправку писем, подрезал мой код (в основном css) и письмо приходило изменённым. На осознание этого ушло ещё пару часов и много-много нервных клеток.

Верстка HTML-писем

Шаблоны HTML-писем

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

1. Универсальный, простой отзывчивый шаблон электронной почты.
2. Litmus.com — можно найти отличные бесплатные адаптивные шаблоны под разные нужды.
3. Отзывчивые транзакционные HTML шаблоны электронной почты.
4. Cerberus — хорошая подборка адаптивных шаблонов.
5. Responsiveemailpatterns.com — коллекция шаблонов и модулей для адаптивных писем.

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

Базовые правила верстки HTML-писем

1. <table> вместо <div>. Используя табличную верстку, вы избежите множества проблем с некорректным отображением вашего письма в разных почтовых клиента и браузерах. Табличная верстка правила в интернете долгое время благодаря корректному отображению в разных браузерах и большому числу параметров управляющих видом таблиц.
2. Используйте универсальные атрибуты HTML-тегов и универсальные CSS-свойства.
   • #FFFFFF вместо #FFF,
   • padding вместо margin,
   • CSS2 вместо CSS3,
   • HTML4 вместо HTML5,
   • background-color вместо background,
   • HTML-атрибуты вместо CSS.
3. Встроенные (Inline) CSS вместо внешних .css файлов. Конечно, верстать такое не очень удобно, возникают сложности с проверкой и корректировкой кода. Но, на наше счастье, существуют сервисы по автоматическому переводу всех стилей во встроенные.
   • Premailer.io
   • inlinestyler.torchbox.com

   Пример встроенного стиля <p style="color:#ffffff">Просто текст какой-то</p>

4. Ширину всего документа в 600px. Это обезопасит ваших читателей от горизонтальной прокрутки. Вместо этого можно сделать письмо адаптивным.
5. Задавайте таблицам атрибуты border="0" cellpadding="0" cellspacing="0".
6. Лучше всего использовать стандартные шрифты (Helvetica, Arial) имеющиеся на любом устройстве.

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

Странные отступы 

Для организации отступов можно использовать пустые конструкции <div> и <td>

Для вертикального отступа:

<div style="height: 10px; font-size: 10px; line-height: 11px;">&nbsp;</div>

Для горизонтального отступа:

<td width="23" style="width: 23px; max-width: 23px; min-width: 23px;">&nbsp;</td>

Но также можно применить padding к ячейке таблицы:

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

Верстка кнопок для HTML-писем

И тут тоже есть свои подводные камни. Обычным способом, к сожалению, кнопку не сделать, почтовый клиент может не принять такой код и вырежет его. Я нашёл два решения этой проблемы.

Первое решение завязано на хитром использовании все тех же таблиц. Выглядит красиво и адаптивно.

Второе решение завязано на использовании Vector Markup Language (VML)— языка векторной разметки. На сайте buttons.cm можно самостоятельно сделать кнопку на этом языке.

HTML-письма, фоновое изображение

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

Тестирование HTML-письма

Перед отправкой письма советую протестировать его. Для этого можно использовать сервис PutsMail или Яндекс почту.

Чтобы вставить HTML в структуру письма в Яндекс почте, выполните следующие действия: убедитесь, что у вас включено оформление → Кликните правой кнопкой мыши по строке ввода текста → Выберите "исследовать элемент" → В открывшемся окне откройте выделенный <div> → Правой кнопкой нажмите на <br> и выберите "edit as html" → Введите код письма и отправьте письмо. Письмо может отобразиться неправильно, но не беспокойтесь: письмо придёт в обычном виде.