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

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

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

Почему «едет» вёрстка

Наверное вы не раз сталкивались с такой неприятной ситуацией: вложили много сил в дизайн и верстку письма для email-рассылки, проверили его на экране компьютера, отдали email-маркетологу. и через некоторое время начали получать претензии. Письма не дочитывают или совсем не читают, а если читают, то не нажимают на кнопки call to action. Почему же так происходит и что пошло не так?

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

Люди просматривают письма не только с экрана компьютера. Почти 40% из них открывают их со смартфона или планшета. Около половины тех, кто читает с большого экрана, делают это через почтовые клиенты. Весь этот «зоопарк» устройств и почтовых клиентов вносит свои изменения в первоначальный дизайн электронного письма. Из-за этого письма могут не только терять свой внешний вид, но и долго грузиться, или не открываться. А то и вовсе попадать в спам, если почтовик заподозрит, что содержащаяся в нем ссылка это потенциальный зловред.

Вот основные проблемы с отображением писем:

Внешний вид письма сильно отличается от задуманного на экранах мобильных устройств: текст не вмещается, элементы «съезжают», строчки наползают друг на друга.

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

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

CSS- и HTML-теги не работают.

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

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

Обязательно применяйте таблицы. Именно правильное использование таблиц позволит вам добиться желаемого результата — чтобы письмо выглядело точно так, как вы задумали, на любом экране. Ведь не все почтовики и браузеры умеют поддерживать последние версии HTML и CSS. Так что выход один — таблицы. С их помощью вы добьетесь того, что структура электронного письма не «расползется» и само оно будет выглядеть именно так, как вы задумали изначально. О том, по каким принципам строятся таблицы, мы расскажем чуть дальше.

Используйте только те атрибуты и HTML-теги, которые одинаково хорошо воспринимают все почтовые клиенты. Например, почтовый клиент от Mail.ru не поймет тег header, почта Gmail имеет проблемы с тегом button, а достаточно всеядный Outlook не справится с тегом footer.

Используйте универсальные HTML-теги и атрибуты, чтобы все элементы отображались корректно на любом устройстве и в любом почтовике.

Используйте встроенные стили CSS. Аббревиатура CSS (Cascading Style Sheets) переводится как каскадные таблицы стилей. CSS занимается описанием того, как будет выглядеть HTML рассылка. Практически все сайты сейчас задействуют связку HTML и CSS.

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

Добавить каскадную таблицу стилей можно несколькими способами

Сделать файл с описанием стилей и сослаться на него тегом link в HTML-документе. Проставить тег внутри head или body: Прогнать HTML-файл с CSS внутри head или body через специальную программу. Она превратит CSS в атрибут для каждого тега и таким образом интегрирует стили внутрь HTML-файла. Для тех, кто привык читать письма с телефона, просто задаем неизменяемые размеры письма по горизонтали, чтобы не было ситуации, когда требуется горизонтальная прокрутка, чтобы прочесть все. Обычно задают ширину не более 600 пикселей.

Обязательные атрибуты HTML

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

Приведем примеры нужных атрибутов, которые дадут представление, как верстать письмо в html.

Атрибуты, которые используют в таблицах:

border padding-bottom: 20px»>cellpadding padding-bottom: 20px»>cellspacing padding-bottom: 20px»> Атрибуты для стилей в таблицах:

«margin: 0;» — интервал от края таблицы до других элементов;

«padding: 0;«— интервал от рамки до контента внутри..

Атрибуты для контента:

«color: #333333;» — задает цвет шрифта;

«font: 11px Arial, serif;» — задает гарнитуру, размер и вид шрифта;

«line-height: 22px;» — расстояние между строками в пикселях;

«-webkit-text-size-adjust: none;» — запрещает смартфонам вносить свои изменения

Чтобы ссылки открывались в другом окне, прописываем атрибут «target=»_blank».

Атрибуты для картинок:

src=»https://www.uiscom.ru/blog/kak-sverstat-pismo-instruktsiya-dlya-chaynikov/#» — адрес картинки;

alt=»» — описание картинки: его можно не заполнять;

border padding-bottom: 20px»>width padding-bottom: 20px»>height padding-bottom: 20px»> Атрибуты для стилей в изображениях:

«display: block;» —вставляет элемент в блок, чтобы почтовые клиенты не делали свои собственные отступы вокруг изображения.

Безопасные шрифты

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

