О чем надо подумать перед тем, как верстать HTML-письма

В новой статье Convead вы найдете базовые принципы и правила верстки писем. Мы расскажем, почему HTML-верстка — это так тяжело, зачем вообще верстать в 2019 году, почему письма ползут и что со всем этим делать.

20 лет назад мы отправляли и получали простые текстовые сообщения, а сегодня — красиво сверстанные страницы, похожие на целые лендинги.

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

* 3 самых популярных почтовых программы: Apple Mail, Gmail, Outlook

Для обработки HTML-писем почтовые клиенты используют различные движки:

  • WebKit: Apple Mail, Outlook для Mac, Android Mail и iOS Mail
  • Internet Explorer: Outlook 2000, 2002 и 2003
  • Microsoft Word: Outlook 2007, 2010 и 2013
  • Веб-клиенты используют браузерный движок (WebKit для Safari, Blink для Chrome)

Из-за многообразия почтовых клиентов и разницы в требованиях приходится делать письма универсальными. Чтобы они корректно открывались во всех возможных системах и на разных устройствах, нужно соблюдать правила верстки.  

Правило №1: Таблицы

Табличная верстка — залог того, что письмо не поползет и корректно отобразится на всех экранах, в любом почтовом клиенте.

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

При создании макета лучше использовать сетку из 2–4 столбцов. Такая структура не перегружает страницу и подходит для адаптации под мобильные устройства.

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

Правило №2: Универсальные HTML-теги и атрибуты

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

О науке HTML + CSS написаны целые книги, некоторые из томов посвящены целиком конкретным стилям и тегам. В короткой заметке невозможно дать исчерпывающего объяснения.

Правило №3: Внутренние CSS-стили

Почтовые клиенты удаляют все содержимое тегов <head> и <body>, в том числе CSS. Так что для изменения цветов, фонов, шрифтов параметры каждого элемента нужно прописывать отдельно в теле письма.

Чтобы упростить работу, можно использовать инлайнер. Эта программа встраивает CSS-стили в HTML-файл. Для каждого элемента она вычисляет перечень стилей и записывает их в атрибут style соответствующего HTML-тега.

Инлайнеры:

  1. ZURB Foundation
  2. Mailchimp CSS Inliner Tool

! Если используете инлайнеры, обязательно тестируйте письма.

Правило №4: Фиксированная ширина письма

Ширина письма на экране компьютера должна составлять не более 600 px. В противном случае появится горизонтальная полоса прокрутки и читать будет неудобно.

Обязательно задавайте ширину письма, а также используйте атрибуты для тегов <table> (для таблиц) или <img> (для изображений).

На фон по сторонам от письма почтовые приложения ограничений не накладывают — он может быть любого цвета и размера. Правда, в Gmail для Android его не видно.

Правило №5: Адаптивная верстка

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

Два макета. Для адаптации рассылки под мобильные устройства нужно сдавать два макета разной ширины: 600 px и 320 px.

Верстка. Есть три подхода. Гибридная верстка: 2–3 горизонтальных блока располагаются друг под другом. Масштабирование: рисунки сжимаются по вертикали и горизонтали. Отсечение изображений: боковые области рисунков удаляются.

Mobile First. Один из способов адаптивной верстки — Mobile First. Сначала создавайте письмо для смартфонов и планшетов, а потом — десктопную версию.

Общие правила дизайна

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

Формат. Макет должен сохранять все решения дизайнера: слои, растровую графику, прозрачные и полупрозрачные элементы. Можно использовать PSD, формат Adobe Photoshop.

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

Анимация. JavaScript- и CSS-анимацию использовать нельзя, а GIF — можно. Имейте в виду, что Outlook показывает только первый кадр GIF-анимации.

Текст. Выбирайте размер не меньше 12 px, иначе читателю будет не видно и придется приближать. Используйте стандартные шрифты: если у пользователя не окажется декоративного шрифта, который вы вставили в письмо, браузер автоматически заменит его на стандартный, текст отобразится неправильно, а верстка поползет.

Шаблоны и сервисы для упрощения верстки

Верстка HTML-шаблонов — дело ответственное, непростое и утомительное. Облегчить работу могут сервисы и готовые шаблоны.

Для рассылок часто используют Mailchimp, но популярное решение не лишено недостатков. Бесплатно его можно использовать, если в базе менее 2 000 подписчиков, а платная версия стоит недешево. В Mailchimp приходится вручную добавлять новые адреса. Чтобы сегментировать базу и персонализировать письма в нем, нужно очень постараться.  

Еще один выход — модули для рассылок. Они практичны, но редко красивы. Например, к модулю рассылок 1С-Битрикс нельзя автоматически применять красивое оформление.

Подходящий шаблон можно создать на конструкторе или найти в библиотеке. Если выбираете такое решение, помните, что каждый шаблон с вашими изменениями — полуфабрикат, не готовый к отправке. Прогоняйте стили через инлайнер и обязательно тестируйте результат.

Шаблоны:

  1. Litmus Templates
  2. Really Simple Responsive HTML Email Template
  3. HTML Email Templates
  4. Foundation for Emails 2

Краткий конспект

  1. Используйте табличную верстку и универсальные теги и атрибуты.
  2. Правильно оформляйте внутренние CSS-стили, для встраивания в каждый элемент используйте инлайнер.
  3. Фиксируйте ширину писем: 600 px для десктопной версии и 320 px для мобильной.
  4. Делайте письма адаптивными и используйте принцип Mobile First.
  5. Обязательно тестируйте письма на разных устройствах и в нескольких почтовых клиентах перед отправкой.

Читайте также: