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

Наверное вы не раз сталкивались с такой неприятной ситуацией: вложили много сил в дизайн и верстку письма для 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 пикселей.

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

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

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

border="1″ — регулирует начертание рамки;

cellpadding="0″ — интервал между границей рамки и основным контентом;

cellspacing="0″ — регулирует расстояние между ячейками.

Атрибуты для стилей в таблицах:

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

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

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

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

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

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

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

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

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

src="#" — адрес картинки;

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

border="2″ — толщина обводки;

width="65″ — размер картинки для email рассылки по горизонтали;

height="40″ —размер картинок для email рассылок по вертикали.

Атрибуты для стилей в изображениях:

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

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

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

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

Шрифт Helvetica

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

Шрифт Arial

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

Шрифт Georgia

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

Шрифт Verdana

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

Шрифт Times New Roman

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

Шрифт Tahoma

Шрифт без засечек, созданный в 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 в первую очередь верстают под смартфоны, а во вторую — под стационарные устройства.

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

● Pre-Header

● Letter Headings

● Body

● Footer

Индивидуальная верстка 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 для рассылки. С правильно отображаемым письмом подсчет и аналитика конверсий станут намного более приятным делом!