Однако почтовые клиенты воспринимают далеко не все типы шрифтов. И это надо учитывать, когда вы собираетесь сверстать письмо в html для рассылки. Прежде чем дать волю своим художественным предпочтениям, изучите, какие шрифты можно применять, а какие не стоит. Если вы хотите добиться, чтобы все шрифты отображались правильно на любом почтовом клиенте, обязательно применяйте свойства font-family.

Давайте рассмотрим самые распространенные семейства шрифтов в почтовых, сверстанных с помощью html рассылках.

Самый популярный шрифт для всех стран, пишущих на латинице. Шрифт не имеет засечек и считается одним из самых дружелюбных для восприятия — в нем почти нет отвлекающих внимание элементов. Несмотря на «простонародность», его активно используют в своих брендбуках глобальные компании, такие как Макдональдс или Скайп. Этот шрифт называют универсальным, он вызывает симпатию у большинства пользователей.

Этот шрифт возник как продолжение Гельветики и содержит родственные с ним элементы. Возник в эпоху массового перехода на компьютеры. Также, как и Helvetica, не имеет засечек и отличается простотой начертания. Используется в большинстве почтовых клиентов по умолчанию. У Arial есть проблемы с восприятием русских букв: например, буква «п» похожа на «л», «ц» похожа на «и», а «ч» похожа на «н». Так произошло потому, что кириллический вариант разрабатывали не в России. У простоты и лаконичности Arial есть и своя обратная сторона: большие массивы текста смотрятся монотонно и их становится трудно читать.

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

Этот шрифт примечателен тем, что в нем расстояние между знаками довольно большое. Verdana — это еще один вариант шрифта без засечек.

Шрифт Times New Roman

Большинство официальных документов в нашей стране используют Times New Roman по умолчанию. Поэтому этот шрифт с засечками подсознательно ассоциируется с государственными учреждениями и коммерческие компании стараются по возможности избегать его.

Шрифт без засечек, созданный в 80-х годах ХХ века специально для Microsoft. Для него характерны узкие буквы и такое же узкое расстояние между ними. Подходит для тех, кому нужен убористый шрифт, чтобы уместить больше текста без разрыва строки.

Шрифт Trebuchet MS

Еще один шрифт для Microsoft, на этот раз его разработка произошла уже в 90-х. Тоже не имеет засечек. Любопытный момент — это первый из шрифтов Microsoft, в котором появился полноценный курсив, а не просто наклонное начертание.

Шрифт Courier и Courier NEW

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

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

И есть еще один важный нюанс. Почтовый клиент Microsoft Outlook трансформирует все шрифты в Times New Roman.

Цвет и фон

Чтобы прописать точное значение цвета в email, используйте формат HEX. HEX-коды описывают даже минимальные оттенки каждого цвета. Сокращение HEX переводится как hexadecimal, то есть «шестнадцатеричный». Каждый цвет конструируется как сочетание синего, зеленого и красного. В HEX-кодах значение цвета отображается в виде «решетки» и 6 символов: первые две цифры для красного, две вторые для зеленого и третья пара для синего.

Для того, чтобы почтовые клиенты правильно распознавали цвет, записывайте его в полном виде, например #111111. Ни в коем случае не используйте сокращения, почтовики их часто не понимают. Также не работают они с цветовыми кодами RGB или CMYK.

Адаптивная верстка рассылок

Адаптивная верстка email рассылок помогает письму автоматически подстроиться под размеры экрана разных устройств. С ней структура email хорошо смотрится и на Retina-дисплее Macbook, и на маленьком экране бюджетного Xiaomi, Причем качество изображения не меняется от разрешения и диагонали монитора.

Рассмотрим основные типы адаптивности

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

Верстка писем с использованием медиазапросов — специальных команд, трансформирующих вид письма под тип экрана. Медиазапросы позволяют трансформировать не только размер букв, но размещение блоков и иллюстраций. Единственный недостаток — не все почтовики способны корректно распознавать и исполнять эти команды.

Наиболее перспективный и хайповый метод — Mobile First, когда email в первую очередь верстают под смартфоны, а во вторую — под стационарные устройства.

Оформление макета письма

В дизайне электронного письма используют деление на четыре части:

Индивидуальная верстка email рассылки происходит преимущественно в Body. Части Pre-Header и Footer изменяют редко, а в Pre-Header с каждым новым письмом добавляется только новое описание.

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

Горизонтальные размеры устанавливайте не шире 600 px. Иначе при просмотре со смартфона пользователю придется прокручивать его влево-вправо, а это всех раздражает.

