Учимся правильно верстать письма: рекомендации и требования

Советы от экспертов сервиса рассылок Sendbox

Верстка писем для email-рассылок может стать серьезным испытанием даже для тех, кто отлично знаком с HTML. Некоторые почтовые сервисы будут некорректно отображать тело письма, в мобильной версии все может «разъехаться», а некоторые письма отправятся в спам. Рассказываем, что нужно для грамотной верстки.

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

  • Таблицы HTML. В случае с email-рассылками не так важно, что это устаревший метод верстки. Новые версии HTML не поддерживаются некоторыми почтовыми сервисами. Поэтому для создания функционального тела письма, которое будет без ошибок открываться на всех устройствах, нужно использовать таблицы. Главную таблицу, которая формирует контент письма, нужно поделить на ячейки, внутри которых можно поместить другие таблицы с необходимыми блоками (текстом, картинками, ссылками и т.д.).
  • Inline-CSS. Это встроенные стили языка, который отвечает за внешнюю часть нашего письма. Если использовать новые версии CSS, дизайн письма может отображаться некорректно при просмотре в некоторых почтовых сервисах. Чтобы этого избежать, нужно описать CSS в качестве атрибута внутри HTML. Это займет больше времени у верстальщика, зато такой метод признан самым надежным.

Вот несколько советов по CSS: не стоит использовать элемент link, сократите частоту употреблений тегов и следите за тем, чтобы данные об основном шрифте постоянно располагались рядом с контентом.

  • Ширина письма. Она не должна превышать 600 px. В ином случае ваше письмо будет растянуто некоторыми почтовыми клиентами, а у пользователя снизу появится полоса для прокрутки страницы в сторону.
  • Универсальные теги. Часть сервисов не воспринимает некоторые теги. К примеру,
Источник pixelbuddha.net

«Едет» верстка. Что делать?

Совершенно нормально, если на стадии проверки в почтовом сервисе будут проблемы с футером (подвалом письма) или в другом клиенте съедет вбок хедер (верхушка письма). Это происходит из-за того, что почтовые сервисы используют различные требования для рендеринга писем. Именно для того, чтобы верстка никуда не «съехала», нужно четко следовать правилам из предыдущей главы. Чаще всего проблему решит использование таблиц HTML и встроенные стили CSS.

Выбираем безопасные шрифты

Проблема все та же – почтовые сервисы могут не воспринимать, например, авторские шрифты, из-за чего пострадает верстка. Для письма стоит выбирать из ограниченного списка проверенных шрифтов. Tahoma, Georgia, Helvetica являются безопасными для email-рассылок. Новые или креативные шрифты при необходимости используйте сразу на изображениях – размещайте прямо на картинки перед заливкой в верстку.

Источник reallygoodemails.com

Верстка для телефонов и планшетов

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

Основную часть проблем решит использование запроса @media. С его помощью можно настроить размер блоков внутри письма. Они будут уменьшаться в зависимости от разрешения экрана, на котором будет открываться письмо. Медиа-запросы работают только для приложений и мобильных версий, почтовые сервисы на ПК их проигнорируют. Чтобы блоки в вашем письме не налезали друг на друга, нужно аккуратно подойти к дизайну письма.

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

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

Верстка под почтовые сервисы – Gmail, Outlook 2007

Эти почтовые клиенты пользуются устаревшими методами рендеринга, поэтому на них нужно особенно внимательно тестировать свои письма. Например, Gmail будет убирать прописанные CSS-стили, которые найдет между тегами стилей. Поэтому нужно заранее прописать их внутри HTML-таблиц. Также для фона письма нужно пользоваться bgcolor, а не доверять CSS. Этот язык особенно плохо воспринимается в Outlook 2007. В Gmail все тело письма может немного уехать в правую сторону, поэтому нужно отрегулировать размер ячеек. Десяти пикселей вполне хватит, чтобы текст не вышел за рамки левой части фона письма. В остальном же использование универсальных тегов и безопасных шрифтов поможет правильной верстке на этих сервисах.

Как не попасть в спам?

Нужно проследить, чтобы в вашем письме был не только HTML, но и plain text. То есть письмо в виде только текста. Большая часть сервисов, которые помогают делать email-рассылки (например, Sendbox от Mail.ru для бизнеса), автоматически добавляют plain text. Но лучше всегда проверять его наличие. Также спам-фильтры почтовых клиентов не любят, когда тело письма состоит из одной картинки или когда туда встроены Flash или JavaScript. С помощью последних элементов злоумышленники могут отправлять вирусы, поэтому почтовые службы очень строго следят за их использованием.

Редиректы и укороченные ссылки также увеличивают шансы попасть в спам, как и частое использование Caps Lock. Никакой почтовый сервис не пропустит письмо, если в нем не будет кнопки, с помощью которой можно отказаться от рассылки.

Как тестировать письма?

Существует достаточно сервисов для проверки визуального вида письма (например, litmus.com). Удобно, что в одном месте можно увидеть, как письмо будет смотреться в различных почтовых клиентах и при любых разрешениях экрана. Однако ручной метод проверки – самый надежный. В таком случае можно «пощупать» письмо и лично убедиться, что все в порядке.

Бизнес

Как собрать базу для рассылок

23 сентября 2020
Советы

Простые способы монетизировать свой блог

17 сентября 2020
Узнавайте о наших публикациях первыми
Все статьи для бизнеса