Главная / Блог / Как сверстать письмо: инструкция для чайников

Советы

Как сверстать письмо: инструкция для чайников

С чего начать вёрстку письма и как сформулировать ТЗ

Артем Чеховской
22 января, 2019

108012

Попробуйте Unisender бесплатно

Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.

Вёрстка по хардкору

Для новичков HTML-вёрстка писем — хардкор. Письмо может отлично выглядеть в браузере, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Разбираемся, как этого избежать.

Полезно

20 правил подготовки макета email к вёрстке

Как правильно подготовить письмо к вёрстке

Эта статья для вас, если вы уже что-то слышали про теги и CSS, но сами не сверстали ни одного HTML-шаблона. Если вы хотите заказать вёрстку письма у профи, статья поможет составить грамотное ТЗ.

Начнем с ошибок в вёрстке писем.

Почему «едет» вёрстка

Одного верстальщика попросили сделать письма для email-рассылки. Дизайн готов, текст написан, осталось перенести это в HTML-код. Верстальщик проверяет первое письмо в браузере:

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

В Gmail сломался футер:

Элементы вёрстки съехали и наложились друг на друга

Mail.ru неверно отображает хедер:

Название компании переехало влево

Outlook 2013 поиздевался над кнопкой:

Outlook поменял размер шрифта и параметры кнопки

Проблемы с отображением писем происходят из-за обилия программ и интернет-сервисов для чтения почты. Одно и то же письмо можно открыть через:

смартфон, планшет или ПК;
десктопное приложение или почтовый клиент в браузере;
мобильные гаджеты с разным разрешением экрана.

Даже если вы досконально знаете HTML и CSS, над письмом надо будет потрудиться. В вёрстке email-рассылок есть нюансы.

Новые статьи у вас на почте

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

Основные правила вёрстки рассылок

Правило №1. Используем таблицы

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

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

Все письмо — большая таблица, в которую вставлены таблицы поменьше

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

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

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

Универсальные теги, которые подходят для всех email-рассылок

Теги, которые работают везде

Отправляйте красивые письма в UniSender

Не переживайте о верстке — используйте 100+ готовых шаблонов или создайте свой макет в адаптивном блочном редакторе

Попробовать

Как сверстать письмо: инструкция для чайников 8

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

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

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

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

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

Добавление ссылки на CSS стили в HTML-документе

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

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

CSS-inliner перенес стили в атрибуты тегов

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

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

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

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

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

Для таблиц

Атрибуты HTML:

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

Стили CSS:

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

Пример:

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

Стили CSS:

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

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

Пример:

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

Атрибуты HTML:

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

Стили CSS:

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

Пример:

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

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

Безопасные шрифты в email-рассылке. Для удобства все они набраны одинаковых кеглем

Цвет и фон

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

Безопасный способ задать цвет

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

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

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

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

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

ПК отобразит 2 колонки, расположенные по горизонтали. Если размер экрана станет меньше 600px (описано в теге <center>), то теги <span> по 300px прыгнут друг под друга

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

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

Использование медиа-запросов в HTML верстке письма

Размер шрифта по умолчанию — 18px. Уменьшим область просмотра до 600px, размер шрифта уменьшится до 16px

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

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

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

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

Письмо в разных почтовых клиентах, сервис Litmus

Litmus отображает письмо в разных почтовых клиентах

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

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