Избегайте JavaScript — почтовики определяют его как элемент зловреда и блокируют письмо. То же самое относится и Flash.

Если хотите вставить анимацию, то лучше использовать GIF, но рекомендуем предварительно уменьшить его размер, чтобы письмо не стало слишком «тяжелым».

Не пропускайте новости
Спасибо за подписку!

Мы уже отправили вам первое письмо с подборкой лучших материалов

Табличная верстка рассылки

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

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

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

Адаптация писем

При создании структуры email письма не стремитесь делать их все однотипными. Адаптируйте письмо под цели и задачи и под конкретную целевую аудиторию.

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

Письмо-ньюслеттер делает акцент на тексте, но сам текст должен иметь четкое структурное членение с тематическими блоками.

Если ваше письмо рассчитано на высокий отклик, то главным элементом в нем должны быть кнопки call to action.

Структура email письма должна быть полностью подчинена задачам, которые задает маркетинг. Тогда оно действительно будет работать.

Оформление текста

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

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

Придерживайтесь правил переноса, принятых в типографике. Предлоги нельзя оставлять в конце строки, нужно перенести их в начало следующей. То же самое касается и однобуквенных союзов, таких как «а», «и» и других.

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

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

Про изображения

Желательно все изображения делать в формате JPEG. Это золотая середина: хотя формат PNG дает лучшее качество, зато весит он намного больше, а разницу в градиентах на мобильном телефоне вы вряд ли заметите.

Размещайте URL в иллюстрациях. Если картинка привлекательно оформлена и содержит призыв к действию, то адресат скорее всего предпочтет кликнуть именно на нее.

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

Как тестировать

После того, как вы сверстали электронное письмо, обязательно проверьте, как оно отображается на разных устройствах. Откройте его сначала во всех браузерах. Затем проверьте в почтовых клиентах: Outlook, Gmail, Яндекс, Mail.ru, Yahoo, Почта Apple, Spark, Airmail и других.

Затем сделайте тестовые рассылки своим друзьям и коллегам на максимальное число мобильных гаджетов: от iPhone и iPad до всех бесчисленных вариаций Android.

Есть более быстрый путь, например воспользоваться сервисом emailonacid.com, но у него есть серьезный недостаток — он не работает с российскими почтовыми сервисами. Поэтому такие программы могут сократить вам только половину работы.

Надеемся, что эта статья даст вам некоторое представление о том, как сверстать письма в html для рассылки. С правильно отображаемым письмом подсчет и аналитика конверсий станут намного более приятным делом!

HTML-письма без ошибок: 8 требований к дизайну и верстке

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

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

Дизайн

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

В верстке email-рассылок нельзя использовать современные спецификации цветов, градиентов, фоновых картинок и лейаутов (flexbox и grid). Зато можно использовать старые и максимально простые инструменты. Отсюда и ограничения в дизайне.

1. Размер

— Ширина макета для веба — максимум 700 пикселей. Даже на больших экранах письма отображаются такой ширины.

— Длина — нет универсальной длины, главное — ключевую информацию и CTA (call to action) разместить на первом экране, чтобы пользователь не потерялся в письме.

— Вес. Если письмо длинное, оно может не пройти по весу. Некоторые почтовики, например, Gmail, обрезают письма больше 102 Кб: они загружаются не полностью и появляется кнопка «Открыть оставшееся». Из-за этого не показывается часть контента и важные ссылки в конце письма, например ссылка отписки. У некоторых сервисов не подгружается пиксель трекинга открытия письма, который расположен в конце. Это повлияет на статистику: если пользователь откроет письмо, маркетолог может не узнать об этом.

2. Фон

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

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

3. Шрифты

В email-рассылках лучше не использовать дизайнерские шрифты, которые нужно устанавливать на компьютер самостоятельно, например Futura или Lobster. Если у пользователя они не установлены, то и в письме не отобразятся.

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

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

p <
font-family: Lobster, Arial, sans-serif;
>

4. Контент

Контент письма состоит из четырех базовых элементов: прехедера, хедера, основного содержания и футера.

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

Если прехедера нет, то под темой письма пусто или подтягиваются случайные строки из письма

Хедер — это шапка письма. Если пользователь откроет письмо, он с вероятностью 100% увидит хедер. Здесь обычно размещают логотип, контакты и ссылки на основные разделы сайта: каталог, распродажа, новинки. Можно сделать эту часть минимальной, чтобы пользователь сразу переходил к основному содержанию.

