Вернуться в Блог

HTML верстка писем для Email рассылки

Dmitry Gromov
10 Июнь, 2019

верстка email шаблонов

Email-маркетинг — традиционный и эффективный инструмент digital маркетинга, который позволяет подогревать аудиторию, привлекать новых пользователей и мотивировать их к покупке продукта.

Для успешного использования системы емейл маркетинга недостаточно просто грамотно составить письмо и нажать на кнопку “отправить”. Информация должна подаваться в “красивой обертке”, со всеми необходимыми ссылками, изображениями и четкой навигацией. Более того, необходимо учитывать, что около 58% email пользователей проверяют почту с мобильных устройств, а значит дизайн отправленного письма должен быть user friendly, или другими словами — адаптивным.

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

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

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

Существует несколько основных движков для обработки HTML-писем:

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit;
  • Outlook 2000, 2002 and 2003 используют Internet Explorer;
  • Outlook 2007, 2010 and 2013 используют Microsoft Word;
  • Веб-клиенты используют браузерный движок (например, WebKit для Safari, Blink для Chrome).

Почтовые клиенты также добавляют собственные стили, помимо тех, которые были выбраны разработчиком. Так, например, Google еще в 2016 году перешел на встраиваемые стили и медиа-запросы для Gmail. На данный момент, Google поддерживает немалое количество CSS-свойств, что помогает упростить процесс разработки шаблонов.

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

Использование табличной верстки писем

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

Табличная верстка — залог того, что письмо не поползет и корректно отобразится в любом почтовом клиенте.

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

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

Так выглядит 1-колоночная основа с фиксированной шириной и боковыми отступами 20 рх.

1-колоночная основа:

<body style=»margin: 0; padding: 0;»>
   <table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″>
       <tr>
          <td align=»center» valign=»top»>
             <!— HEADER STARTS —>
             <table width=»600px» cellspacing=»0″ cellpadding=»0″ border=»0″>
                 <tr>
                    <td align=»center»>
                        <!— … —>
                    </td>
                 </tr>
             </table>
             <!— HEADER END —>
             <!— CONTENT STARTS —>
             <table width=»600″ cellspacing=»0″ cellpadding=»0″ border=»0″>
                 <tr>
                    <td align=»left»valign=»top»>
                        <!— … —>
                    </td>
                 </tr>
             </table>
             <!— CONTENT END —>
             <!— FOOTER STARTS —>
             <table width=»600″ cellspacing=»0″ cellpadding=»0″ border=»0″>
                 <tr>
                    <td align=»center»>
                        <!— … —>
                    </td>
                 </tr>
             </table>
          <!— FOOTER END —>
          </td>
       </tr>
  </table>
</body>

Одноколоночный шаблон, обычно, состоит из:

  • Заголовка (хедер), содержащего логотип компании и определенное количество ссылок, ведущих на домашний сайт;
  • Внутренних ссылок (внутреннее тело письма), которые ведут на определенные участки данного письма;
  • Футера — нижняя часть емейл сообщения, которая чаще всего содержит ссылки, дублирующие навигацию из заголовка, плюс инструкции по отписке от рассылки.

Эти же элементы содержит и двухколоночный макет.

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

Вне зависимости от предполагаемого дизайна, следует помнить, что самая важная информация должна размещаться вверху письма. Это позволит адресату сразу увидеть ее.

Внутренние CSS-стили

Многие емейл-клиенты не особо сильны в поддержке CSS. Но это не значит, что в письмах не должны использоваться стили, свёрстаные с помощью таблиц.

Необходимо учитывать несколько важных моментов.

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

<p style=»color: red;»></p>

Таким же образом можно использовать <table>, <td>, <p>, <a> и т.п. Не стоит использовать объявление CSS <style> в HTML-теге <head>, как это делают при вёрстке веб-страниц. Вместо этого, объявление <style> необходимо разместить за тегом <body> . В случае с Gmail, любые теги <style> в письме будут автоматически удалены. Кроме того, не стоит использовать элемент link для того, чтобы сослаться на внешний файл стилей: большинство популярных email-клиентов их проигнорируют, изменят или удалят.

Используйте инлайнер, чтобы упростить работу. Эта программа встраивает CSS-стили в HTML-файл. Она вычисляет перечень стилей для каждого отдельного элемента и записывает их в атрибут <style> соответствующего HTML-тега. К web-inliner относятся: CSS-инлайнер в Campaign Monitor, CSS Inliner Tool в MailChimp и Responsive Email Inliner в Foundation for Email.

