menu

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

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

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

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

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

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

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

Рассылка Email-шефа
Welcome-письмо: в браузере все красиво и аккуратно

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

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

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

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

Проверка верстки письма в Mail.ru
Email-шеф «переехал» в центр хедера

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

Проверка верстки письма в Outlook 2013
Шрифт и кнопка отобразились не так, как задумывал автор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление стилей CSS внутри или

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

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

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

Описываем CSS как атрибут в элементах HTML

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

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

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

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

Фиксируем ширину письма

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

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

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

Для таблиц

Атрибуты HTML:

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

Стили CSS:

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

Пример:

Прописанные атрибуты HTML для таблиц

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

Стили 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 тоже работать не будут.

Безопасный формат цвета для email-рассылки
Безопасный способ задать цвет

При верстке 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 и mail.yandex.ru на этих сайтах нет. Поэтому самый верный способ протестировать макет письма — сделать рассылку на свои почтовые ящики. Именно этот прием используют опытные верстальщики.

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

Отображение версий письма в UniSender
Отображение версий письма в UniSender

У меня все.

  • Natalija Zelinska

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

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

  • Alex Pasko

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

  • Ink Mong

    прописываю стили в тегах.
    Вот скрин просто в браузере http://prntscr.com/i3ymmb.
    Вот скрин письма в почтовике http://prntscr.com/i3yofe
    эти стили не отрабатывают в письмах:
    text-size-adjust: none; -ms-text-size-adjust: none; -moz-text-size-adjust: none; -webkit-text-size-adjust: none;
    После рассылки, при просмотре в почтовике. В разных браузерах смотрю.
    Что не так?

  • Светлана Вин

    В блочном редакторе Unisender очень ограниченный функционал. Надо ужом извернуться, что б что-то приличное вышло. В Stripo возможностей больше. Я 2 дня мучила письмо в юнисендере, потом за час его пересобрала в Stripo. Правда при закачке из Stripo в Unisender все интервалы между абзацами пропали.

    • Светлана, спасибо за мнение! Мы как раз дорабатываем блочный редактор. Скоро выйдет новая версия, там верстать будет проще и удобнее. Но, по сути предыдущего комментария, все письма, собранные в UniSender, адаптивные.