Арина Оголь

Email-маркетолог

Советы по HTML-верстке в email: что правильно и неправильно использовать

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

Как верстать письмо. Базовые приемы

В статье мы расскажем про обязательные для создания шаблона приемы и те, которых стоит избегать. Рассмотрим на примерах кода в редакторе eSputnik:

Делать: Табличную верстку

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

Tables for HTML

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

Делать: Одноколоночный шаблон

Самый простой макет для реализации с помощью CSS – это Single column layout (макет в один столбец). Блоки письма будут располагаться последовательно друг под другом.

Одноколоночный шаблон

В настоящее время многие используют этот вид макета, так как он отлично смотрится на любых устройствах и экранах, особенно на мобильных. Кроме того, он облегчает чтение даже очень длинного письма и позволяет делать верстку более гибкой. Например, добавив стиль mso-hide:all; можно скрыть отдельный элемент для ПК:

Скрытие отдельных блоков в письме

Делать: Стили прямо в коде, а не в отдельных блоках

Поддержка стилей в < head > существует, но есть почтовые клиенты, которые их не обрабатывают, так что лучше придерживаться inline CSS. Разница в том, что inline CSS – это стили, которые записываются в атрибут style для тегов, а встроенные – это отдельный тег в < head > письма.

Например, вот так inline CSS применяются к таблице:

Inline CSS

А вот так выглядят встроенные CSS:

Встроенный CSS

Делать: Медиазапросы

С помощью медиазапросов (media queries) можно создавать адаптивный макет. Они позволяют видеть с мобильных устройств дизайн email с измененными шрифтами, изображениями и фоном. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину письма, размеры изображений и текста, и т.д.

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

Медиазапросы

Лучше использовать такой подход когда возможен конфликт стилей.

Получить бесплатный шаблон

Делать: Оптимизацию под Retina-экраны

Сейчас все больше и больше людей используют устройства с дисплеями с высокой плотностью пикселей: iPhone, MacBook, iPad и т.д. Чтобы все изображения выглядели четкими на таких экранах, оптимизируйте картинки под них. Используйте изображения в два раза большего размера, чем нужно по макету.

Один из самых простых способов – подготовить исходное изображение в 2Х-размере и разделить их пополам уже в редакторе. Например, чтобы показать фотографию 200x300 px на экране с увеличенной плотностью пикселей, необходимо загрузить фото размером 400x600 px уменьшить его, используя CSS-атрибуты или HTML.

Last post

Делать: Абсолютные адреса

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

Абсолютные адреса

Если адрес не содержит имени сервера или протокола, то это относительный адрес:

Абсолютные и относительные адреса

Делать: Предзаголовок в дополнение к теме

Текст предварительного заголовка важен, потому что люди видят его перед тем, как открыть емейл. Но не нужно прописывать в коде текст прехедера. Лучше запишите его как комментарий HTML. Это предотвратит случайную отправку емейла с текстом-рыбой для предварительного заголовка. Например: “Написать текст предварительного заголовка здесь”.

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

Скрытый предзаголовок в редакторе

В открытом письме его видно не будет.

Делать: Правильную кодировку символов

Кодировщик символов помогает убедиться, что специальные символы не будут отображаться в виде квадратов, символов ромба с вопросительными знаками внутри или просто вопросами:

Неправильное отображение символов

Например, внеся в редакторе eSputnik в код такие символы

Кодировщик символов

вы получите пустой скрытый предзаголовок:

 

Скрытый предзаголовок

Делать: Адаптивность

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

В редакторе eSputnik можно играть с адаптивностью, чтобы письма одинаково хорошо смотрелись и на телефоне, и на ПК:

Адаптивность в редакторе

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

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

Делать: Комментарии в коде

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

Комментарий в коде

Делать: Тесты

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

Работая в редакторе eSputnik, вы всегда можете отправить тестовое сообщение, чтобы посмотреть, хорошо ли оно выглядит как на телефоне, так и на компьютере:

Тестирование письма

Если же вы только создали свой первый шаблон и хотите, чтобы его отображение было идеальным, воспользуйтесь специальными сервисами для тестирования отображения писем (Litmus, Email on Acid)

Не делать: Изображения с разными областями для клика