При использовании инлайнеров очень важно тестировать письма.

Ширина письма

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

Работа со шрифтами для верстки писем

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

Чтобы они не конфликтовали с Outlook, применяется медиа-запрос для WebKit:

 

<style>
@import url(ссылка);
/* Type styles for all clients */
h1 {…}
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) {
h1 {…}
}

Для каждой ячейки таблицы необходимо прописать <td> font family, font size и color, или же клиент проигнорирует выбранный шрифт. Правило соблюдается и для блочных элементов, в которых находится текст, таких как <p>, <h1>…<h5>, <div>.

Изображения для рассылок

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

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

Основные мысли старайтесь доносить в текстовой форме, так как по данным Litmus, у 43% пользователей емейл сервисов отображение изображений отключено.

Адаптивная верстка писем для мобильных устройств

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

Существует несколько видов адаптации писем:

  • Мобильная верстка писем;
  • Резиновая верстка;
  • Медиа-запросы;
  • Комбинированная.

Мобильная верстка рассылок

Такой подход применяется в случае, если более 70% открытий емейл рассылок происходит с мобильных устройств.

Ширина такого макета составляет 320 рх.

Такое письмо будет прекрасно выглядеть на экране мобильного телефона. И только на нём. Так как ширина макета не подходит для корректного отображения на десктопе.

Резиновая верстка писем

Этот подход является практически полной противоположностью предыдущему и довольно редко применяется в чистом виде.

Для создания блоков и изображений используются относительные размеры (указаны в процентах). За счет этого письмо занимает всю площадь экрана, вне зависимости от его размера. Такой подход имеет весьма определенный ряд ограничений по структуре расположения блоков.

Применение медиа-запросов

Метод базируется на основе использования медиа-запросов CSS3. Обеспечивает отображения емейл писем на экранах любых размеров, позволяет менять параметры отображения текста, расположение блоков и так далее.

Но, не все так просто. Данный метод имеет весьма существенный недостаток. При его применении письма адаптируются только в приложениях, поддерживающих медиа-запросы — это стандартное приложение “Mail” на iOS и Android.

Комбинированная верстка письма

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

Верстка писем и спам

Не одним контентом едины.

На попадание писем в спам влияют также и параметры вёрстки емейл рассылок.

Ошибка №1

Ширина письма.

Ранее мы упоминали параметры при которых должно быть сверстано письмо. Но всё же, напомним. Письма, свёрстаные свыше 600рх, отображаются некорректно. Вёрстка плывет. Верстая письма под десктоп задавайте параметры от 550px до 620рх.

Ошибка №2

Копирование параметров форматирования.

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

Неотображаемые теги и атрибуты привлекают внимание встроенных спам-фильтров.

Перенося ненужные теги и стили с сайтов, можно случайно зацепить элементы Flash-анимации и JavaScript. Они, в свою очередь, также не поддерживаются системами.

Ошибка №3

Неправильная кодировка письма.

При HTML-вёрстке писем используется кодировка UTF-8. Это стандартная кодировка Юникода. При использовании другой кодировки письмо отображается некорректно, из-за чего моментально попадает в “Спам”.

Ошибка №4

Письмо свёрстано одним изображением.

Рассылка при помощи одного изображения чаще всего используется спамерами. Чтобы избежать попадания в спам, картинка должна сопровождаться текстом (минимум из одного-двух абзацев).

Ошибка №5

Отсутствие alt-тегов.

Alt-тег — текст, отображаемый в браузере, если изображение отключено или не отображается в браузере.

При отсутствии альт-тегов, пользователь может не понять суть отправленного сообщения. Нейросеть считает эти значения, и пропускает их сквозь спам-фильтр.

Тестирование вёрстки

Перед отправкой письма важно его протестировать.

Для тестовой рассылки вы можете с легкостью использовать несколько тестовых сервисов. Например, litmus.com либо его аналоги.

Такие сервисы помогают тестировать:

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

Также, вы можете отправить письмо на свою почту и просмотреть усредненную версию письма. Для этого лучше использовать массовые сервисы емейл рассылок, например, такие, как BSG.

HTML верстка писем для Email рассылки
5 (100%) 1 vote

Наши другие продукты:

Прочитайте эти статьи далее: