- Шаблоны HTML-писем
- Базовые правила верстки
- Странные отступы
- Верстка кнопок для HTML-писем
- Фоновое изображение в HTML-письмах
- Тестирование HTML-письма
HTML и email — два слова по отдельности безобидны, но в сочетании могут принести дикую боль верстальщику. Если вы занимаетесь веб-разработкой, то рано или поздно вам придётся окунуться в этот адский омут с головой.
Верстка HTML-писем — это машина времени, которая отвезёт вас в начало нулевых или раньше. Если вы уже верстали в то время — это хорошая возможность для ностальгии, а если нет, то вы попадёте в совсем неизвестные стандарты верстки и вам придётся переосмыслить принципы создания HTML страничек. Проблем добавляет уникальность почтовых клиентов, в которых ваше письмо может отобразиться совсем неожиданным образом.
Мой путь через этот омут проходил не без казусов: мне раньше никогда не приходилось встречаться с табличной вёрсткой и с какими-то необоснованными ограничениями в использовании css. Но основная проблема заключалась даже не в этом: скрипт, который организует отправку писем, подрезал мой код (в основном css) и письмо приходило изменённым. На осознание этого ушло ещё пару часов и много-много нервных клеток.
Верстка HTML-писем
Шаблоны HTML-писем
Верстка писем для большинства непривычна и сложна, а первые письма получаются угловатыми и неуклюжими. К счастью, мир не без добрых людей и существуют бесплатные шаблоны, которые значительно облегчают верстку. Но если вы бесстрашный ниндзя и любите вызовы, или просто хотите уникальный дизайн, то создание собственного шаблона может принести пользу и даже радость. Ниже я подобрал несколько мест с бесплатными шаблонами, которые облегчат ваш путь:
- Универсальный, простой отзывчивый шаблон электронной почты.
- Litmus.com — можно найти отличные бесплатные адаптивные шаблоны под разные нужды.
- Отзывчивые транзакционные HTML шаблоны электронной почты.
- Cerberus — хорошая подборка адаптивных шаблонов.
- Responsiveemailpatterns.com — коллекция шаблонов и модулей для адаптивных писем.
Советую не начинать с чистого листа, а присмотреться к какому-нибудь шаблону и постепенно делать из него что-то уникально и красивое.
Базовые правила верстки HTML-писем
<table>
вместо<div>
. Используя табличную верстку, вы избежите множества проблем с некорректным отображением вашего письма в разных почтовых клиента и браузерах. Табличная верстка правила в интернете долгое время благодаря корректному отображению в разных браузерах и большому числу параметров управляющих видом таблиц.- Используйте универсальные атрибуты HTML-тегов и универсальные CSS-свойства.
#FFFFFF
вместо#FFF
,padding
вместоmargin
,- CSS2 вместо CSS3,
- HTML4 вместо HTML5,
background-color
вместоbackground
,- HTML-атрибуты вместо CSS.
- Встроенные (Inline) CSS вместо внешних .css файлов. Конечно, верстать такое не очень удобно, возникают сложности с проверкой и корректировкой кода. Но, на наше счастье, существуют сервисы по автоматическому переводу всех стилей во встроенные.
- Premailer.io
- inlinestyler.torchbox.com
Пример встроенного стиля
<p style="color:#ffffff">Просто текст какой-то</p>
- Ширину всего документа в 600px. Это обезопасит ваших читателей от горизонтальной прокрутки. Вместо этого можно сделать письмо адаптивным.
- Задавайте таблицам атрибуты
border="0" cellpadding="0" cellspacing="0"
. - Лучше всего использовать стандартные шрифты (Helvetica, Arial) имеющиеся на любом устройстве.
Вы можете свободно игнорировать некоторые правила верстки в угоду удобству и красоты, но нужно понимать, что пользователь может увидеть что-то совсем отличное от того, что вы хотели предложить.
Странные отступы
Для организации отступов можно использовать пустые конструкции <div>
и <td>
Для вертикального отступа:
<div style="height: 10px; font-size: 10px; line-height: 11px;"> </div>
Для горизонтального отступа:
<td width="23" style="width: 23px; max-width: 23px; min-width: 23px;"> </td>
Но также можно применить padding к ячейке таблицы:
<td style="padding: 23px;"></td>
Верстка кнопок для HTML-писем
И тут тоже есть свои подводные камни. Обычным способом, к сожалению, кнопку не сделать, почтовый клиент может не принять такой код и вырежет его. Я нашёл два решения этой проблемы.
Первое решение завязано на хитром использовании все тех же таблиц. Выглядит красиво и адаптивно.
Показать / Скрыть пример
See the Pen Кнопки 1 by Ivanov Klim on CodePen.
Второе решение завязано на использовании Vector Markup Language (VML)— языка векторной разметки. На сайте buttons.cm можно самостоятельно сделать кнопку на этом языке.
Показать / Скрыть пример
See the Pen Кнопка 2 by Ivanov Klim on CodePen.
HTML-письма, фоновое изображение
Фоновое изображение лучше всего также накладывать с помощью VML. Существует схожий с кнопками онлайн-сервис создания фонового изображения. Ниже можно посмотреть пример реализации функционала сервиса с некоторыми изменениями для придания вида письма.
Показать / Скрыть пример
See the Pen Письмо странным людям by Ivanov Klim (@DreamerKlim) on CodePen.
Тестирование HTML-письма
Перед отправкой письма советую протестировать его. Для этого можно использовать сервис PutsMail или Яндекс почту.
Чтобы вставить HTML в структуру письма в Яндекс почте, выполните следующие действия: убедитесь, что у вас включено оформление → Кликните правой кнопкой мыши по строке ввода текста → Выберите "исследовать элемент" → В открывшемся окне откройте выделенный <div>
→ Правой кнопкой нажмите на <br>
и выберите "edit as html" → Введите код письма и отправьте письмо. Письмо может отобразиться неправильно, но не беспокойтесь: письмо придёт в обычном виде.