Основное содержание. Главная задача письма и особенно этой части — подвести пользователя к целевому действию.

Есть несколько способов размещения информации в письме: текст, баннер, товарная сетка.

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

В заголовке лучше сразу показать пользу (вывести промокод, рассказать о подарке или скидке), чтобы человек понимал, зачем ему читать это письмо. Иногда в заголовке письма пишут приветствие: «Здравствуйте, Татьяна!».

Неудачный пример использования заголовка:

Гайд по верстке писем для email-маркетологов: виды, возможности, проверка корректности, частые ошибки

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

Этот гайд мы собрали из статей в нашем блоге:

• Гайд по верстке адаптивных писем
• AMP-технология в рассылках: плюсы и минусы
• Зачем нужна геймификация в email-рассылках
• Шаблон для рассылки или создание письма с нуля – что лучше выбрать
• Как провести тестирование писем: сервисы и рекомендации
• 27 сервисов для создания эффективной рассылки
• Как подобрать шрифт для email-рассылки
• Каким должен быть размер письма
• Как сделать макет письма

Какой бывает верстка email-рассылок

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

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

Сейчас сервисы рассылки предлагают два способа сверстать письмо: в блочном или HTML-редакторе. Разберем подробнее принцип работы, плюсы и минусы каждого.

Верстка писем в блочном редакторе

Блочный редактор – это конструктор с готовыми блоками для контента. Визуально он выглядит так ��

Слева блоки, которые можно добавить в письмо: текст, картинка, кнопка, разделитель, кнопки поделиться и ссылки на соцсети. Также есть отдельный блок, в который можно вставить HTML-код с нестандартным форматом. Например, в блочном редакторе можно сделать только 4 колонки, а вам нужно 5.

Справа макет письма. В него email-маркетолог добавляет блоки, перетаскивая их из левой части. Блоки можно ставить в разном порядке, например:

• картинка и под ней текст
• картинка слева – текст справа и наоборот
• несколько картинок в ряд и кнопками под ними и т. д.

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

Все это существенно упрощает верстку почтовых рассылок.

Пример письма, собранного в блочном редакторе за 5 минут

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

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

Результаты адаптивной верстки письма в блочном редакторе 

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

• подтверждения подписки
• приветствия
• каталога товаров
• оповещений
• акций и скидок
• новостей
• брошенной категории, корзины или просмотра

Также есть шаблоны для праздников и событий с тематическим оформлением. Например: письмо на Хэллоуин, Черную пятницу, 23 Февраля или про распродажу.

Все эти шаблоны можно редактировать на свое усмотрение 

Плюсы работы в блочном редакторе

Создать письмо можно за 15 минут без навыков программирования. Блоки уже адаптированы под десктоп и смартфон, поэтому не нужно беспокоиться о качестве верстки.

Минусы работы в блочном редакторе

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

Верстка рассылки в HTML-редакторе

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

HTML-редактор в сервисе рассылки выглядит так ��

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

Так HTML-редактор выглядит в сервисе Sendsay

Только с помощью HTML-верстки письма можно сделать динамические блоки с персональными подборками товаров и услуг.

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

Пример верстки письма с динамическим контентом – информация о выбранном товаре автоматически подставляется в письмо

Есть два способа сделать письмо с помощью HTML:

1. Самостоятельно написать код письма – нужно нанять дизайнера, который нарисует макет, и опытного верстальщика, чтобы превратить его письмо.
2. Воспользоваться готовыми шаблонами, которые можно скачать в интернете. Этот шаблон загружают в сервис рассылки и подстраивают под себя с помощью верстальщика.

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

Верстка адаптивных элементов

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

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

У нас есть гайд по верстке адаптивных HTML-писем для email-рассылки, в котором описаны основные правила. Если коротко, то нужно:

• использовать табличную верстку – только такой формат корректно работает во всех почтовых клиентах и браузерах
• добавлять универсальные теги и атрибуты – иначе некоторые блоки писем не распознает браузер или мобильное приложение
• использовать встроенные стили CSS – если использовать другие, то некоторые почтовые клиенты могут неправильно их отобразить
• прописывать атрибуты у всех элементов верстки – это нужно, чтобы почтовые службы не подставили свои значения, разрушив запланированную структуру письма
• задавать ширину письма – тогда на всех устройствах письмо будет помещаться в ширину экрана

Верстка интерактивных элементов

