Вёрстка email-рассылки: 6 лайфхаков от дизайнера

Далеко не все дизайнеры готовы заниматься вёрсткой email-рассылок. Якобы письма загоняют творчество в жёсткие рамки. Мы считаем иначе: веб-дизайн писем помогает истинному творцу раскрыться. Как и в других сферах, в email есть правила. Если чётко им следовать, рассылки будут круто выглядеть на всех устройствах и почтовиках и приносить бизнесу доход.

Дизайнер агентства СХЕМА Виктория поделилась лайфхаками, как уживаться с требованиями почтовиков и верстать классные письма даже для Outlook.

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

Сжать гифки. Я задаю настройки в Adobe Media Encoder, чтобы получить GIF нужного мне размера. Как вариант — в программе Gifski создаю гифки из видео, в ней удобно регулировать параметры изображений.

Случай из практики: клиент прислал видео длиной в час и попросил вырезать пару моментов гифками. Это несложно, но задачу мы выполнили иначе. Дело в том, что видео и гиф имеют разные цели. Анимация не заменит видео, но в письмах отлично работает как превью.

Есть всего 10 шрифтов, которые можно свободно использовать при вёрстке писем: Times New Roman, Tahoma, Geneva, Arial, Verdana, Courier, Georgia, Palatino, Helvetica и Trebuchet MS. Конечно, вы можете брать и любые другие. Увы, если в компьютере пользователя не установлены дизайнерские шрифты, почтовый клиент автоматически заменит их стандартными. Например, Gmail использует Arial, iCloud Mail — Helvetica, а Outlook 2007/2010/2013 любит Times New Roman.

Я пользуюсь разными шрифтами и часто вижу их в рассылках других дизайнеров. Но стоит открыть письмо с телефона — и магия исчезает. Грустно видеть, как дизайнерский Gilroy заменяется условным Arial. Сразу видно, что специалист не проверил, будет ли рассылка открываться корректно.

В статье Campaign Monitor можно посмотреть, как почтовики заменяют нестандартные шрифты.

• Смириться и использовать стандартные шрифты.

Например, дизайнеры Bang Bang Education используют только Arial и Helvetica. Смотрится отлично:

• Верстать текст картинками. Но это не лучшее решение. Объяснение в следующем пункте.

Такой способ позволит сделать рассылку самобытной и классной. Но есть проблема — текст не будет масштабироваться под экран смартфона, как HTML-версия. Плюс спам-фильтры стараются не пропускать письма, свёрстанные только картинками. Будет неприятно, если сообщение, которое вы верстали несколько часов, не попадёт во «Входящие».

Сверстать картинками только часть рассылки, например, баннер.

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

Выкачивать картинки в размере х2 из сервиса, в котором вы работаете.

По статистике, 9 из 10 пользователей выходят в интернет со смартфона. Более 50% проверяют почту не с компьютера. Значит, макет для рассылок нужно составлять так, чтобы из десктопной версии было просто сделать мобильную.

Чтобы не сломать адаптив, не перегружайте шапку и подвал информацией. У вас ведь письмо, а не лендинг :)

Что делать?

• Верстать сразу для мобильных устройств. К примеру, в сервисе Stripo можно посмотреть, как сообщение будет отображаться в обычной и мобильной версиях.
• Помнить про золотое правило email-маркетинга: одна рассылка — одно действие.

Вы используете тёмную тему? По данным Android Authority, её ставят 81,9% пользователей Android. 82,7% ценителей Mac тоже предпочитают тёмный режим операционки. Хотя статистика довольно условна (в опросах приняли участие 2514 и 201 человек соответственно), тёмную тему не стоит игнорировать.

Но подружиться с ней сложно. Если вы создаёте рассылки в HTML-вёрстке и они содержат дизайнерские элементы, при переключении на тёмную тему всё может сломаться. Шрифты могут измениться, цвета — инвертироваться. Больше о том, как мы пытались сработаться с dark mode, рассказали в статье на RusBase «Переход на тёмную сторону: делаем ночную тему для email-рассылок».

• Создавать простые письма, в которых будет минимум графики. Они будут нормально отображаться во всех устройствах.
• Использовать изображения без фона в формате .png.
• Для тёмных логотипов добавить светлую размытую обводку.

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

Не бойтесь экспериментов. Но прежде чем отправить письмо, ВСЕГДА проверяйте вёрстку. А если закончится вдохновение или решите, что пора улучшить рассылки, напишите нам. Поможем.