Обратная сторона разработки электронных писем
Всем привет, меня зовут Никита Грудин, я продуктовый дизайнер. Недавно прочитал статью о том, что дизайнеру надо учесть при оформлении рассылки, и меня она взбесила тупостью советов и унылыми кейсами от «профессионалов».
Хочу поделиться с вами опытом разработки email-рассылок для сложной компании, в ходе которого я понял:
- Мелкие компании не парятся и делают письма по шаблону, поэтому они выглядят так убого и маркетинг не работает.
- Из-за медленного и неравномерного развития разработка email-писем часто очень тупой и нервный процесс.
- Большинство писем включают в себя текст, ссылки и картинки с очень простой сеткой и композицией, и никто не заморачивается делать более сложные вещи.
UX писем и влажные мечты
Ко мне обратился клиент, который заказывал у меня презентацию, с просьбой «как-нибудь подумать о новом дизайне писем в рассылке». Когда я попросил его скинуть то, прям офигел. Даже показывать не хочу, как они выглядели на мобиле, чтобы поберечь ваши глаза.
Заказ был на три письма:
- Рассылка с изменениями цен на топливных базисах.
- Обновление цен на избранные виды топлива, которые пользователь добавляет себе на сайте в закладки.
- Коммерческое письмо с уже рассчитанной доставкой до пункта назначения.
Короче, задачу приняли, утвердили бюджет и начали работу. Так как я вообще не представлял, что из себя представляет разработка 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.
А есть информация о результате мучений - то есть выхлопе с таких писем? Например, клики на CTA из обычного шаблонного письма и вот красивого такого? Чтобы понять, стоит ли это всех мучений)
Раз автор позволил себе поставить ссылку на наш материал, то позволю себе и ответить.
Я работаю продакшн-директором в компании Кинетика и отвечаю за качество продакшена, в том числе и рассылок, которые мы делаем. Никита говорит о "тупости" наших советов и о "унылости" кейсов, при этом никак не аргументируя позицию, это не дело. Думаю речь идет о вкусовщине — автору не нравится в дизайне писем что-то и он, не скрывая эмоций, об этом пишет.
Мы делимся опытом формирования рассылок с точки зрения подхода дизайнера (о дизайне письма и подходов к его структурированию у автора в статье примерно ноль) и не только, наши материалы читают 10к+ человек в телеграме и 15к+ в блоге, материал, на который сослался автор собрал 113 добавлений в закладки, думаю тут все понятно относительно полезности советов.
Теперь о шаблонах, автор приводит этот аргумент, как минус в работе. Цитата "Мелкие компании не парятся и делают письма по шаблону, поэтому они выглядят так убого и маркетинг не работает."
Что касается маркетинга, он работает всегда, когда у компании есть хорошее ценностное предложение, а рассылка лишь средство его дистрибуции.
Что касается шаблонов, то для екоммерс кампаний это всегда самое выгодное решение, посмотрите на рассылки Озона или Ламоды, или наших клиентов СДЭК, Восток-сервис это всегда набор шаблонов со вставленными картинками, и не потому что "люди не парятся", а потому это просто экономически целесообразно. Ну и тут точно не идет речи и том, чтобы отдавать рассылку человеку, который сразу после оплаты "начал работу и я вообще не представлял, что из себя представляет разработка HTML-писем".
Агентство отличается от фрилансера, в этом я соглашусь, время-деньги, у нас нет возможности сливать часы специалиста, как автор пишет: "В итоге спустя неделю бессонных ночей, литров кофе и бесконечных багов...", нам нужно быстро использовать проверенные решения, разве это плохо? Нам важны показатели на выходе, они в центре любого рекламного канала, а какой дизайн рассылки кому нравится или не нравится, это дело вкуса каждого читателя.
Этот материал пропитан не столько кейсом, как автор переверстал письмо, сколько эмоциями о том, что агентства халтурят и не выкладываются. Поверьте, клиенты никогда не будут платить деньги просто так. За каждый рубль нужно отчитаться и отработать. А если нет - до свидания.
Артем, добрый день! Спасибо вам за официальный ответ. Очень приятно, что вы обратили внимание:) Вы правы, что статья написана на эмоциях, однако дизайн - это не вкусовщина, как вы выразились. Соглашусь, что иногда крупным компаниям нужно простое рабочее решение. Мой рассказ про то, что иногда можно сделать не по шаблону, особенно если взять сложную компанию, как в моем примере.
Вы правы, что, маркетинг работает, когда продукт у компании хороший. Хотя, я уверен вы не станете спорить, что у многих компаний в России хороший продукт, но плохая упаковка, например криво сверстанные письма из e-mail рассылки.
Жаль, что вы сделали поспешный вывод о том, что я сначала взял деньги, а потом начал думать как выполнить заказ. Как и вы, в работе с крупными компаниями, я также отчитался за потраченный рубль.
Уже готовлю для вас полный ответ, с цифрами о конверсии в формате "До/После", бюджетом на разработку, а также разбор дизайна ваших кейсов с Pinterest с предложением своего варианта.
Раз вы говорите, что дизайн - это вкусовщина, то тогда позволим читателям самим выбрать вариант.
В любом случае, у меня не было посыла конфликтовать с вашей компаний. Уверен, у вас опыт больше моего, а также крупнее клиенты и бюджеты на разработку. Мой случай - это скорее про то, что фрилансер может подойти к работе с творческой стороны, а не с позиции "сделать и побыстрее получить свои бабки"
Ваша позиция понятна. У нас общее, что мы хотим сделать лучше, чем было. Разница в том, что агентство имеет ресурсные ограничения, условно говоря, мы продаем часы специалистов и предыдущий успешный опыт в других кейсах, а вы нет (насколько я понял).
Можно ли сделать нашу рассылку лучше? Да. Можно ли сделать вашу рассылку лучше? Да.
Что касается дизайна и вкусовщины, то попробуйте доказать, что один дизайн рассылки лучше другого, даже имея аналогичные кейсы аргументов будет не много, пока нет цифр по реакции ЦА что-то доказать практически невозможно это вопрос доверия.
Плюс важный момент это время, затраченное на дизайн, абсурдно сравнивать дизайн, на который затрачено 5 и 50 часов, но и клиенты не всегда готовы платить х10 за это.
Отчитываться цифрами и разбором передо мной не обязательно, у меня нет к вам претензий, кроме бестактной вводной у этой статьи, а вот ее можно и исправить.
Добрый день. Рассылку запустили, как я знаю, полтора месяца назад. Могу потом получить статистику из сендпульса в формате "до/после" и прислать вам. Напишите мне в вк и мы обязательно с вами состыкуемся:)
Комментарий недоступен
Раз автор позволил себе поставить ссылку на наш материал, то позволю себе и ответить.
Я работаю продакшн-директором в компании Кинетика и отвечаю за качество продакшена, в том числе и рассылок, которые мы делаем. Никита говорит о "тупости" наших советов и о "унылости" кейсов, при этом никак не аргументируя позицию, это не дело. Думаю речь идет о вкусовщине — автору не нравится в дизайне писем что-то и он, не скрывая эмоций, об этом пишет.
Мы делимся опытом формирования рассылок с точки зрения подхода дизайнера (о дизайне письма и подходов к его структурированию у автора в статье примерно ноль) и не только, наши материалы читают 10к+ человек в телеграме и 15к+ в блоге, материал, на который сослался автор собрал 113 добавлений в закладки, думаю тут все понятно относительно полезности советов.
Теперь о шаблонах, автор приводит этот аргумент, как минус в работе. Цитата "Мелкие компании не парятся и делают письма по шаблону, поэтому они выглядят так убого и маркетинг не работает."
Что касается маркетинга, он работает всегда, когда у компании есть хорошее ценностное предложение, а рассылка лишь средство его дистрибуции.
Что касается шаблонов, то для екоммерс кампаний это всегда самое выгодное решение, посмотрите на рассылки Озона или Ламоды, или наших клиентов СДЭК, Восток-сервис это всегда набор шаблонов со вставленными картинками, и не потому что "люди не парятся", а потому это просто экономически целесообразно. Ну и тут точно не идет речи и том, чтобы отдавать рассылку человеку, который сразу после оплаты "начал работу и я вообще не представлял, что из себя представляет разработка HTML-писем".
Агентство отличается от фрилансера, в этом я соглашусь, время-деньги, у нас нет возможности сливать часы специалиста, как автор пишет: "В итоге спустя неделю бессонных ночей, литров кофе и бесконечных багов...", нам нужно быстро использовать проверенные решения, разве это плохо? Нам важны показатели на выходе, они в центре любого рекламного канала, а какой дизайн рассылки кому нравится или не нравится, это дело вкуса каждого читателя.
Этот материал пропитан не столько кейсом, как автор переверстал письмо, сколько эмоциями о том, что агентства халтурят и не выкладываются. Поверьте, клиенты никогда не будут платить деньги просто так. За каждый рубль нужно отчитаться и отработать. А если нет - до свидания.
Красавчик жи есть!
Спасибо)
Ты слишком трудолюбивый что ли) Вот на будущее https://mjml.io/
Добро пожаловать в прекрасный мир Широкая электрификация южных
Класс! Супер, спасибо!
Вот так из за одного коммента появилась целая статья на vc!
Спасибо за стимул)
Спасибо за пояснительный комментарий, но меня все равно удручает, что эта технология (e-mail) активно используется, но никак не защищается вендорами.
Интересно, автор, скажи, гридами нельзя верстать там?
Верстать можно, вопрос в том где открывать (в данном случае - в основном в iOS)
https://www.campaignmonitor.com/css/grid/grid-row/
Жесть 😞
Зато как захватывающе верстать письмо с css-анимациями или графикой в SVG, в коде которого одновременно прописывать фолбэк для технологий десятилетней давности, отдельные куски для Outlook (использующего движок MS Word для отображения писем) и мобильную верстку через медиазапросы в том же коде.
Иными словами, это вам не сайты верстать)
Гоу в личку, поговорим)
Только таблицы. Только хардкор.
Это не совсем верно.
Для маков можно сделать так, и это легально:
font-family: system-ui, -apple-system;
Но только для маков) Плюс у нас стояла задача использовать один и тот же шрифт в рассылке и на обновленном дизайне сайта)
Я понимаю, просто есть вот такой нюанс, который, например, используют ВК и FB.
Но все равно спасибо за совет, если я еще когда-нибудь буду курировать разработку e-mail рассылки, то использую этот совет) Еще раз спасибо:)
Молодец, копнул глубоко!
Спасибо:)
Я два года занимался дизайном эмейл рассылок и хочу сказать, что при грамотном разработчике и хороших идеях (и понимании в техническом процессе верстки) можно делать довольно интересные и уникальные рассылки с анимацией (при скролле, например), псевдо-3д (средствами смены изображений при перемещении курсора), ховерами и другими вкусностями.
Сами же почтовые клиенты специально обрезают цсс'ы и скрипты для того, чтобы рассылка писем не превратила жизнь их клиентов в боль из за количества уязвимостей, которые могут появиться, когда будут рассылаться скрипты и это вполне адекватно.
Очень благодарен своему разработчику, потому что он сам никогда этим не занимался, а в итоге смог сделать хорошие письма. Ну получается, в итоге должны страдать разработчики, которые делают e-mail рассылки для компаний, или может это я придумываю и на самом деле все хорошо. Как говорится "И так сойдет"
Спасибо за статью, круто вы закопались и разобрались. Письмо правда отличное получилось.
Спасибо за комплимент)
орнул и прослезился :D
Пользуюсь Foundation for Emails от Zurb и вполне доволен. Позволяет сэкономить тучу нервных клеток на вёрстке долбанных писем. Кто ещё чем пользуется?
Для какого-никакого интерактива появился AMP for Email, но пока что он свежий и мало где работает. Более простые вещи вроде анимаций и ховера при желании вполне можно реализовывать, но ко всему смелому нужно добавлять fallback для старых клиентов, поскольку простое письмо не так бесит, как сломанное (поэтому если сам письма еще и рисуешь, то часто думаешь "а стоит ли оно вообще мучений").
Сколько полезной информации и источников пишут люди) Эх, жаль я этого не знал, когда занимался правками письма в фронтендером моим)
На самом деле, имейл-девелоперы чаще всего довольно отзывчивы.
Мне в свое время здорово помог слак EmailGeeks https://email.geeks.chat/
А что увидят любители Аутлук и Bat?
Имеешь в виду именно Outlook или приложение почта в винде?
Какая выгода клиенты создавать красивый шаблон письма? Как изменились показатели, на сколько выросла рентабельность?
В бизнесе все просто: можно сделать любую навороченную вещь, полгода или год сношаться с единорогами, чтобы родить радужный дизайн для служебных писем. Но если ваши усилия в конечном счёте не увеличивают денежный поток компании, то однажды вы пойдёте на свалку, не зависимо от красоты дизайна, количество вложенных сил и личные таланты.
Дизайн исторически возник как инструмент бизнеса и должен работать на прибыль компании. К сожалению многие дизайнеры забыли или не знали этот факт, увлеклись игрой в красивые картинки и бессонные ночи ради героического творческого достижения. Иногда дизайнер начинает задумываться о практической пользе от своего труда и вот тут начинается депрессия.
Надеюсь это не ваш случай.
Главный посыл моего примера сделать не "красивое" письмо, а письмо, которое корректно отображает информацию и справляется со своей задачей: информировать клиентов об изменении цены и показывать это изменение через графики. Те дизайнеры, которые занимаются рисованием картинок, часто дальше лендингов не развиваются.
Также учтите, что в шаблонной e-mail рассылке используют простой контент: картинки и текст, например. Причем картинки подразумеваю либо фото товара, либо "красивый баннер". В моем примере совершенно иная задача у картинок.
Так и как изменились показатели эффективности клиента? Овчинка выделки стоила?
Добрый вечер, статью с подробными результатами я выложу на следующей неделе и всем комментаторам отпишусь, чтобы вы первые ее прочитали)
Я хоть и не комментировал, но и мне отпишитесь, пожалуйста. А то боюсь пропустить. Эта тема меня очень интересует, но я скорей дилетант, поэтому и не стал комментировать. В общем, жду-с...))
Не переживайте, отпишусь) Также обсудим претензию со стороны агенства KINETICA и во второй части рассказа опишу весь этап разработки этих писем с скринами и видео, чтобы никто не сказал, что скрины "нафотошоплены"))
Буду ждать. Спасибо!
А в чем была сложность кОмпании? Бюджет же они утвердили, работу приняли...
Перечислю по пунктам:
1) Минимальный бюджет
2) сложность реализации: сделать просто письмо на конструкторе с рассылкой рекламы легче, чем сделать интерфейс отображения цен на топливо и ещё чтобы туда график с изменением цены подставлялся.
3) взаимодействие с бэкэндом на стороне заказчика. Нужно было объяснить им что нужно сделать, чтобы рассылка работала. Если думаете, что нужно было только письмо сверстать, то ошибаетесь:)
Самое главное: тематика. Сделать рассылку для компании, которая занимается продажей товаров легче, чем для сервиса по доставке топлива крупным объектам
Тогда это сложность кАмпании, а не кОмпании?