HTML-верстка email-писем позволяет добавить в рассылку интерактивные элементы с помощью AMP-технологии – блоки, с которыми пользователь может взаимодействовать. Например: сыграть в игру, полистать фото товара или оформить заказ.

АМР-технология создавалась для ускорения загрузки мобильных страниц. Позже программисты поняли: если ее использовать в почте, то читатели смогут взаимодействовать с контентом письма. Так в email-рассылках появились интерактивные блоки с мобильной веб-страницей.

Основные плюсы технологии:

• Интерактивность – увеличивает конверсию в заказ или заявку благодаря возможности совершать действия прямо внутри письма.
• Актуальность – содержимое АМР-блока можно редактировать даже после отправки, что позволяет исправлять ошибки или обновлять информацию.
• Геймификация – повышает вовлечение в рассылку за счет тестов, опросов и мини-игр.

Но минус технологии в том, что не все почтовые клиенты ее поддерживают. В России AMP-письма распознают только Gmail и Mail.ru. Для всех остальных почтовиков нужно верстать обычное письмо.

Пример геймификации в письме с помощью АМР-блока

Итак, подведем итог про особенности работы в HTML-редакторе.

Плюсы верстки в HTML-редакторе

Можно делать сложный и красивый дизайн, которого не будет ни у кого другого, добавить форму заказа, игру, опрос, тест и прочие интерактивные элементы. Также с помощью HTML-верстки создаются важные для email-маркетинга письма – подборки с контентом, который создается автоматически с учетом поведения подписчика.

Минусы верстки в HTML-редакторе

Нужен программист для написания кода. Если создавать письмо самостоятельно, то его нужно постоянно тестировать, так как первое время будут появляться ошибки – где-то текст сместится с кнопки, где-то появится код вместо элемента верстки.

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

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

Есть три основных способа проверить верстку письма для рассылки: предпросмотр в сервисе, тестовая отправка и использование сервисов для проверки.

1. Предпросмотр в сервисе рассылки

В редакторе сервиса верстки и рассылки писем должна быть функция предпросмотра. В Sendsay она есть в двух вариантах: с десктопа и смартфона – можно сразу посмотреть, как письмо будет адаптироваться под разные экраны.

2. Тестовая рассылка

В этом случае email-маркетолог отправляет письмо на свои почтовые ящики, а затем смотрит корректность верстки с разных почтовых клиентов и устройств.

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

3. Специальные сервисы проверки email-верстки

Самый эффективный вариант проверки – использовать специальные сервисы, например, Litmus и Email on Acid. Они позволяют посмотреть, как будет выглядеть письмо в разных почтовиках, браузерах и устройствах.

Если вы уже пользуетесь Email on Acid, его можно интегрировать в Sendsay. Тогда прямо в интерфейсе редактора будет доступен предпросмотр в разных клиентах, браузерах и устройствах – можно сразу увидеть ошибки в верстке и исправить их.

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

На что обращать внимание при верстке писем

Тщательно прорабатывать макет

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

Также на сложность верстки письма для рассылки влияет количество иконок и текстовых блоков разной величины. Если дизайн рассылки требует нестандартных форматов – вынесите их на баннеры: вместо того, чтобы верстать в письме 5 иконок и подписей к ним, пусть дизайнер нарисует их на картинке.

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

Использовать только безопасные шрифты

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

Есть шрифты, которые распознаются всеми клиентами – их можно использовать в письмах, не беспокоясь за корректное отображение. Список ниже ��

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

Проверять корректность персонализации

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

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

• вариант 1 – у получателя указано имя и письмо отправляется в изначальном виде
• вариант 2 – у получателя не указано имя, поэтому ему отправляется письмо без личного обращения
• вариант 3 – у получателя не указано имя, поэтому ему отправляется письмо, в котором вообще нет блока с этим текстом

Следить за весом письма

У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше 100 Кб. Если его превысить, то письмо может некорректно отображаться или не отправиться вовсе.

Памятка по верстке писем

1. Используйте блочный редактор, если не умеете программировать и нет возможности нанять верстальщика. Любой email-маркетолог разберется, как им пользоваться, и сможет быстро создавать рассылки.
2. HTML-редактор нужен для создания сложных писем с динамическим контентом: персональные подборки, игры, тесты и опросы. Также он необходим для нестандартного дизайна, который выходит за рамки возможностей блочного редактора.
3. Верстка писем обязательно должна быть адаптивной, чтобы письмо подстраивалось под размеры экранов десктопа и смартфона.
4. Перед отправкой нужно проверить верстку письма с помощью функции предпросмотра, тестовой рассылки на почтовые ящики разных клиентов или специальных сервисах.
5. Верстая письмо, нужно следить за его весом и корректной работой персонализации, также лучше использовать универсальные шрифты, теги и атрибуты кода.
6. Не создавайте слишком сложные макетыдля писем – их будет сложно реализовать, а еще это увеличит шансы, что верстка «разъедется» на смартфоне.

