«Да, но». Чем дизайн писем отличается от веб-дизайна
Электронные письма сегодня выглядят как полноценные сайты или лендинги. С виду структура и правда похожа. На деле при создании письма дизайнер сталкивается со множеством «да, но». Использовать разные шрифты можно? Да, но… А анимацию? Да, но…
Дело в том, что у емейлов больше технических ограничений, чем у сайтов. Их ставят почтовые клиенты. Если при создании макета для рассылки не учитывать нюансы, то при вёрстке начнутся проблемы: поедут элементы, не отобразится текст. Как итог, крутая идея вылетит в трубу, подписчик не совершит целевое действие, а то и вовсе письмо попадёт в спам.
Разберём общие моменты в емейл-дизайне и детали, которые отличают работу с электронными письмами.
Почему с письмами столько нюансов
Главная причина ограничений — безопасность. Почтовые сервисы блокируют большинство программ, форматов и стилей, чтобы защитить пользователей от вирусов, фишинга и другого мошенничества.
При этом в отличие от браузеров, чьи технические требования примерно стандартизированы, у каждого почтовика свои условия. Поэтому нужен универсальный макет, который учтёт все правила. Иначе нельзя быть уверенным, что все получатели увидят письмо таким, каким оно задумывалось.
А если вы хотите отправить AMP-письмо, то потребуется два макета: интерактивный для почтовиков, которые поддерживают технологию (Gmail, Mail.ru, Yahoo), и статичный для остальных.
Кроме того, емейл-дизайн требует большей внимательности.
- На сайте просто обновить информацию, исправить ошибки. Внести изменение в дизайн или текст массовой рассылки после отправки уже не получится. Каждый макет должен быть сделан хорошо сразу.
Если, скажем, взять устаревший логотип или допустить помарку в футере сайта, то будет достаточно внести одну правку, и она отобразится на всех страницах. С письмами иначе: макет, вёрстку и настройки в платформе каждого автоматического сообщения придётся исправлять отдельно. В уже отправленные письма внести изменения невозможно. Лучше избегать таких ситуаций.
Особенности макета
Большинство сайтов сегодня создаются под блочную систему.
В емейлах же используется табличная вёрстка.
Письма можно назвать устаревшими сайтами, ведь когда-то сайты тоже верстали таблицами. Но с тех пор они ушли далеко вперёд, а почтовики в этом плане не развиваются.
Елена Сеченых
руководитель отдела разработки EMAILMATRIX
Макет письма основан на модульной сетке, в которой от 1 до 4 колонок. Больше — уже много: контент будет просто нечитабельным.
Ширина макета
Ширина контентной части сайта для десктопной версии обычно 1200–1400 px.
Для контентной части емейла стандарт — 600 px. Технически возможны и более широкие письма, но есть риск, что на десктопе отобразится мобильная версия. А при плохой или отсутствующей адаптации макет может вовсе не влезть, появятся полосы прокрутки, потому что окно просмотра в почтовиках зачастую чуть шире 600 пикселей.
Шрифты
В дизайне сайтов нет жёстких ограничений по выбору шрифтов. Можно использовать любую веб-гарнитуру: даже если её нет у пользователя, она подгрузится с сервера.
Почтовики, напомню, ничего со стороны не берут. Если дизайнер возьмёт «страшный» шрифт в тематике Хеллоуина, в письме он всё равно превратится в старый добрый Arial. Классная задумка не сработает.
Так что для емейлов лучше брать только стандартные универсальные шрифты:
- Arial
- Comic Sans M
- Courier New
- Georgia
- Impact
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
Что делать, если необходимо использовать нестандартную гарнитуру (к примеру, фирменный шрифт бренда)? Можно сверстать текст картинкой. Но осторожно: он может оказаться нечитабельным на смартфоне.
Поэтому такой способ обычно используют для заголовков. Это крупные короткие надписи, которые остаются понятными при масштабировании на мобильных.
Анимация и интерактивность
На сайтах используют JavaScript и CSS-анимацию. В письмах JavaScript неприменим из-за условий безопасности, а CSS — потому что сервисы не поддерживают нужные свойства. Так что только GIF, только хардкор.
Хотя и здесь есть нюанс. Версии Outlook 2019 года и старше вместо полноценной гифки покажут только первый кадр.
Хорошая новость в том, что некоторые почтовые сервисы со временем становятся чуть продвинутее — поддерживают интерактивные компоненты в рамках той самой AMP-технологии. С её помощью можно реализовать определённые задумки, но не все: подключить пользовательский JS всё же нельзя по тем же соображением безопасности.
Больше свободы и привычных приёмов есть в веб-письмах. По сути, это полноценный лендинг: хочешь — делай параллакс, хочешь — подключай библиотеки для анимации по скроллу. Но такие рассылки бренды заказывают реже, так как они сложнее в производстве и, соответственно, дороже. Подробнее о технических и маркетинговых возможностях интерактивных веб-версий читайте в нашей статье.
Мобильная адаптация
И сайты, и письма адаптируются под мобильные устройства. Для веб-дизайнера привычно использовать медиазапросы: задать правила для изменения макета в определённых условиях — например, уменьшить шрифт. Все современные браузеры поддерживают эту технологию.
Почтовые сервисы тоже её поддерживают. Но! Кроме Яндекса и частично Outlook и Yahoo. Есть риск, что их пользователь увидит некорректное письмо. Скажем, картинка, которая должна была скрыться, останется на месте и поломает весь макет.
Более подходящим решением будет использовать «резиновые» макеты с блочным перестроением элементов. В этой статье мы подробно разбираем 3 способа адаптации:
- масштабирование — элементы меняют размеры пропорционально ширине экрана;
- отсечение — элементы, которые не помещаются по ширине экрана, не отображаются;
- перестроение — элементы, которые не помещаются по ширине экрана, перестраиваются один под другой.
Графические элементы
У веб-дизайнера большой выбор в форматах изображений. Для сайта подойдут традиционные растровые и векторные форматы, плюс есть современные варианты вроде WebP и AVIF.
Для писем годятся только jpg, png, gif.
Хороший способ сделать так, чтобы изображения выглядели хорошо на любом устройстве: брать картинки в два раза больше конечного размера.
На фон под письмом ни у кого из сервисов особых ограничений нет: любой цвет, любой размер, любой паттерн. Хотя Outlook отобразит письмо некорректно, если в макете наложены друг на друга два и более фоновых изображения.
Тёмная тема
В вебе тёмная тема — вещь контролируемая. Можно сделать сайт с переключением светлой на тёмную, можно оставить светлую, даже если в браузере стоит тёмная.
Большинство почтовых сервисов тоже поддерживают тёмную тему: инвертируются цвета текста, фона и кнопок. В большинстве почтовиков управлять инверсией нельзя: они сами подстроят письмо по собственным правилам.
Проблема в том, что правила у сервисов разнятся. С одним и тем же письмом в разных сервисах может случиться несколько вещей:
- цвета инвертируются полностью — светлое станет тёмным и наоборот;
- цвета инвертируются частично — только отдельные элементы;
- ничего не произойдёт — письмо не реагирует на тёмную тему.
При этом алгоритмы инверсии тоже неодинаковые:
Если не предусмотреть адаптацию к тёмной теме, можно потерять некоторые элементы — от текста до кнопок.
Что можно сделать, чтобы не испортить письмо в тёмной теме:
- делать обводку у логотипа (если позволяет брендбук) и заголовка в цвет фона;
- сделать подложку для логотипа также в цвет фона в светлой теме;
- продумать отображение карточек товаров в тёмной и светлой теме: например, вырезать фон или сделать рамку.
Более подробные рекомендации по адаптации писем к тёмной теме можете найти в статье о подготовке макета к вёрстке.
Перед отправкой важно провести тест. Вот варианты:
- проверить с помощью сервиса — мы используем Email on Acid;
- проверить вручную, отправив письмо себе;
использовать специальный плагин в Figma.
Что ещё не сработает в письмах
Есть и другие отличительные моменты емейла, связанные с дизайном.
В письме обязательно должен быть текст
Если столько нюансов с элементами, не проще ли сделать сплошную картинку? Нет. Почтовики могут воспринимать такие письма как потенциально опасные и отправлять в спам.
А Outlook и некоторые другие сервисы по умолчанию блокируют картинки, то есть получатель не увидит вообще ничего. Поэтому текст в письме должен быть непременно.
Нельзя поворачивать блоки с текстами
На сайте можно наклонять текстовые блоки под произвольными углами. В письме такое можно реализовать только картинкой, но такой текст не будет доступен для копирования. Это ухудшает пользовательский опыт — особенно для промокодов вида 12XZG14H9.
Запомнить
По сравнению с сайтами емейлы имеют много ограничений. Прежде чем браться за реализацию гениальной идеи, проверьте:
- как можно воплотить креативный замысел в условиях статичного макета без оригинальной анимации и супершрифтов;
- как можно адаптировать идею к требованиям разных почтовиков;
- какими сервисами пользуются ваши подписчики: если у большинства Gmail и Mail.ru, то для интерактива подойдёт AMP-письмо, в противном случае разместите его в веб-версии.
И не забывайте, что даже при таких ограничениях в рассылках можно реализовать много классных идей. За примерами далеко ходить не надо.
Над материалом работала Ирина Пожидаева
