Без кейворда

Для верстальщиков в вебе таблицы — это пережитки 90-х годов. Но в email-рассылках только этот способ подходит для нормального отображения письма. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная вёрстка — залог того, что письмо не «разъедется» и нормально отобразится на всех платформах.

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

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

Не все привычные элементы HTML-кода подойдут для верстки рассылок. Например, все почтовые клиенты не воспринимают тег <button> . Mail.ru и Outlook не воспринимают только <header> и <footer> .

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

Правило №3. Встроенные стили CSS

CSS — это язык, с помощью которого описывают внешний вид HTML-документа. HTML отвечает за структуру письма, а CSS — за форматирование: шрифт, цвет, поля, строки, фоновые изображения.

Есть 3 способа добавить CSS:

Способ 1. Написать тег внутри <head> или <body> :

Способ 2. Создать отдельный файл со стилями CSS и дать ссылку на него в HTML-документе тегом <link> :

Способ 3. Описать CSS как атрибут в элементах HTML (inline-CSS):

Верстальщики email-рассылок используют последний вариант. Писать такой код неудобно, но только он корректно отображается всеми почтовыми клиентами и браузерами. Чтобы упростить вёрстку, можно прогнать HTML-файл со стилями внутри <head> или <body> через программу-инлайнер . Она встраивает CSS-стили в HTML-файл — трансформирует CSS в виде атрибута после каждого тега:

Правило №4. Делаем фиксированную ширину письма

Чтобы пользователи мобильных устройств не жаловались на горизонтальную полосу прокрутки, задайте фиксированную ширину. Она не должна превышать 600px:

Обязательные атрибуты HTML

Для некоторых тегов нужно прописывать конкретные атрибуты. В противном случае почтовый клиент подставит их по умолчанию и письмо отобразится неверно. Такими тегами являются, например, <table> для таблиц или <img> для изображений.

Разберёмся, какие атрибуты для них прописывать.

Для таблиц

border=«0» — толщина рамки у таблицы;
cellpadding=«0» — расстояние от рамки до содержимого таблицы;
cellspacing=«0» — отступ между ячейками.

«margin: 0;» — отступ от края таблицы до других элементов письма;
«padding: 0;» — внутренний отступ до содержимого таблицы.

Для строчных элементов

«color: #800080;» — цвет текста;
«font: 13px Georgia, serif;» — параметры текста: размер и семейство шрифтов;
«line-height: 25px;» — межстрочный интервал;
«-webkit-text-size-adjust: none;» — не позволяет мобильным устройствам менять размер текста.

Для ссылок задаем атрибут «target=»_blank»» , чтобы они открывались в отдельном окне.

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

src=«#» — адрес изображения;
alt=«» — описание: поле обязательное, но его можно оставить пустым;
border=«0» — толщина рамки;
width=«75» — ширина изображения;
height=«50» — высота изображения.

«display: block;» — делает элемент блочным: если не задать это свойство, большинство почтовиков добавит к картинке отступы.

Безопасные шрифты

Почтовые клиенты отображают ограниченный набор шрифтов (мы уже писали о том, какие шрифты использовать в рассылке ). Чтобы ваш текст везде отобразился одинаково, используйте безопасные значения свойства font-family. Оно отвечает за шрифты.

Цвет и фон

Цвета в письмах задают в виде шестнадцатеричных чисел формата HEX (например, #333333). Сокращения в виде #333 обрабатывают не все почтовые клиенты, поэтому их в верстке рассылок не используют. Цвета формата RGB тоже работать не будут.

При верстке HTML-писем фон задают через атрибуты background=»» и bgcolor=»» для тега <table> . Если задать их для других тегов, то Gmail, открытый в Safari, проигнорирует их.

Не все почтовые клиенты обработают фон, который прописан через стили CSS. Поэтому свойство background и его производные ( background-image, background-visibility, background-size ) лучше не применять.

Адаптивная вёрстка

Тут всё непросто. Как говорит наш верстальщик Денис Щукин, «Если для новичка HTML — это дремучий лес, то адаптивная вёрстка — джунгли». Перечислим только основные подходы, чтобы вы были в курсе.

Гибридная вёрстка. Для мобильных устройств используют гибридную верстку. Если в письме 2-3 колонки, то при уменьшении размера экрана они перестроятся в одну. Весь контент письма оборачивают в тег <center> , а по горизонтали располагают теги <span> с фиксированной шириной:

Медиа-запросы. Чтобы пользователю было комфортно читать письмо с любого устройства, используйте медиа-запросы. В HTML-верстке медиа-запросы — это команды, которые подстраивают макет письма под разрешение экрана.

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

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

Как тестировать

Посмотреть, как выглядят ваше письмо в разных почтовых клиентах, можно в сервисах litmus.com и emailonacid.com . Они тестируют письма:

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

Один минус — Mail.ru и Яндекс.Почта на этих сайтах нет. Поэтому самый верный способ протестировать макет письма — сделать рассылку на свои почтовые ящики. Именно этот прием используют опытные верстальщики.

Усредненную версию письма также можно посмотреть в UniSender. От конечной версии она будет отличаться некритично.

📎📎📎📎📎📎📎📎📎📎