В заключение рекомендуем посмотреть и другие наши гайды по рассылкам:

• Гайд по контенту для писем: пишем текст, правильно его оформляем и придумываем тему
• Гайд по статистике рассылок: как ее собирать, анализировать и использовать для улучшения email-маркетинга
• Гайд по работе с базой email-рассылок: как ее собирать, сегментировать, привлекать и актуализировать

Кроме того, мы делимся полезной информацией в сфере digital-маркетинга в нашем телеграм-канале, при подписке на который дарим книгу «Email-маркетинг для бизнеса». Подробнее о том, как ее получить, рассказали в закрепленном сообщении канала.

Подключайте Sendsay, чтобы сделать ваш email-маркетинг мощнее ��

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

В предыдущей статье мы писали о визуальном стиле рассылок и давали рекомендации для дизайнеров. Если дизайн письма готов, то теперь нужно подготовить его к вёрстке.

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

Проблемы, с которыми может столкнуться верстальщик

• Письма плохо отображаются в разных почтовиках.
• Письма неадаптивны и плохо отображаются на мобильных устройствах.
• С письмом трудно взаимодействовать и неудобно читать.
• Письмо не увлекает, не вовлекает.
• Некоторые блоки письма не отобразились, часть письма исчезла.
• Письмо в почте выглядит не так, как было свёрстано и нарисовано в макете.
• Письмо скучное. В отличие от веба, его труднее сделать динамичным, привлекательным, нужно знать инструменты и уметь их применять.
• Не получается сверстать то, что задумали.
• Непонятно, как сделать интерактив в письме.
• Письмо разваливается на десктопных почтовиках вроде Outlook.
• Письма попадают в спам (такое может быть из-за вёрстки и ссылок).
• Письма долго грузятся.

Структура и код

Чтобы ваши письма корректно отображались в большинстве почтовиков, устройств, а сервисы рассылок не сломали их — следуйте советам по HTML и CSS кода.

Обратите внимание на DOCTYPE. Для писем самым безопасным доктайпом является:

Используйте табличный подход к вёрстке. Иначе письма будут плестись в хвосте в плане технологии вёрстки.

Избегайте сокращений CSS.

● Вместо сокращённого правила для стиля — несколько CSS-стилей. Например, вместо

padding: 5px 5px 5px 5px
padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px

● Не задавайте цвет, используя краткие формулировки вроде RED или #FFF. Всегда используйте полное шестнадцатеричное представление, например, #bb0000.

● Не используйте сокращённые варианты записи шрифта, характерные для CSS (то есть «font: 12px arial;»). Семейство шрифта, размер, цвет и высота строки должны задаваться по отдельности.

Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.

Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER у table (кроме «0»), так как не все почтовые клиенты корректно интерпретируют другие значения.

Не задавайте line-height в em или процентах. Используйте только пиксели, тогда во всех почтовиках и устройствах письма будут выглядеть так, как вы задумали.

Оформление текста производите сразу двумя тегами — FONT и SPAN. Для родительской ячейки указать LINE-HEIGHT (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook игнорирует параметр LINE-HEIGHT, указанный у ячейки, поэтому следует указать его также и у SPAN.

Используйте тег для вставки разрывов между блоками текста вручную. Однако будьте предельно осторожны, некоторые почтовые клиенты (например, Outlook 2007 и клиент iPhone) отображают размер межстрочных промежутков и шрифтов крупнее, чем принято, — и могут перенести текст на новую строку раньше запланированного вами разрыва.

Будьте внимательны при использовании CSS3. Здесь нет чётких правил. Какие-то стили поддерживаются полностью, какие-то частично. Всё зависит от того, какими почтовиками и устройствами пользуются ваши подписчики. Если используете CSS3 в вёрстке писем — тщательно тестируйте. Поддержка тех или иных стилей почтовиками и устройствами постоянно меняется, ориентируйтесь на инструкции в интернете.

Используйте текст предварительного заголовка. Почти все веб-интерфейсы выводят рядом с темой письма прехедер. Примерная структура:

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