Меню
Switch to English

Урок 2. Особенности вёрстки писем

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

Уверены, вы хоть раз получали рассылку от бренда [иначе что мы тут вообще с вами делаем? 🙂 ]. Вспомните, что первое мы видим? Тему и прехедер:

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

Классная тема? Клик — и письмо открыто. Вот тут уже начинается структура:

Вверху — хедер (шапка). В нём обычно размещают логотип бренда или меню сайта. Хедер не меняется от письма к письму [чтобы сохранить идентичность рассылок], поэтому должен быть постоянный и узнаваемый:

Дальше — главный баннер. Обычно он выглядит как картинка с текстом и кнопкой. Почти всегда — привлекающие внимание иллюстрация и заголовок, в который вынесен главный оффер. Всё потому, что у нас есть буквально секунда, чтобы «зацепить» читателя: 

Комплект хедер + баннер можно назвать «первым экраном» рассылки, так как это первое, что видит подписчик при открытии. Особенно, в мобильной версии, в которой все остальные блоки переезжают вниз.

Дальше — тело письма. Состоит обычно из блоков [заголовки, текст, преимущества, товары и т. д.]. В зависимости от типа рассылки и задумки дизайнера, наполнение будет разное.

Внизу — футер [подвал]. В нём размещают важную информацию: ссылки на соцсети бренда, способы связи, дисклеймер, ссылку отписки, веб‑версию. 

Как и хедер, он обычно не меняется от письма к письму.

Здесь ещё стоит упомянуть, что без ссылки отписки отправлять письма нельзя [вот наша полезная статья на эту тему]. Веб‑версия же нужна, чтобы посмотреть имейл как веб‑страницу, если он отображается некорректно.

Движки и безопасность

Теперь давайте чуть подробнее поговорим о том, почему же одно и то же письмо может по‑разному выглядеть на разных устройствах. Вот пример, как это выглядит в mail.ru и в gmail.com:

Где‑то может не отобразиться шрифт, где‑то подчёркиваются ссылки — всё это зависит от движка почтового клиента. 

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

Почтовые клиенты: Microsoft Outlook, Thunderbird, Mailbird, TouchMail,The Bat!

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

Почтовые провайдеры: Mail.ru, Gmail, Rambler, Yandex, Outlook.


Бо́льшая часть клиентов и провайдеров работает на четырёх движках: 

  1. WebKit
  2. Blink
  3. Gecko
  4. EdgeHTML

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

Вот таблица, которая поможет разобраться в разнице движков:

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

Вырезаются обычно элементы JavaScript и некоторые CSS-свойства — например, свойство position, которое позволяет изменять позиционирование элементов и подменять элементы интерфейса своими кнопками.

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

Технические ограничения

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

Тег <style>

Есть тег <style>, который задаёт CSS-стили для HTML-документа — шрифты, цвета, расположение отдельных блоков.

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

Обычно медиа‑запросы и тег <style> не используются в вёрстке имейл‑писем. Но почему бы не применить возможности тех почтовиков, которые поддерживают медиа‑запросы? 

Важно уметь «причесать» письма с медиа‑запросами: в Яндексе, например, они не будут работать, а в других почтовиках таким образом можно добиться более крутого отображения письма.  

Сокращённая форма стилей

Верстальщики стремятся сделать код компактным и привести его в «чистый» вид. Ниже посмотрите, как может выглядеть один и тот же код.

Чтобы прийти к «чистоте», не нужно вызывать Мойдодыра. Для этого в арсенале верстальщиков есть несколько полезных фишек, в том числе сокращённые CSS-стили. Используя их, можно писать более сжатые таблицы, экономя время и силы. Вот только к письмам это не относится. 

Так как не все почтовые клиенты поддерживают тег <style>, все стили нужно инлайнить — прописывать их в атрибуте в полной форме. Сравните два варианта:

Нам нужен второй. Кстати, для инлайна стилей и «перевода» сокращённой формы в полную можно использовать уже знакомые вам инлайнеры.

