Обратная сторона разработки электронных писем
Всем привет, меня зовут Никита Грудин, я продуктовый дизайнер. Недавно прочитал статью о том, что дизайнеру надо учесть при оформлении рассылки, и меня она взбесила тупостью советов и унылыми кейсами от «профессионалов».
Хочу поделиться с вами опытом разработки email-рассылок для сложной компании, в ходе которого я понял:
- Мелкие компании не парятся и делают письма по шаблону, поэтому они выглядят так убого и маркетинг не работает.
- Из-за медленного и неравномерного развития разработка email-писем часто очень тупой и нервный процесс.
- Большинство писем включают в себя текст, ссылки и картинки с очень простой сеткой и композицией, и никто не заморачивается делать более сложные вещи.
UX писем и влажные мечты
Ко мне обратился клиент, который заказывал у меня презентацию, с просьбой «как-нибудь подумать о новом дизайне писем в рассылке». Когда я попросил его скинуть то, прям офигел. Даже показывать не хочу, как они выглядели на мобиле, чтобы поберечь ваши глаза.
Заказ был на три письма:
- Рассылка с изменениями цен на топливных базисах.
- Обновление цен на избранные виды топлива, которые пользователь добавляет себе на сайте в закладки.
- Коммерческое письмо с уже рассчитанной доставкой до пункта назначения.
Короче, задачу приняли, утвердили бюджет и начали работу. Так как я вообще не представлял, что из себя представляет разработка HTML-писем (тем более для сложных данных и графиков), то первым делом скачал сетку для писем для десктопа и мобилы и пошёл искать рефы и накидывать первый вариант.
В первом письме был просто список видов топлива.
Во втором письме я придумал идею, что график будет динамический и можно будет нажимать на ползунок, чтобы смотреть цену на топливо в определённый момент времени.
И в третьем письме было стандартное коммерческое предложение с понятной структурой и разными цифрами.
После правок и мелких изменений мы утвердили дизайн, и я радостно выдохнул, потому что не знал, что верстать HTML-письма — это боль.
Особенности национальной вёрстки
Я начал подготовку макетов к вёрстке, параллельно почитывая правила, которые нужно учитывать при вёрстке писем. И тут мои влажные мечты начали испаряться от температуры кипения моей жопы, потому что оказывается:
- Кроме картинок и ссылок ты не сможешь вставить больше ничего. Никакие динамические графики, анимации или интерактивные элементы невозможно сделать в письме. Даже ховер у кнопки.
- Каждый почтовый клиент, почтовый сервис и приложение по-разному отобразят ваше письмо, поэтому если в Gmail всё будет хорошо, то условная «Почта Windows» искорёжит письмо, как если в Word вставить картинку в документ.
- Верстать письма нужно табличной вёрсткой (уж простите за тавтологию) тегами tr и td. Есть даже список совместимых тегов, при использовании которых письмо будет работать даже на MS-DOS.
- Встроенные стили CSS. Однако есть важный момент — нужно использовать определённые (где-то ошибся, и вся твоя вёрстка пойдёт по .PSD).
Это краткие требования, без углубления в технический язык. Не хочу вас грузить, потому что тот, кому это интересно, потом почитает источники внизу статьи.
А теперь поговорим о самых адских моментах при разработке.
Медиазапросы. Если вкратце, то они нужны для корректной адаптации письма под мобильники, чтобы контент сворачивался и при этом адекватно отображался. Они помогают замещать картинки с десктопных на мобильные, если речь идёт о моих графиках.
Правда, есть одно но:
Многие почтовые клиенты просто не поддерживают их. Более того, каждый почтовый сервис обладает своим набором фич, которые обеспечивают корректное отображение письма.
Во время разработки я составил список сервисов от самого продвинутого и современного до самого убогого и корявого, на который жалуются все верстальщики:
- Mail.ru — безусловный лидер в мире российских почтовых клиентов. С ним никогда не возникало проблем, и всегда всё корректно отображалось.
- Safari — говорю сейчас о встроенном почтовом приложении «Почта». С ним особых проблем не возникало, разве что контент иногда съезжал, но это всё фиксилось через несколько итераций.
- Gmail — не холодно и не жарко, потому что корректно отображал вёрстку, но шрифты подключать не захотел и вставлял свой отвратительный Roboto.
- «Яндекс.Почта» — лидер в своей некомпетентности и абсолютной отсталости в технологиях почтового клиента.
Лидер по количеству багов во время вёрстки.
В итоге пришлось перейти на полумеры, которые помогли исправить самые крупные баги со смещением контента или случаями, когда показывалась некорректная картинка.
Шрифты. Одна мысль о том, чтобы использовать кастомные шрифты, ломалась о реальность. Поэтому многие дизайнеры вынуждены использовать системные шрифты, чтобы не было проблем (да и чтобы лишний раз не париться).
Мне было не всё равно, и я начал искать способ использовать хороший шрифт, чтобы он везде отображался. Клиенту очень нравился San Francisco — шрифт, который разработала компания Apple для своих продуктов. Однако вы не можете его легально использовать в сторонних приложениях или сайтах, поэтому если вы видите в коде сайта шрифт San Francisco, то знайте, что компания нарушает закон.
Я смог найти альтернативу. Один дизайнер из Figma сделал бесплатный шрифт Inter с поддержкой кириллицы и знака рубля. Немного подкрутите трекинг — и будет вам легальный San Francisco без SMS и регистрации.
Только в Google этот шрифт не заработал и подставил его на Roboto.
Графики с изменениями цен. Главная часть письма, которая отражает изменение цен, пришлось делать в двух версиях — мобильной и десктопной. Графики заменяются на разных устройствах, а так как это не фотография или баннер, то весят мало. А значит, не надо их сжимать, пережимать, ужимать.
Что получилось в итоге
В итоге спустя неделю бессонных ночей, литров кофе и бесконечных багов сделали так, что везде всё отображается корректно. Я не видел ни у одной компании письма, в которых ты получал аналитику изменения цен в понятных графиках. И то, что кастомный шрифт работал и письмо выглядит лучше, чем счёт на оплату у Apple.
Этой статьёй я хочу сказать, что мне очень обидно, что некогда единственная возможность общаться в интернете превращается в рудимент, а бессовестные жулики продают компаниям разработку рассылок на шаблонах, которую всё равно никто не читает и сразу удаляет.
Кто виноват в этом? Конечно, почтовые сервисы и сами ремесленники. Одни просто кладут на развитие своих продуктов и просто не развивают HTML-письма, а другие продают разработку как дополнительную услугу и при этом даже разобраться в этом не могут.
Многие разработчики делают email-рассылку на шаблоне, оправдываясь тем, что современные сервисы позволяют каждому создать её за пять минут и на шестой минуте засирать почту пользователя.
И когда я вижу все эти вебинары, уроки, услуги по email-маркетингу и email-рассылкам, то всё это одно и то же говно, которое продают хитрые «профессионалы» незнающим клиентам.
Если вы занимаетесь разработкой email-рассылок, надеюсь, моя статья поможет вам и вы станете делать хороший продукт для клиентов.
В тексте может быть много ошибок или неточностей, простите меня за это. Я первый раз пишу статью на vc.ru, но эта тема меня очень сильно зацепила, и я захотел поделиться с вами своими мыслями.
Здесь будут все ссылки на источники для разработчиков и людей, которые непосредственно всё это делают:
А также архив с кодом писем и ссылка на Figma.