Email-рассылки — это малая форма веб-дизайна. Кто-то скажет, что они ограничивают истинного творца, но нам ближе мысль, что вёрстка писем помогает творцу раскрыться. Есть правила, которые нужно учесть на этапе проектирования. Если дизайнер будет им следовать, рассылки будут крутыми по всем фронтам: открываться на всех устройствах, нравиться пользователям, повышать конверсии и приносить больше денег бизнесу.
Наш дизайнер Виктория описала проблемы, с которыми сталкивается при вёрстке писем, и рассказала, как их решить.
Гифки
Не все рассыльщики пропускают письма, если гифки в них весят более 5 мегабайтов. Даже если рассылка попадёт во «Входящие», она будет долго прогружаться. Подписчики не будут ждать, пока письмо откроется, даже если его прислал любимый бренд.
Решение
Придётся потратить время на сжатие гифки. Я настраиваю Adobe Media Encoder так, чтобы он выдал гифку нужного мне размера, или создаю GIF из видео в программе Gifski — в ней удобно регулировать параметры.
Однажды клиент скинул часовое видео и попросил вырезать некоторые моменты гифками. Хотя сделать из видео гиф несложно, мы выполнили задачу иначе. Дело в целесообразности. GIF и видео преследуют разные цели. Так, ни одна гифка не заменит видео, но может сработать как превью для перехода в Youtube-канал.
Шрифты
В вёрстке писем 10 стандартных шрифтов: Arial, Helvetica, Times New Roman, Verdana, Courier, Tahoma, Georgia, Palatino, Trebuchet MS, Geneva. Если у пользователя в компьютере не установлены дизайнерские шрифты, почтовый клиент автоматически заменит их на стандартные. Например, iCloud Mail использует Helvetica в качестве дефолтного, Gmail применяет Arial, а Outlook 2007/2010/2013 использует Times New Roman как запасной.
В моём компьютере установлено много шрифтов, и я часто вижу их, например, Gilroy, в письмах других дизайнеров. Но, когда читаю сообщения с мобильного телефона, шрифт в них заменяется на Arial. Письма выглядят иначе, их магия исчезает. Сразу видно, что дизайнер не проверил, как рассылка будет смотреться с Arial, и письмо отобразилось некорректно.
Будьте готовы, что почтовики заменят ваш необычный шрифт стандартным. Из статьи Campaign Monitor узнаете, каким именно.
Решение
Усмирите в себе дизайнера и используйте стандартные шрифты.
Верстайте текст картинками. Но лучше так не делать, потому что см. следующий пункт.
Например, ребята из Bang Bang Education прекрасно справляются с задачей, используя только Arial и Helvetica.
Вёрстка картинками
Один из способов сделать письмо самобытным и классным, — это вёрстка картинками. К сожалению, в таком случае текст не будет масштабироваться под экран смартфона, как HTML-письмо. К тому же спам-фильтры плохо реагируют на рассылки, состоящие только из картинок. Будет обидно, если ваше безумно красивое письмо, на дизайн которого вы потратили 100 500 часов, не дойдёт до получателя.
Решение
Сверстайте картинкой только часть письма. Например, баннер.
Сжатые изображения
Во входящих я часто вижу рассылки с зашакаленными мутными или сжатыми изображениями. Это происходит, если для рассылки шириной 600 пикселей использовать картинки размером в 600 пикселей. В современных смартфонах отличные экраны — можно брать изображения с бóльшим количеством пикселей. В целом письмо хорошее, но изображение книги получилось мутным
Решение
Выкачивайте картинки в размере х2 из программы, в которой работаете.
Приятные адаптивы
9 из 10 пользователей используют смартфон для выхода в интернет. Потому макет писем нужно изначально проектировать так, чтобы из десктопной версии было легко сделать мобильную. Шапку и подвал рассылок не стоит перегружать информацией, потому что вы отправляете письмо, а не лендинг в почтовом клиенте.
Решение
Верстайте рассылки сразу для мобильных устройств. Например, в Stripo видно, как письмо будет отображаться в десктопной и мобильной версиях.
Помните о золотом правиле email-маркетинга: одно письмо — одно действие.
Мегаприятный адаптив от Airbnb с хорошим подвалом
Тёмная тема
По статистике Android Authority, 81,9% андроидолюбов предпочитают в смартфонах тёмную тему. 82,7% пользователей Mac используют тёмный режим операционной системы. Эти данные — не истина в последней инстанции: в упомянутых опросах участвовали 2514 и 201 человек соответственно. Суть в том, что тёмную тему нужно учесть при подготовке рассылок.
Проблемы возникают, когда письмо создаётся в HTML-вёрстке и в нём есть дизайнерские элементы. При переключении на тёмную тему шрифты могут измениться, цвета инвертироваться — получится совсем не то, что вы хотели.
Делайте простые рассылки с минимумом графики. Тогда они будут хорошо отображаться на всех устройствах.
Если у вас тёмный логотип, добавьте светлую размытую обводку.
Используйте картинки в формате .png без фона.
Что в итоге?
Дизайн email-рассылок — это поле для креатива, но с головной болью. С одной стороны, почтовики ограничивают дизайнера: нельзя использовать тяжёлые гифки, картинки могут сжаться, блоки — поехать, а тёмная тема — испортить вообще всё. Но с другой, ограничения позволяют мыслить шире и находить интересные решения.
Не бойтесь экспериментировать. Но перед отправкой ВСЕГДА проверяйте вёрстку, чтобы потом не грустить из-за впустую потраченных часов. А если закончится вдохновение или захотите встряхнуть рассылки крутым дизайном, напишите нам.