Шрифты

В тексте почтовых рассылок можно использовать только стандартные веб‑сейф шрифты. Нестандартные шрифты можно было бы использовать через правило @font-face, но оно работает только в iOS, Google Mail и Android 4 [Gmail]. 

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

font-family: Arial, Helvetica, sans-serif;

font-family: Arial Black, Gadget, sans-serif;

font-family: Georgia, serif;

font-family: MS Sans Serif, Geneva, sans-serif;

font-family: MS Serif, New York, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: Times New Roman, Times, serif;

font-family: Trebuchet MS, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif;

Если подключаются другие шрифты, нужно помнить, что это будет работать только в тех почтовиках, где поддерживается тег <style>.

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

Однако так делать нежелательно: блоки, свёрстанные картинками, не будут адаптироваться под мобильную версию — они просто уменьшаются по ширине экрана смартфона. Подробнее об этом расскажем в следующих уроках 🙂 

Размер HTML-кода

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

Чтобы письма не обрезались, нужно сокращать их код до 100 кб. Для этого можно использовать минификатор кода — он сжимает его в одну строку и убирает все лишние символы. Так можно сэкономить около 20% килобайт.

Изображения

Чтобы все изображения в письме отображались корректно, в нём можно использовать только три их формата — jpg, gif и png. Первый — обычный — для фотографий или когда у изображения нет прозрачного фона. А второй — если нужен элемент с прозрачным фоном или если это простая графика с небольшим набором цветных элементов. Если хотите, чтобы изображения в письме отображались корректно, другие форматы использовать не стоит. 

Технических ограничений по весу изображений в письмах нет. Картинки не грузятся непосредственно в письмо, а лежат на сервере, поэтому их объём для нас не особо критичен. Но при мобильном интернете «тяжёлые» картинки будут долго открываться. Чтобы не заставлять клиентов ждать, есть неписаное правило: картинки для баннера  должны весить не больше 150 килобайт, а все остальные — не больше 50.

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

К изображениям мы ещё вернёмся — подробнее расскажем в одном из следующих уроков.

JavaScript

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

Почтовые клиенты не дают верстальщикам использовать JavaScript. Но есть туз в рукаве — технология AMP [Accelerated Mobile Pages — ускоренные мобильные страницы, англ.], которая помогает внедрить в письма интерактивные элементы. Бытует мнение, что за AMP-письмами — будущее, ведь эта технология делает письма функциональными почти наравне с сайтами.

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

Но работает AMP пока не везде: Gmail, Mail.Ru, Yahoo! Mail технологию уже освоили, а вот Яндекс ещё нет, и в его почтовых сервисах AMP-функционал отображаться не будет. Из‑за этого сейчас обычно делаются две версии письма — одна с AMP-функционалом, другая, почти такая же, без него.

Опросы

В письмах иногда бывают опросы, а в них — чек‑боксы, галочки, поля для ввода и многие другие детали, которые не поддерживаются в вёрстке. Как их сделать?

Первый способ — это NPS-опрос. Это опрос с одним закрытым вопросом в стиле «Оцените нашу работу от 1 до 10». В его результатах создатели видят: подписчик оценил их работу на столько‑то баллов.

Второй способ подходит, если мы задаём клиентам открытые вопросы или хотим задать сразу несколько закрытых вопросов. На кнопку в рассылке вешается ссылка на опрос на сайте. Пользователь нажимает на кнопку, переходит на сайт и заполняет опрос там. Его можно создать, например, в Google Forms.

А третий вариант — нечто среднее между первыми двумя. Мы вставляем в письмо вопрос, любой ответ на который перекинет пользователя на сайт. Например, вопрос для зоомагазина «Какой у вас питомец?» с вариантами «рыбки», «собака», «хомяк» и «кошка». По клику пользователь переходит на сайт, где ответ на первый вопрос уже дан, но есть ещё несколько неотвеченных.

Добавление в календарь