Одно изображение, которое ведет к разным URL-адресам (Image maps), не распознается многими почтовыми клиентами. Чтобы все было в порядке, нарежьте свои изображения на несколько отдельных картинок, и каждую свяжите с нужной веб-страницей.

Не делать: Дизайнерские шрифты

Причудливые шрифты не будут правильно отображаться во многих почтовых клиентах. Как правило, вы можете использовать стандартные шрифты. Но лучше определить резервный шрифт на случай, если выбранный вами не распознается почтовым клиентом (с этим могут помочь такие ресурсы, как: What The Font?, FontShop и т.д.).

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

Стандартные шрифты

Не делать: Heavy&Complex CSS/HTML

Советуем отложить JavaScript, Flash, HTML5 и CSS3 – расширенный код еще не сочетается с версткой емейл. Но если вы хотите работать со скриптами в коде, воспользуйтесь AMP-контентом в редакторе eSputnik.

Не забывайте и про вес письма. Размер вашего почтового шаблона не должен превышать 102 КБ. Это та точка, в которой Gmail может обрезать емейлы.

Пример обрезанного в Gmail письма

Заключение

Верстка электронного письма связана с определенными правилами и постоянным тестированием. Мы обрисовали в общих чертах самые распространенные запреты и требования к коду email в формате HTML.

В eSputnik есть все необходимое, чтобы создавать корректные емейл-рассылки:

  • Письма уже выполнены с табличной версткой,
  • Редактор позволяет минимизировать работу с кодом,
  • В редакторе поддерживается создание и отправка AMP-контента,
  • Простые настройки для адаптивности писем на мобильных устройствах.

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

4.8 из 5 на основе 74 оценок

Арина Оголь

Email-маркетолог

Email-маркетолог в команде eSputnik. Помогать клиентам и писать полезные статьи - моя главная задача.

Комментарии 2

Serg Bur 9 месяцев назад

Вы уверены, что хорошая идея запихивать в сообщение изображение и ужимать его с помощью кода? Вы тестировали такие сообщения в Outlook? Ему в общем-то плевать на все ухищрения и он покажет ровно ту картинку, какую вы ему задали. Почему бы и не делать фоновые картинки? Не хотите белый фон? Пропишите под картинкой цвет фона. Хотя в моем опыте это актуально только для того же Outlook'а. Вы пишете, что здорово использовать сокращатели ссылок. Но ведь спам-фильтры с вами не согласны. Что толку сокращать килобайты кода, если письмо имеет чуть больше шансов попасть в спам.

Арина Оголь 7 месяцев назад

Добрый день, Serg Bur! Уточните, пожалуйста, у Вас были какие-то проблемы с нашим редактором? Приведите, пожалуйста, конкретный пример (ссылку на письмо и в каком почтовом клиенте Вы его открывали)? При тестировании писем таких проблем не возникало. Хотим помочь Вам с решением данной проблемы. В статье же даются общие рекомендации, касаемо оптимизации изображений под Retina-экраны, если письмо создается самостоятельно. В нашем редакторе это автоматизировано и не требует вмешательства в html-код. В редакторе eSputnik есть возможность задать фоновый цвет, а так же кратинку всему письму, полосе, структуре, контейнеру. Но, обратите внимание, не все версии Outlook поддерживают фоновую кратинку, данный почтовик отображает картинку в фоне всего письма (все версии) и только некоторые версии (2003, 20011) на текущий момент поддерживают картинку в фоне полосы, структуры, контейнера. Поэтому мы всегда рекомендуем устанавливать альтернативный цвет под фоновым изображением. На счет сокращения ссылки, опять же, это наши общие рекомендации. Мы не рекомендуем использовать сокращатель ссылок, т.к. спам-фильтры улавливают подобные ссылки. В статье шла речь о сокращении пути к картинке, если письмо верстается на Вашей стороне. В нашем редакторе картинки пользователей хранятся на нашем сервере и поэтому редактировать данную ссылку у пользователя возможности нет. Сокращатель уместно использовать, например, для сокращения количества симоволов, что важно при SMS-рассылке или ссылки-приглашения в сообщество Viber, т.к. она не всегда может открываться корректно. В нашем редакторе все эти моменты учтены и Вы не столкнетесь с трудностями, если будете создавать письмо. Хорошего дня!