Обратная сторона разработки электронных писем

Всем привет, меня зовут Никита Грудин, я продуктовый дизайнер. Недавно прочитал статью о том, что дизайнеру надо учесть при оформлении рассылки, и меня она взбесила тупостью советов и унылыми кейсами от «профессионалов».

Хочу поделиться с вами опытом разработки email-рассылок для сложной компании, в ходе которого я понял:

Ко мне обратился клиент, который заказывал у меня презентацию, с просьбой «как-нибудь подумать о новом дизайне писем в рассылке». Когда я попросил его скинуть то, прям офигел. Даже показывать не хочу, как они выглядели на мобиле, чтобы поберечь ваши глаза.

Заказ был на три письма:

Короче, задачу приняли, утвердили бюджет и начали работу. Так как я вообще не представлял, что из себя представляет разработка HTML-писем (тем более для сложных данных и графиков), то первым делом скачал сетку для писем для десктопа и мобилы и пошёл искать рефы и накидывать первый вариант.

В первом письме был просто список видов топлива.

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

И в третьем письме было стандартное коммерческое предложение с понятной структурой и разными цифрами.

Я начал подготовку макетов к вёрстке, параллельно почитывая правила, которые нужно учитывать при вёрстке писем. И тут мои влажные мечты начали испаряться от температуры кипения моей жопы, потому что оказывается:

А теперь поговорим о самых адских моментах при разработке.

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

Во время разработки я составил список сервисов от самого продвинутого и современного до самого убогого и корявого, на который жалуются все верстальщики:

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

Шрифты. Одна мысль о том, чтобы использовать кастомные шрифты, ломалась о реальность. Поэтому многие дизайнеры вынуждены использовать системные шрифты, чтобы не было проблем (да и чтобы лишний раз не париться).

Мне было не всё равно, и я начал искать способ использовать хороший шрифт, чтобы он везде отображался. Клиенту очень нравился San Francisco — шрифт, который разработала компания Apple для своих продуктов. Однако вы не можете его легально использовать в сторонних приложениях или сайтах, поэтому если вы видите в коде сайта шрифт San Francisco, то знайте, что компания нарушает закон.

Я смог найти альтернативу. Один дизайнер из Figma сделал бесплатный шрифт Inter с поддержкой кириллицы и знака рубля. Немного подкрутите трекинг — и будет вам легальный San Francisco без SMS и регистрации.

Только в Google этот шрифт не заработал и подставил его на Roboto.

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

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

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

Кто виноват в этом? Конечно, почтовые сервисы и сами ремесленники. Одни просто кладут на развитие своих продуктов и просто не развивают HTML-письма, а другие продают разработку как дополнительную услугу и при этом даже разобраться в этом не могут.

Многие разработчики делают email-рассылку на шаблоне, оправдываясь тем, что современные сервисы позволяют каждому создать её за пять минут и на шестой минуте засирать почту пользователя.

И когда я вижу все эти вебинары, уроки, услуги по email-маркетингу и email-рассылкам, то всё это одно и то же говно, которое продают хитрые «профессионалы» незнающим клиентам.

Если вы занимаетесь разработкой email-рассылок, надеюсь, моя статья поможет вам и вы станете делать хороший продукт для клиентов.

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

Здесь будут все ссылки на источники для разработчиков и людей, которые непосредственно всё это делают:

А также архив с кодом писем и ссылка на Figma.

#email