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

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

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

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

UX писем и влажные мечты

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

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

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

  1. Рассылка с изменениями цен на топливных базисах.
  2. Обновление цен на избранные виды топлива, которые пользователь добавляет себе на сайте в закладки.
  3. Коммерческое письмо с уже рассчитанной доставкой до пункта назначения.

Короче, задачу приняли, утвердили бюджет и начали работу. Так как я вообще не представлял, что из себя представляет разработка 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.

Сверху Inter, снизу Verdana. Почувствуй разницу, как говорится
Сверху Inter, снизу Verdana. Почувствуй разницу, как говорится

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

График старший и график младший. Не переживайте: на телефоне это не замылено и всё выглядит четко
График старший и график младший. Не переживайте: на телефоне это не замылено и всё выглядит четко

Что получилось в итоге

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

Компания за $800 млрд против простого дизайнера из Краснодара
Компания за $800 млрд против простого дизайнера из Краснодара

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

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

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

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

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

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

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

2828
48 комментариев

А есть информация о результате мучений - то есть выхлопе с таких писем? Например, клики на CTA из обычного шаблонного письма и вот красивого такого? Чтобы понять, стоит ли это всех мучений)

11
Ответить

Раз автор позволил себе поставить ссылку на наш материал, то позволю себе и ответить.

Я работаю продакшн-директором в компании Кинетика и отвечаю за качество продакшена, в том числе и рассылок, которые мы делаем. Никита говорит о "тупости" наших советов и о "унылости" кейсов, при этом никак не аргументируя позицию, это не дело. Думаю речь идет о вкусовщине — автору не нравится в дизайне писем что-то и он, не скрывая эмоций, об этом пишет.
Мы делимся опытом формирования рассылок с точки зрения подхода дизайнера (о дизайне письма и подходов к его структурированию у автора в статье примерно ноль) и не только, наши материалы читают 10к+ человек в телеграме и 15к+ в блоге, материал, на который сослался автор собрал 113 добавлений в закладки, думаю тут все понятно относительно полезности советов.

Теперь о шаблонах, автор приводит этот аргумент, как минус в работе. Цитата "Мелкие компании не парятся и делают письма по шаблону, поэтому они выглядят так убого и маркетинг не работает."
Что касается маркетинга, он работает всегда, когда у компании есть хорошее ценностное предложение, а рассылка лишь средство его дистрибуции.
Что касается шаблонов, то для екоммерс кампаний это всегда самое выгодное решение, посмотрите на рассылки Озона или Ламоды, или наших клиентов СДЭК, Восток-сервис это всегда набор шаблонов со вставленными картинками, и не потому что "люди не парятся", а потому это просто экономически целесообразно. Ну и тут точно не идет речи и том, чтобы отдавать рассылку человеку, который сразу после оплаты "начал работу и я вообще не представлял, что из себя представляет разработка HTML-писем".

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

Этот материал пропитан не столько кейсом, как автор переверстал письмо, сколько эмоциями о том, что агентства халтурят и не выкладываются. Поверьте, клиенты никогда не будут платить деньги просто так. За каждый рубль нужно отчитаться и отработать. А если нет - до свидания.

4
Ответить

Добрый день. Рассылку запустили, как я знаю, полтора месяца назад. Могу потом получить статистику из сендпульса в формате "до/после" и прислать вам. Напишите мне в вк и мы обязательно с вами состыкуемся:)

Ответить

Комментарий недоступен

7
Ответить

Раз автор позволил себе поставить ссылку на наш материал, то позволю себе и ответить.

Я работаю продакшн-директором в компании Кинетика и отвечаю за качество продакшена, в том числе и рассылок, которые мы делаем. Никита говорит о "тупости" наших советов и о "унылости" кейсов, при этом никак не аргументируя позицию, это не дело. Думаю речь идет о вкусовщине — автору не нравится в дизайне писем что-то и он, не скрывая эмоций, об этом пишет.
Мы делимся опытом формирования рассылок с точки зрения подхода дизайнера (о дизайне письма и подходов к его структурированию у автора в статье примерно ноль) и не только, наши материалы читают 10к+ человек в телеграме и 15к+ в блоге, материал, на который сослался автор собрал 113 добавлений в закладки, думаю тут все понятно относительно полезности советов.

Теперь о шаблонах, автор приводит этот аргумент, как минус в работе. Цитата "Мелкие компании не парятся и делают письма по шаблону, поэтому они выглядят так убого и маркетинг не работает."
Что касается маркетинга, он работает всегда, когда у компании есть хорошее ценностное предложение, а рассылка лишь средство его дистрибуции.
Что касается шаблонов, то для екоммерс кампаний это всегда самое выгодное решение, посмотрите на рассылки Озона или Ламоды, или наших клиентов СДЭК, Восток-сервис это всегда набор шаблонов со вставленными картинками, и не потому что "люди не парятся", а потому это просто экономически целесообразно. Ну и тут точно не идет речи и том, чтобы отдавать рассылку человеку, который сразу после оплаты "начал работу и я вообще не представлял, что из себя представляет разработка HTML-писем".

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

Этот материал пропитан не столько кейсом, как автор переверстал письмо, сколько эмоциями о том, что агентства халтурят и не выкладываются. Поверьте, клиенты никогда не будут платить деньги просто так. За каждый рубль нужно отчитаться и отработать. А если нет - до свидания.

6
Ответить

Красавчик жи есть!

4
Ответить

Спасибо)

Ответить