Ключевые ошибки при вёрстке html-писем для email-рассылок — как отправлять письма, за которые не стыдно

Ключевые ошибки при вёрстке html-писем для email-рассылок — как отправлять письма, за которые не стыдно

20 мая 2021 7 0 412
Создавать красивое адаптивное письмо бывает сложнее, чем верстать лендинг — это связано с тем, что почтовики, в отличие от браузеров, ещё не пришли к единым правилам отображения кода. Некоторые почтовые клиенты поддерживают HTML и CSS хуже, чем браузеры. 

Чтобы письмо не расползалось на разных веб-сервисах, в приложениях и почтовых клиентах, верстальщику писем приходится снабжать код большим количеством «костылей». Однако есть несколько советов, как избежать основных ошибок в вёрстке и создать письмо, за которое не придётся краснеть перед клиентом.

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

Если верстальщик пишет код для письма по тем же принципам, что и для лендингов, итоговый результат будет далёк от совершенства. Вот лишь некоторые проблемы, которые могут возникнуть при тестировании кода:
  • письмо будет отображаться по-разному в почтовых клиентах: какой-то блок может исчезнуть, какой-то окажется не на своем месте;
  • фоновое изображение может пропасть;
  • рукописные и нестандартные шрифты превратятся в безопасные Arial или Times New Roman;
  • письмо будет долго загружаться в почтовике;
  • какие-то элементы письма могут отличаться от макета. Некоторые почтовики, накладывают свои стили поверх прописанных, удаляют или игнорируют стили.
Если вы поймёте, что пока не готовы верстать письма самостоятельно, можно обратиться к профессионалам и заказать дизайн и html-вёрстку email-рассылок.

На что обращать внимание при вёрстке писем, чтобы избежать проблем

Лучше не использовать <div>

Тег <div> неправильно позиционируется некоторыми почтовыми клиентами, из-за чего блоки могут разъезжаться по странице. Поэтому, когда речь идёт о письмах, где важен дизайн и ровное расположение блоков, безопаснее верстать таблицами: они отображаются без искажений.

Верстальщик может помещать внутрь табличных ячеек любую информацию — картинки и текст. Ячейки могут располагаться в несколько колонок или одну.
Табличная вёрстка письма
Пример расположения колонок в табличной вёрстке письма

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

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

Ограничить размер макета

Ширина макета не должна превышать 700px, чтобы письмо могло полностью отобразиться в Яндекс.Почте на ноутбуках, диагональ которых равна или меньше 15". Если макет будет шире, он не поместится и частично скроется из-за колонок по бокам экрана. Читать такое письмо неудобно.

Быть готовым, что нестандартные шрифты отобразятся не на всех устройствах

С такими шрифтами проблем не возникает на устройствах Apple. На других гаджетах при открытии письма вместо нестандартных отображаются стандартные шрифты. Вот список стандартных шрифтов, которые на любом экране будут выглядеть одинаково:
  • Arial,
  • Courier,
  • Georgia,
  • Helvetica,
  • Lucida Sans,
  • Tahoma,
  • Times New Roman,
  • Trebuchet MS,
  • Verdana.
При желании можно использовать любые нестандартные веб-шрифты, например, Google Fonts, которые скачиваются автоматически по ссылке в момент открытия письма. Если какой-то определённый шрифт важен и заменить его нельзя, можно использовать картинку с его начертанием.

Не сокращайте стили и не встраивайте их через внешние ссылки

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

<div style="color: #FF0000;">Пример текста</div>

Использовать встроенные стили не так удобно. Но чтобы не прописывать рядом с каждым элементом код, можно воспользоваться специальными сервисами, например:
  • Premailer.io;
  • inlinestyler.torchbox.com.
Они автоматически переведут все внешние стили во встроенные. Помимо внешних, проблемы могут возникнуть и с сокращенными стилями. Например, лучше не использовать:
padding: 1px 2px 3px 4px. 
А заменить код на:  padding-left: 1px; padding-right: 2px; padding-top: 3px; padding-bottom: 4px.

Сокращайте длину кода

Если размер письма превысит 100Кб, Gmail и Yahoo обрежут письмо. Тогда у пользователя на экране появится кнопка-ссылка с предложением открыть полную версию письма. Читатель может не понять, что происходит, и закрыть письмо.

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

Осторожно используйте фоновые изображения

Некоторые почтовики не отображают фоновые изображения. Поэтому не забывайте прописывать bgcolor и задавайте цвета фона таким, чтобы текст оставался читаемым, даже если картинка не отобразится.
Фон для email
Письмо с фоновой картинкой и текстом сверху

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

