8 правил по созданию красивой html-вёрстки email-писем

Любой инфобизнесмен при создании серии писем для e-mail рассылки сталкивается с вопросом: «Какие инструменты необходимо использовать для создания рассылки?». Именно в этот момент Вы сталкиваетесь с понятием «верстка писем».

<<Оглавление>>

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

Верстка – это создание структуры html кода, который размещает в себе элементы веб-страницы (текст, фон, гиперссылки и т.д.) в браузере согласно разработанному дизайну макета. В конечном итоге подписчик должен увидеть письмо с качественным контентом. Именно от того, насколько качественно сделана верстка, зависит мнение подписчика о рассылке и о Вас

Пример того, как выглядит верстка, приведен ниже:

Верстка писем или сайта: что легче

Да, собственно, практически ничем. Лишь в случае с письмами, необходима поддержка последних версий более, чем 30 почтовых служб и мобильных приложений, тогда как для сайтов 3-4. Это связано с тем, что почтовики никак не могут определить единые стандарты для всех и у каждого есть свои требования к письмам.  Также сделать верстку письма более трудно. При этом качественных исполнителей очень мало. Так что если вы собираетесь делать верстку письма не самостоятельно, то внимательно изучите портфолио верстальщика и адекватность цены.

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

БАЗОВЫЕ ПРАВИЛА ВЕРСТКИ ПИСЕМ

Правило 1 – использование табличной верстки

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

Существует еще блочная верстка. Но чтобы избежать проблем со старыми почтовыми агентами лучше использовать табличную верстку.

Правило 2 - выбор шаблона

Существуют шаблоны в одну и в две колонки. Шаблон в 1 колонку выгодней всего будет смотреться для рассылок новостей, дайджестов и такие шаблоны очень хорошо выглядят на смартфонах.

Шаблон в 1 колонку состоит из:

1. Заголовка (логотип компании, ссылки на подписную страницу)
2. Содержания, при нажатии на каждый пункт которого идет переход на текст в письме
3. Нижней части письма (футер, подвал) со ссылками на какие-то материалы и кнопку Отписки.

Шаблон в 2 колонки также содержит заголовок и подвал. Но в этих шаблонах письмо делится на 2 части: первая колонка, обычно, со ссылками на доп.информацию и навигацию, а вторая колонка содержит основную информацию сообщения.

Эти шаблоны кодируются с помощью HTML таблиц.

Рассмотрим на примере создание двухколоночной html вестки: всего необходимо создать 3 таблицы: для заголовка, подвала и для центральной части, состоящей из основной информации. Подходит лучше всего для письма с картинками, разбитыми по разным ячейкам.

Также в шаблоне используйте универсальные атрибуты html-тегов

Правило 3 – использование отступов

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

Вертикальный отступ задается так:

Правило 4 – текст и ссылки: правила создания

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

Тег span применяется при создании текста. line-height применяется для блока или родительской ячейки. Как я уже писала выше, при верстке применяйте только стандартные шрифты.

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

Чтобы не возникло сложностей с открытием страницы в этом же окне, указывайте атрибут target=”_blank”.

Чтобы предлог не переносился на другую строку и был на одной строке вместе со словом используйте &nbsp;, при переносе слова применяйте символ &shy;

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

1. Сделать, чтобы мобильный номер не распознавался как номер телефона
2. Использовать мобильный телефон как ссылку

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

Правило 5 – фон и картинки

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

Многие почтовые службы не поддерживают фоновые картинки. Исходя из этого необходимо их избегать или почти не использовать.

Например, для того, чтобы фоновая картинка показывалась в outlook применяйте следующее:

На этом сайте http://tools.emailmatrix.ru можно сгенерировать нужную структуру.

Правило 6 – использование видео

Не все почтовые службы поддерживают видео при загрузке. Только лишь немногие, такие как iOS, Outlook, Apple mail. Вы можете использовать медиа-запросы, чтобы скрывать видео, в зависимости от типа клиента.

Правило 7 – адаптивная верстка

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

На платформе IOS письма масштабируются, чтобы уместиться в один экран, поэтому их необходимо увеличивать, чтобы посмотреть текст. На андроид письма показываются в 100% масштабе и таким образом подписчик видит только часть письма, что также уменьшает шансы заинтересоваться этим письмом.

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

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

1. Резиновая версткa
2. Мобильная версткa
3. Медиа-запросы

Мобильная верстка используется только, если количество подписчиков, просматривающих письма с мобильных устройств более 75%. Мобильная верстка отличается от обычной только шириной шаблона и составляет 320рх, на мобильных устройствах смотрится идеально, но вот на компьютерах очень странно.

Резиновая верстка - в данном виде верстки используются отдельные блоки размеры всех блоков и картинок (в % соотношении). Используется очень редко в чистом виде.

Медиа-запросы - используются медиазапросы CSS и подстраиваются под отображение письма идеального формата на любом из устройств. Но адаптироваться такие письма будут только в устройствах, которые поддерживают медиазапросы – это mail, gmail и почта android. В остальных клиентах типа yahoo подписчики увидят простое (не адаптивное) письмо.

Полезные ресурсы для верстки писем

Если Вы не являетесь профессионалом в верстке, то рекомендую Вам воспользоваться готовыми шаблонами, например:

1. https://www.sendwithus.com/resources/templates - сервис с готовыми шаблонами для писем
2. https://www.campaignmonitor.com/email-templates/ - сервис также позволяет получить очень красивые шаблоны писем

Тематика: Блог, Email маркетинг, HTML и CSS