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

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

Хочу поделиться с вами опытом разработки 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. Почувствуй разницу, как говорится

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

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

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

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

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

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

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

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

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

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

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

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

0
48 комментариев
Написать комментарий...
Alena Semchuk

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

Ответить
Развернуть ветку
Артем Первухин

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

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

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

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

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

Ответить
Развернуть ветку
Никита Грудин
Автор

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

Вы правы, что, маркетинг работает, когда продукт у компании хороший. Хотя, я уверен вы не станете спорить, что у многих компаний в России хороший продукт, но плохая упаковка, например криво сверстанные письма из e-mail рассылки.

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

Уже готовлю для вас полный ответ, с цифрами о конверсии в формате "До/После", бюджетом на разработку, а также разбор дизайна ваших кейсов с Pinterest с предложением своего варианта.

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

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

Ответить
Развернуть ветку
Артем Первухин

Ваша позиция понятна. У нас общее, что мы хотим сделать лучше, чем было. Разница в том, что агентство имеет ресурсные ограничения, условно говоря, мы продаем часы специалистов и предыдущий успешный опыт в других кейсах, а вы нет (насколько я понял).
Можно ли сделать нашу рассылку лучше? Да. Можно ли сделать вашу рассылку лучше? Да.

Что касается дизайна и вкусовщины, то попробуйте доказать, что один дизайн рассылки лучше другого, даже имея аналогичные кейсы аргументов будет не много, пока нет цифр по реакции ЦА что-то доказать практически невозможно это вопрос доверия.
Плюс важный момент это время, затраченное на дизайн, абсурдно сравнивать дизайн, на который затрачено 5 и 50 часов, но и клиенты не всегда готовы платить х10 за это.

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

Ответить
Развернуть ветку
Никита Грудин
Автор

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

Ответить
Развернуть ветку
quyse

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

Ответить
Развернуть ветку
Артем Первухин

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

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

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

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

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

Ответить
Развернуть ветку
Никита Сергеев

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

Ответить
Развернуть ветку
Никита Грудин
Автор

Спасибо)

Ответить
Развернуть ветку
Artyom Konakov

Ты слишком трудолюбивый что ли) Вот на будущее https://mjml.io/

Ответить
Развернуть ветку
Roman Ryashentsev

Добро пожаловать в прекрасный мир Широкая электрификация южных

Ответить
Развернуть ветку
Alexey Korovin

Класс! Супер, спасибо!
Вот так из за одного коммента появилась целая статья на vc!

Ответить
Развернуть ветку
Никита Грудин
Автор

Спасибо за стимул)

Ответить
Развернуть ветку
Никита Грудин
Автор

Спасибо за пояснительный комментарий, но меня все равно удручает, что эта технология (e-mail) активно используется, но никак не защищается вендорами.

Ответить
Развернуть ветку
Anton Smets

Интересно, автор, скажи, гридами нельзя верстать там?

Ответить
Развернуть ветку
StormThorm

Верстать можно, вопрос в том где открывать (в данном случае - в основном в iOS)
https://www.campaignmonitor.com/css/grid/grid-row/

Ответить
Развернуть ветку
Anton Smets

Жесть 😞

Ответить
Развернуть ветку
StormThorm

Зато как захватывающе верстать письмо с css-анимациями или графикой в SVG, в коде которого одновременно прописывать фолбэк для технологий десятилетней давности, отдельные куски для Outlook (использующего движок MS Word для отображения писем) и мобильную верстку через медиазапросы в том же коде.

Ответить
Развернуть ветку
Никита Грудин
Автор

Иными словами, это вам не сайты верстать)

Ответить
Развернуть ветку
Никита Грудин
Автор

Гоу в личку, поговорим)

Ответить
Развернуть ветку
Artem Petrenkov

Только таблицы. Только хардкор.

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

Это не совсем верно.
Для маков можно сделать так, и это легально:
font-family: system-ui, -apple-system;

Ответить
Развернуть ветку
Никита Грудин
Автор

Но только для маков) Плюс у нас стояла задача использовать один и тот же шрифт в рассылке и на обновленном дизайне сайта)

Ответить
Развернуть ветку
Designer

Я понимаю, просто есть вот такой нюанс, который, например, используют ВК и FB.

Ответить
Развернуть ветку
Никита Грудин
Автор

Но все равно спасибо за совет, если я еще когда-нибудь буду курировать разработку e-mail рассылки, то использую этот совет) Еще раз спасибо:)

Ответить
Развернуть ветку
Александр Рой

Молодец, копнул глубоко!

Ответить
Развернуть ветку
Никита Грудин
Автор

