Эта статья для вас, если вы уже что-то слышали про теги и CSS, но сами не сверстали ни одного HTML-шаблона. Если вы хотите заказать вёрстку письма у профи, статья поможет составить грамотное ТЗ.
Начнем с ошибок в вёрстке писем.
Разборы
Как сверстать письмо: инструкция по HTML и CSS для чайников
С чего начать вёрстку письма и как сформулировать ТЗ
Анастасия Рогозина
обновила статью
Почему «едет» вёрстка
Одного верстальщика попросили сделать письма для 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-тегов и атрибутов нужно использовать универсальные — они поддерживаются всеми почтовыми клиентами и браузерами. С ними письмо будет везде отображаться одинаково. Полный список и описание тегов можно посмотреть в этой статье.
Теги, которые работают везде
Правило №3. Встроенные стили CSS
CSS — это язык, с помощью которого описывают внешний вид HTML-документа. HTML отвечает за структуру письма, а CSS — за форматирование: шрифт, цвет, поля, строки, фоновые изображения.
Есть 3 способа добавить CSS:
Способ 1. Написать тег внутри <head> или <body>:
Способ 2. Создать отдельный файл со стилями CSS и дать ссылку на него в HTML-документе тегом <link>:
Способ 3. Описать CSS как атрибут в элементах HTML (inline-CSS):
Верстальщики email-рассылок используют последний вариант. Писать такой код неудобно, но у него есть преимущество. Дело в том, что многие почтовые клиенты не позволяют подключить стиль первыми двумя способами: они просто удаляют эту часть кода. Поэтому inline-CSS, прописанный в самом коде, несмотря на свою сложность, остаётся единственным способом сохранить заданный стиль во всех почтовых сервисах.
Чтобы упростить вёрстку, можно прогнать HTML-файл со стилями, заданными внутри <head> или <body> через программу-инлайнер. Она встраивает CSS-стили в HTML-файл — трансформирует CSS в виде атрибута после каждого тега:
CSS-inliner перенес стили в атрибуты тегов
Обязательные атрибуты 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 — некоторые редакторы кода и вовсе автоматически переводят HEX в RGB.
Безопасный способ задать цвет
При верстке HTML-писем фон задают через атрибуты background=»» и bgcolor=»» для тегов <table> и <td>. Если задать их для других тегов, то, например, Gmail, открытый в Safari, проигнорирует их.
Не все почтовые клиенты обработают фон, который прописан через стили CSS. Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять.
Адаптивная вёрстка
Тут всё непросто. Если для новичка HTML — это дремучий лес, то адаптивная вёрстка — джунгли. Поэтому перечислим только основные подходы, чтобы вы были в курсе.
Гибридная вёрстка. Для мобильных устройств используют гибридную верстку. Если в письме 2-3 колонки, то при уменьшении размера экрана они перестроятся в одну. Весь контент письма оборачивают в тег <center>, а по горизонтали располагают теги <span> с фиксированной шириной:
ПК отобразит 2 колонки, расположенные по горизонтали. Если размер экрана станет меньше 600px (описано в теге ), то теги по 300px прыгнут друг под друга
Медиа-запросы. Чтобы пользователю было комфортно читать письмо с любого устройства, используйте медиа-запросы. Это правила, которые позволяют менять стилистику элементов в зависимости от ширины экрана
С их помощью можно менять размеры шрифта и цвет кнопок, расположение блоков и картинок в зависимости от размера экрана. Но полностью полагаться на них не стоит — до сих пор не все почтовые клиенты выполняют эти инструкции.
Размер шрифта по умолчанию — 18px. Уменьшим область просмотра до 600px, размер шрифта уменьшится до 16px
Mobile First. Один из способов адаптивной верстки — Mobile First. В этом случае сначала создают письмо для мобильных гаджетов, а потом — для компьютеров. Переносить элементы вёрстки с маленького экрана на большую версию удобнее — а ещё так можно избежать использования неадаптируемых элементов.
Как тестировать вёрстку письма
Посмотреть, как выглядят ваше письмо в разных почтовых клиентах, можно в сервисах litmus.com и emailonacid.com. Они тестируют письма:
- на любых разрешениях экрана;
- в различных почтовых клиентах, десктопных и мобильных приложениях;
- на разных версиях одной программы.
Litmus отображает письмо в разных почтовых клиентах
Один минус — Mail.ru и Яндекс Почты на этих сайтах нет. Поэтому самый верный способ протестировать макет письма — сделать рассылку на свои почтовые ящики в разных сервисах. Именно этот прием используют опытные верстальщики.
При создании шаблона в Unisender также можно посмотреть превью — для веб-версии и мобильных устройств. В последнем случае будет показана «усреднённая» версия мобильной вёрстки. Она может незначительно отличаться от того, как будет выглядеть на реальном телефоне получателя, так как размеры экрана и другие параметры меняются от устройства к устройству.
Отображение версий письма в Unisender
Как составить ТЗ для дизайнера и верстальщика рассылки
Чтобы грамотно составить техническое задание, все нюансы HTML-вёрстки знать не надо. Но нужно хотя бы примерно понимать, как происходит этот процесс и, главное, точно знать, что вы хотите получить в результате.
Если вам нужен макет конкретного письма, лучше сначала подготовить и вычитать текст, а дизайнеру передать его финальную версию с уточнениями по оформлению, а также необходимыми ссылками и иллюстрациями. Создание макета возможно и без контента, но тогда ТЗ нужно составить как можно более подробно, с указанием структуры и содержимого.
Что должно включать идеальное ТЗ?
- Цели и задачи: что конкретно нужно сделать дизайнеру, какая цель будет у письма, будет ли это разовый шаблон или вы планируете использовать его постоянно.
- Референсы — соберите примеры писем, которые вам нравятся и которые могли бы использоваться для решения вашей задачи.
- Брендбук и элементы фирстиля — шрифты, цвета и другие требования, например, охранное поле для логотипа.
- Контент. Не забыть про хедер и футер.
- Количество столбцов, описание блоков.
- Адаптивность, уточнения по мобильной версии макета.
- Эскиз — это необязательно, но может сильно упростить всем жизнь.
Подробнее о том, как подготовить ТЗ на письмо для дизайнера, мы писали в отдельном разборе. Подготовленный макет вместе со всем контентом и необходимыми ссылками передаётся верстальщику. Он воплотит его в жизнь при помощи инструментов HtML и CSS, описанных выше.
Запомнить
HTML-вёрстка необходима не всегда. Иногда проще воспользоваться встроенным редактором, в коде блоков которого уже учтены все нюансы.
Почтовые сервисы воспринимают один и тот же код по-разному — из-за этого в одном клиенте письмо может отображаться нормально, а в других нет.
В вёрстке писем используются таблицы, хотя для остального веба они считаются устаревшими..
Используйте универсальные теги и атрибуты, а также безопасные шрифты — так вероятность того, что что-то «поедет», снизится.
Используйте Inline-CSS: прописанные другими способами стили могут не восприниматься почтовыми клиентами. Чтобы упростить написание кода, его можно прогнать через специальную программу — CSS Inliner.
В HTML-вёрстке писем есть обязательные атрибуты, которые нельзя игнорировать, иначе вёрстка выйдет кривой.
Тестируйте внешний вид письма перед отправкой — через специальные сервисы или рассылку тестовых писем на свои ящики.
Эксклюзивы — читайте только в блоге Unisender
СВЕЖИЕ СТАТЬИ
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