Хотите, чтобы подписчик добавил в свой календарь событие из рассылки? Вот как это работает: 

  1. Подписчик получает рассылку с анонсом события.
  2. Нажимает на кнопку [или ссылку] «Добавить в календарь».
  3. Календарь автоматически открывается и предлагает добавить событие.

Чтобы всё получилось, нужно сделать календарь публичным, открыть доступ на событие для всех, скопировать ссылку и отправить её пользователям. Это работает со всеми популярными типами календарей: Google, Яндекс, Yahoo!, Mail.ru, Outlook или iOS. А вот в этой статье есть подробная инструкция, как это сделать. 

Счётчики обратного отсчёта

Таймер обратного отсчёта — классный инструмент, чтобы напомнить клиенту о том, что время тик‑так и нужно поторопиться:

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

Можно вставить и GIF, но получится криво. Лучше скриптом — либо собственным, если есть такая возможность, либо использовать сервисы. Например, Sendtric или MotionMail.

Итак, теперь вы знаете основы HTML-вёрстки и нюансы технических ограничений, понимаете, чем отличается вёрстка письма от вёрстки сайтов. Переходим к самому интересному — в третьем уроке будем «препарировать» письмо 🙂 

Квиз

  1. Выберите правильный порядок структуры письма:

— Футер — Главный баннер — Тело письма — Хедер

— Главный баннер — Тело письма — Футер — Хедер

— Хедер — Главный баннер — Тело письма — Футер

— Тело письма — Хедер — Главный баннер — Футер

  1. Почтовый клиент — это…

— Outlook, Gmail, Mail.ru, Mailbird

— Microsoft Outlook, Thunderbird, Mailbird, TouchMail

— Mail.ru, Gmail, Rambler, Yandex, Outlook

— Rambler, TouchMail, Mailbird, Gmail, Yandex, Mail.ru

  1. Какой тег поддерживают не все почтовые клиенты?

— <head>

— <style>

— <valign>

— <body>

  1. Каким образом можно сжать код, чтобы письмо не обрезалось в Gmail?

— Использовать сокращённые формы стилей

— Использовать минификатор

— Использовать инлайнер

— Использовать AMP

  1. Сколько должны весить изображения для главного баннера?

— Не больше 50 килобайт

— Не больше 200 килобайт

— Не больше 150 килобайт

— Не меньше 1 мегабайта

Домашнее задание

В вёрстке важна насмотренность, поэтому сегодня — задание на внимательность. Помните, как в прошлом уроке вы составляли свою первую HTML-таблицу? Наши верстальщики немного «поигрались» результат и вот что из этого получилось: 

<table border=»1″ cellpadding=»20″ cellspacing=»5″>

    <tr>

        <td colspan=»4″ align=»right»>

        <b>План работ</b>

        </td>

    </tr>

    <tr>

        <td align=»right»>

        Март

        </td>

        <td width=»300″ height=»300″ valign=»bottom»>

        21.03.22 – 31.03.22

        </td>

        <td align=»right» valign=»top»>

        Аккаунт‑директор

        </td>

        <td colspan=»2″ align=»right» valign=»bottom»>

        Анализ конкурентов

        </td>

    </tr>

    <tr>

        <td align=»left» align=»center» width=»90″>

        Апрель

        </td>

        <td bgcolor=»#e433553″ align=»right»>

        01.04.22

        </td>

        <td>

        Менеджер проекта

        </td>

        <td bgcolor=»#e433553″ align=»left»>

        Документы

        </td>

        <td bgcolor=»#545433″ align=»right» width=»10″>

        Старт работ

        </td>

    </tr>

</table>

А сделать нужно вот что:

  1. Скопируйте этот HTML-код в редактор кода.
  2. Найдите ошибки в коде и приведите его к «чистоте».
  3. Сохраните полученный код файлом и откройте его с помощью браузера — так вы увидите результат своей работы. Убедитесь, что таблица получилась такой же, как в задании первого урока.
  4. Прикрепите скриншот и файл с кодом в комментарии к заданию.

Советуем почитать