Спасибо:)

Ответить
Развернуть ветку
Oleg Aniskin

Я два года занимался дизайном эмейл рассылок и хочу сказать, что при грамотном разработчике и хороших идеях (и понимании в техническом процессе верстки) можно делать довольно интересные и уникальные рассылки с анимацией (при скролле, например), псевдо-3д (средствами смены изображений при перемещении курсора), ховерами и другими вкусностями.

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

Ответить
Развернуть ветку
Никита Грудин
Автор

Очень благодарен своему разработчику, потому что он сам никогда этим не занимался, а в итоге смог сделать хорошие письма. Ну получается, в итоге должны страдать разработчики, которые делают e-mail рассылки для компаний, или может это я придумываю и на самом деле все хорошо. Как говорится "И так сойдет"

Ответить
Развернуть ветку
Daria Titova

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

Ответить
Развернуть ветку
Никита Грудин
Автор

Спасибо за комплимент)

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

орнул и прослезился :D

Пользуюсь Foundation for Emails от Zurb и вполне доволен. Позволяет сэкономить тучу нервных клеток на вёрстке долбанных писем. Кто ещё чем пользуется?

Ответить
Развернуть ветку
StormThorm

Для какого-никакого интерактива появился AMP for Email, но пока что он свежий и мало где работает. Более простые вещи вроде анимаций и ховера при желании вполне можно реализовывать, но ко всему смелому нужно добавлять fallback для старых клиентов, поскольку простое письмо не так бесит, как сломанное (поэтому если сам письма еще и рисуешь, то часто думаешь "а стоит ли оно вообще мучений").

Ответить
Развернуть ветку
Никита Грудин
Автор

Сколько полезной информации и источников пишут люди) Эх, жаль я этого не знал, когда занимался правками письма в фронтендером моим)

Ответить
Развернуть ветку
StormThorm

На самом деле, имейл-девелоперы чаще всего довольно отзывчивы.
Мне в свое время здорово помог слак EmailGeeks https://email.geeks.chat/

Ответить
Развернуть ветку
Ренат Смольный

А что увидят любители Аутлук и Bat?

Ответить
Развернуть ветку
Никита Грудин
Автор

Имеешь в виду именно Outlook или приложение почта в винде?

Ответить
Развернуть ветку
Andreas Unterseher

Какая выгода клиенты создавать красивый шаблон письма? Как изменились показатели, на сколько выросла рентабельность?

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

Дизайн исторически возник как инструмент бизнеса и должен работать на прибыль компании. К сожалению многие дизайнеры забыли или не знали этот факт, увлеклись игрой в красивые картинки и бессонные ночи ради героического творческого достижения. Иногда дизайнер начинает задумываться о практической пользе от своего труда и вот тут начинается депрессия.
Надеюсь это не ваш случай.

Ответить
Развернуть ветку
Никита Грудин
Автор

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

Также учтите, что в шаблонной e-mail рассылке используют простой контент: картинки и текст, например. Причем картинки подразумеваю либо фото товара, либо "красивый баннер". В моем примере совершенно иная задача у картинок.

Ответить
Развернуть ветку
Andreas Unterseher

Так и как изменились показатели эффективности клиента? Овчинка выделки стоила?

Ответить
Развернуть ветку
Никита Грудин
Автор

Добрый вечер, статью с подробными результатами я выложу на следующей неделе и всем комментаторам отпишусь, чтобы вы первые ее прочитали)

Ответить
Развернуть ветку
John Snow

Я хоть и не комментировал, но и мне отпишитесь, пожалуйста. А то боюсь пропустить. Эта тема меня очень интересует, но я скорей дилетант, поэтому и не стал комментировать. В общем, жду-с...))

Ответить
Развернуть ветку
Никита Грудин
Автор

Не переживайте, отпишусь) Также обсудим претензию со стороны агенства KINETICA и во второй части рассказа опишу весь этап разработки этих писем с скринами и видео, чтобы никто не сказал, что скрины "нафотошоплены"))

Ответить
Развернуть ветку
John Snow

Буду ждать. Спасибо!

Ответить
Развернуть ветку
Andrey Tokarev

А в чем была сложность кОмпании? Бюджет же они утвердили, работу приняли...

Ответить
Развернуть ветку
Никита Грудин
Автор

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

Ответить
Развернуть ветку
Никита Грудин
Автор

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

Ответить
Развернуть ветку
Andrey Tokarev

Тогда это сложность кАмпании, а не кОмпании?

Ответить
Развернуть ветку
45 комментариев
Раскрывать всегда