Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.
До 2019 года мы знали два способа создания вёрстки: в редакторе кода и в блочных редакторах. Идеальный блочный редактор пока не изобрели, поэтому свою агентскую вёрстку мы создавали в редакторах кода. До настоящего момента.
В конце 2019 года появился плагин для Фигмы, который позволяет, при соблюдении определённых правил при создании дизайн-макета, выгружать макет в готовое для отправки письмо.
В начале возможности плагина были ограничены, но идея нас зацепила. На тот момент казалось, что плагин может облегчить процесс создания простых дайджестов и триггеров. Мы познакомились с разработчиком плагина Григорием Машковцевым и предложили свою экспертную помощь в развитии продукта.
Мы предлагали разработчику исправления и фичи, участвовали в тестировании. В процессе работы над плагином стало очевидно, что мы недооценивали потенциал продукта, ведь в новом инструменте удалось реализовать поддержку даже самых сложных подходов и особенностей email-вёрстки.
Возможности плагина
Качество вёрстки на уровне высококлассного верстальщика.
К анализу и доведению до ума вёрстки, которую генерирует новый плагин для Фигмы, были привлечены наши ведущие верстальщики. Поэтому объём кода существенно снизился и сам код стал максимально соответствовать стандартам нашего агентства.
Адаптивность.
Имеется поддержка адаптивности — её теперь полностью контролирует дизайнер.
Поддержка Outlook.
Вёрстка электронных писем, которую генерирует плагин, постоянно тестируется в emailonacid.com и поддерживается популярными почтовыми клиентами, включая Outlook.
Поддержка произвольной базовой ширины письма.
Оптимальной считается базовая ширина 600px, но это не закон. Часто для лучшего результата требуется большая или меньшая базовая ширина. Плагин способен на программном уровне устанавливать базовую ширину в соответствии с шириной вашего дизайн-макета.
Возможность добавлять в письмо блоки с шириной, отличной от базовой.
Если необходимо сделать подвал, шапку письма или какой-то акцентный блок в содержимом шириной 100%, в Marka такое возможно.
Поддержка тёмных тем.
Письма в большинстве случаев достойно выглядят в тёмных версиях различных браузеров. А если всё же что-то не так — этим можно управлять.
Управление видимостью блоков на десктопе/мобильных.
Если требуется десктопной и мобильной аудитории показывать разные варианты одного и того же блока или вовсе не показывать одной из аудиторий определённый контент, то в Marka это очень просто реализовано.
Возможность использования Google-шрифтов.
Вы можете использовать в Фигме любой шрифт из коллекции Google Fonts — плагин автоматически добавит шрифты в письмо.
Автоматическая конвертация SVG-графики в растровую.
Плагин при выгрузке кода определяет фреймы с векторной графикой и преобразует их в PNG-формат.
Поддержка шахматных блоков.
В дизайне иногда используются блоки с чередованием: изображение-текст, текст-изображение, изображение-текст. Тогда в адаптивной версии у этих блоков должно быть чёткое следование: изображение-текст, изображение-текст, изображение-текст. Marka может и такое.
Выгрузка письма в архив с изображениями для экспорта этого архива в большинство сервисов рассылки.
MailChimp, ExpertSender, MindBox и другие системы рассылки позволяют загружать письмо в вёрстку в виде архива и сразу кодом в html-документе, где есть относительные ссылки до изображений в архиве. Marka умеет выгружать вёрстку писем в таком формате.
Опциональная автозагрузка изображений письма на облачный хостинг.
При активации этой опции плагин отдаст только вёрстку, а все изображения письма будут загружены на Яндекс.Облако.
Опциональная обработка текста письма «Типографом».
Позволяет на лету, как обещает описание к программе, «вместо знаков дюйма поставить нормальные кавычки («ёлочки» и „лапки“), поубивать лишние пробелы, в нужных местах заменить дефисы на тире, неразрывным пробелом „привязать“ все короткие союзы и предлоги к следующим за ними словам и произвести кучу других операций».
Опциональная минификация кода.
Если письмо весит больше 102 кБ, почтовый клиент Gmail отобразит его не полностью.
Если вы делаете в Marka письмо, которое не вписывается в лимит, то можно использовать опцию минификации. Она уберёт лишние символы (пробелы, переносы, комментарии) и сократит «вес» кода на 40%.
Возможность добавления невидимого прехедера.
Прехедер — это текст, который отображается в списке писем почтового клиента сразу после темы письма.
Как собирается письмо из мастер-шаблона с помощью Marka Email Generator
Лучше один раз увидеть
Сравним использование плагина для Фигмы с другими способами вёрстки
Marka Email Generator — удобное No-code решение с агентским качеством вёрстки писем на выходе. Marka предоставляет новый подход к процессу создание письма и новые возможности. Сравним подход Marka с другими способами создания вёрстки:
| Создание письма в блочном редакторе | Использование плагина Marka | |
Трудозатраты | Необходим верстальщик, который воплотит в коде дизайн письма. Наиболее трудозатратный способ. | Чаще всего верстальщик не нужен. Письмо собирает менеджер или дизайнер. | Верстальщик не нужен. Письмо собирает менеджер или дизайнер. |
Возможности дизайна | Ограничены уровнем верстальщика и здравым смыслом. | Ограничены предустановками и функциональностью блочного редактора. Невозможно реализовать нестандартные решения без вкрапления вёрстки.В некоторые редакторы можно внедрить свой дизайн блоков, но для этого необходим верстальщик | Ограничены только логикой структуры макета, которую необходимо поддерживать для возможности выгрузки. |
Качество кода | Зависит от уровня верстальщика. | В большинстве современных редакторов оставляет желать лучшего. | На уровне вёрстки писем агентства Email Soldiers. |
Pixel Perfect — попадание вёрстки в макет | Полностью в руках верстальщика и зависит от опыта. | 100% Pixel Perfect | 100% Pixel Perfect |
Объём кода | Зависит от уровня верстальщика. При высоком уровне — минимальный объём кода. | Большой. Очень большой. | Средний |
Удобство модификации и повторного использования | Верстальщики повторно используют решения, но от дизайнеров часто приходят задачи, требующие вёрстки с нуля. | По сути работа строится на использовании готовых решений. | Работа с адаптированным мастер-шаблоном напоминает работу с блочным редактором. |
Боевое применение нового плагина для Фигмы
Летом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.
Одним из первых заказчиков, для которых мы использовали новый инструмент, стал туроператор «Алеан».
Мы адаптировали дизайн мастер-шаблона под логику Marka Email Generator. Финальная сборка писем сейчас производится на стороне заказчика и напоминает работу с блочным редактором.
Ещё одна работа — письма для агентства i-Media:
Что говорят клиенты
Туроператор «Алеан»
Анна Сахарова, интернет-маркетолог туроператора Алеан:
Технология Marka Email Generator вызвала у нас большой интерес: из макета, сделанного в Фигме, буквально за пару секунд получается письмо, свёрстанное в лучших практиках HTML.
Ребята из Email Soldiers подготовили для нас два мастер-шаблона, с блоками, которые можно в различных конфигурациях применять в письмах. Из них мы создали уже около 20 разных писем. Очень трудно остановиться на стандартном шаблоне, когда можно постоянно применять что-то новое
