logo

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

Разместил , . Последнее изменение: 2018-04-21. / Нет комментариев

Особенности верстки 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-писем

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

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

Показать / Скрыть пример

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"Введите код письма и отправьте письмо. Письмо может отобразиться неправильно, не беспокойтесь придёт в обычном виде.

Оставить комментарий

* Возможна анонимная отправка комментария.

Согласен с политикой конфиденциальности *