Телефоны и адрес почты прописывайте ссылкой

Если этого не сделать, то это сделают почтовые сервисы. Они применят свои стили по умолчанию, в результате чего оформление номера телефона может отличаться от задуманного.

Подробнее о html-вёрстке писем можно узнать в блоге Email Soldiers.

Что можно использовать при вёрстке писем

Картинки 

Изображения помогают запоминать до 65% информации, в то время как текст — только 10% — согласно исследованиям Hubspot. Вот несколько советов, как вставить картинки в письма и не испортить макет:
  • баннер — не больше 700px, чтобы он вписался в шаблон по ширине;
  • кнопки — заметные и удобные для нажатия, поэтому не стоит их делать меньше 40-50рх;
  • отступы вокруг картинок и изображений — обязательные, чтобы пользователь мог без проблем кликнуть по ним;
  • размер картинок — небольшой, не более 200 Кб;
  • атрибут alt тега <img> — у каждой картинки, альтернативный текст картинки не более 30 символов;
  • для Outlook ширина изображения — задаётся с помощью атрибута width, иначе сервис отобразит реальный размер картинки, а не тот, что нужен вам.

Gif-анимация

Анимированные картинки привлекают внимание больше, чем статичные. Из минусов — не все почтовики корректно отображают gif, поэтому здесь могут потребоваться медиазапросы — специальный код, который поможет адаптировать письма к разным устройствам, браузерам и почтовым агентам. 

Не забывайте следить за размером gif. Чем больше файл анимации, тем дольше он загружается у пользователей. Делайте анимацию до 3 Мб, максимум — 5 Мб.

Прехедер

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

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

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

Расскажем о сервисах, которые помогут с вёрсткой писем.

EmailOnAcid

Особенности:
Сервис позволяет проверить отображение письма в 112 почтовиках: мобильных версиях, десктопных и веб. Минимальная подписка обойдётся 73 доллара за месяц.
Тарифы EmailOnAcid
Достоинства:
  • Тестовый период. Прежде, чем купить подписку, сервисом можно бесплатно пользоваться неделю, чтобы изучить возможности и функционал.
  • Неограниченное количество превью. После внесения изменений в код, можно сразу же загрузить улучшенный вариант и проверить снова. И так сколько угодно раз.
  • Подробный отчет после проверки. Все замечания будут собраны в одном отчёте. 
  • Библиотека подсказок и решений. Обращайтесь к ней, если что-то не получается. Библиотека пополняется с 2008 года и уже собрала множество полезной информации для верстальщиков.
Недостатки:
Нет инспектора обработанного кода. Не получится выделить какую-то область письма и посмотреть её код, чтобы отработать замечания.

Litmus

Особенности:
Сервис позволяет проверить письмо в 90 почтовых сервисах. Из дополнительных функций — веб-ide, который позволяет редактировать код, система аналитики email-рассылки, функции тестирования производительности, проверка на «спамность». Минимальная подписка обойдётся 80 долларов в месяц.
Тарифы Litmus
Достоинства:
  • Инспектор обработанного кода. Выделяйте любой участков письма, просматривайте код и сразу же его правьте.
  • Тестовый период. Доступен в течение 7 дней. Можно проверить большую часть функционала сервиса.
  • Анализ кода и предложения по его улучшению. Сервис проверяет код по 1000 правил, которые нацелены улучшить его совместимость с почтовыми клиентами.
  • Отчёт проверки. С подробными пояснениями и визуальным оформлением.
Недостатки:
Некоторые функции доступны только в подписках Pro и Enterprise. Например, советы, как избежать спам-фильтра и попасть в папку «Входящие».

Вёрстка писем: подведём итог

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

Чтобы облегчить процесс вёрстки писем, нужно придерживаться некоторых правил и тестировать код на ошибки в специальных сервисах — EmailOnAcid или Litmus.

Если же вёрстка email-рассылок всё равно не радует ни вас, ни клиентов, можно пройти электронный курс по вёрстке, который поможет получить недостающие знания по HTML и CSS, научит обходить особенности почтовых сервисов и создавать красивые адаптивные письма с уникальным дизайном. 

Поделиться:

Советуем прочитать:

Кейс
Как увеличить количество заявок в три раза с помощью email трекинга
23.04.2018 2 18
Что магазину писать в email-рассылке, чтобы её ждали
07.05.2018 0 12
Как ресторану запустить email-рассылку. Примеры лучших рассылок в ресторанном бизнесе
21.04.2020 0 3