[HTML] Скачать готовую html-вёрстку письма можно с помощью плагина для Фигмы
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Речь пойдёт о 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 Perfect100% Pixel PerfectОбъём кодаЗависит от уровня верстальщика. При высоком уровне — минимальный объём кода.Большой. Очень большой.СреднийУдобство модификации и повторного использованияВерстальщики повторно используют решения, но от дизайнеров часто приходят задачи, требующие вёрстки с нуля.По сути работа строится на использовании готовых решений.Работа с адаптированным мастер-шаблоном напоминает работу с блочным редактором.Боевое применение нового плагина для ФигмыЛетом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.Одним из первых заказчиков, для которых мы использовали новый инструмент, стал туроператор «Алеан».
Мы адаптировали дизайн мастер-шаблона под логику Marka Email Generator. Финальная сборка писем сейчас производится на стороне заказчика и напоминает работу с блочным редактором.Ещё одна работа — письма для агентства i-Media:
Что говорят клиентыТуроператор «Алеан»
Анна Сахарова, интернет-маркетолог туроператора Алеан: Технология Marka Email Generator вызвала у нас большой интерес: из макета, сделанного в Фигме, буквально за пару секунд получается письмо, свёрстанное в лучших практиках HTML.Ребята из Email Soldiers подготовили для нас два мастер-шаблона, с блоками, которые можно в различных конфигурациях применять в письмах. Из них мы создали уже около 20 разных писем. Очень трудно остановиться на стандартном шаблоне, когда можно постоянно применять что-то новое ?Что нам понравилось:Самое главное — возможность самостоятельно создавать красивые дизайнерские письма, где блоки компонуются в разных вариациях. Этих возможностей не хватает в стандартных шаблонах сервисов рассылок.Перед выгрузкой письма из Фигмы можно сразу проверить, как оно будет выглядеть в десктопной и мобильной версии.Сразу в Фигме можно обработать довольно много изображений и даже gif-анимацию и вставить в письмо.Плагин стоит всего 7$ в месяц.Ребята готовы помогать в работе с плагином и гибко совершенствовать функционал для удобства работы с ним.
Агентство интернет-рекламы i-Media
Мария Гудкова, маркетолог i-Media:У нас в i-Media 13 услуг, которые мы продвигаем и пять отраслей бизнеса, на которые мы нацелены. Под каждую услугу и отрасль регулярно верстаем email-рассылки, отправляем дайджесты для клиентов и наших сотрудников. В месяц у нас выходит от трёх до восьми писем.До внедрения плагина отправка рассылки запускала долгий процесс подготовки, от которого становилось немного дурно. Сначала отрисовка уникального дизайна, потом вёрстка писем, потом опять мы бежали к дизайнеру, потому что на тестах какой-нибудь элемент стремился занять не своё место. В общем, каждый раз мы испытывали себя на терпимость.Пару месяцев назад мы одними из первых попробовали плагин Marka Pro и, если честно, очень сомневались и переживали. Думали, что ручной труд профессионального верстальщика заменить невозможно. Но мы попробовали и не пожалели.Теперь маркетологи сами справляются со всем процессом. Тратим гораздо меньше времени и сил на email-письма. С плагином от идеи до отправки письма проходит не больше 2 часов.
Как отреагировала командаЧто говорит дизайнер
Андрей Ведерников, дизайнер Creative Soldiers: Фигма — простой графический редактор без излишеств, у неё нет, как в Фотошопе, множества функций. Но, несмотря на простоту Фигмы, в неё удалось добавить сложный плагин, от которого наши дизайнеры, верстальщики и разработчики до сих пор под впечатлением. Он генерирует html-код для писем прямо из дизайн-макета.Подойдёт не любой дизайн-макет, а только который сделан по правилам разработчика плагина. В гайде к Marka описаны основные функции плагина для Фигмы и даны подробные разъяснения про его работу. Но главное, что нужно для успешной работы с Marka, — практика. Мы до сих пор открываем для себя особенности этого инструмента.Работая с Marka, нужно мыслить блочно, создавать блочную модель исходного макета. И в этом плагине всё идёт в работу, каждая кнопочка несёт свою функцию и каждая функция плагина привязана к какому-то элементу интерфейса.Можно загружать любые изображения, любой текст — всё автоматически переходит в код.Раньше при сборке мастер-шаблона, чтобы что-то там изменить, необходимо было идти в код. То есть клиент вносит правки текстом или другим образом, а верстальщик идёт в код и правит. Сейчас клиент самостоятельно заходит в макет и меняет его.Подводные камни нового плагина для ФигмыОсобенности плагина обнаруживаются, в большинстве своём, методом проб и ошибок.Можно изучить гайд для разработчиков, но что-то придётся открывать напрямую в работе. Например, в письмах задан кёрнинг (расстояние между буквами) в 3%, а плагин для Фигмы не считал эту информацию. Приходится поправлять руками.Ещё пример: мобильная версия рассылок работает не так, как на сайтах, и в Marka есть возможность перенести картинку на следующую строку мобильной версии, тогда как в веб-версии картинки расположены на одной строке. Обнаружили это тоже только на практике.Плюсы MarkaЗдесь я вижу один весомый плюс, который перевешивает все недостатки: с новым плагином всё делается быстрее — и дизайн, и вёрстка электронных писем, при этом дизайнер может выступать в роли верстальщика, не затрагивая вёрстку.
Что говорит менеджер
Сергей Соболевский, интернет-маркетолог Email Soldiers:Я часто занимаюсь задачами связанными с мастер-шаблонами, и создание таких шаблонов отнимает много времени у команды. Новый плагин для Фигмы помогает отказаться от работы верстальщиков, а по качеству исполнения не уступает результату работы специалиста.Марка отлично подойдёт клиентам, у которых нет верстальщика в штате.Плагин для Фигмы гораздо эффективнее классических блочных редакторов: у последних много ограничений при подготовке письма.У Marka Email Generator есть свой обучающий мануал, но подойдёт он не всем. Для правильной работы нужно разбираться в Фигме хотя бы на среднем уровне.
===========
Источник:
habr.com
===========
Похожие новости:
- [Интернет-маркетинг, Email-маркетинг] Как сделать email-рассылку более эффективной с помощью сплит-тестов?
- [Информационная безопасность, Разработка веб-сайтов, Habr, Тестирование веб-сервисов] Подробное руководство по HTML инъекциям (перевод)
- [Open source, JavaScript, HTML, Canvas, Инфографика] Опыт использования транслятора OberonJS для создания редактора интерактивных моделей
- [JavaScript, HTML, Canvas, Визуализация данных, Дизайн игр] Индикатор искусственного горизонта на HTML5 canvas
- [Разработка веб-сайтов, JavaScript, HTML, Расширения для браузеров] Растянуть видео в браузере
- [Веб-дизайн, Разработка веб-сайтов] Конвертация SVG в PNG: а воз и ныне там, но есть варианты
- [Интернет-маркетинг, Email-маркетинг] Выбираем лучшее время для проведения email-рассылки
- [Разработка веб-сайтов, CSS, JavaScript, Программирование, HTML] Современный стартовый HTML-шаблон
- [Клиентская оптимизация, Управление сообществом, Управление e-commerce, Контент-маркетинг, Email-маркетинг] What is an SEO Company?
- [Разработка веб-сайтов, Разработка мобильных приложений, HTML] html2json
Теги для поиска: #_html, #_verstka (вёрстка), #_emailmarketing (email-маркетинг), #_emailrassylka (email-рассылка), #_figma (фигма), #_html
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:40
Часовой пояс: UTC + 5
Автор | Сообщение |
---|---|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
Речь пойдёт о Marka Email Generator. Это новый плагин для Фигмы — инструмента, в котором мы работаем с дизайнами и прототипами писем.До 2019 года мы знали два способа создания вёрстки: в редакторе кода и в блочных редакторах. Идеальный блочный редактор пока не изобрели, поэтому свою агентскую вёрстку мы создавали в редакторах кода. До настоящего момента.В конце 2019 года появился плагин для Фигмы, который позволяет, при соблюдении определённых правил при создании дизайн-макета, выгружать макет в готовое для отправки письмо.В начале возможности плагина были ограничены, но идея нас зацепила. На тот момент казалось, что плагин может облегчить процесс создания простых дайджестов и триггеров. Мы познакомились с разработчиком плагина Григорием Машковцевым и предложили свою экспертную помощь в развитии продукта.Мы предлагали разработчику исправления и фичи, участвовали в тестировании. В процессе работы над плагином стало очевидно, что мы недооценивали потенциал продукта, ведь в новом инструменте удалось реализовать поддержку даже самых сложных подходов и особенностей email-вёрстки.Возможности плагина
Вёрстка писем в редакторе кодаСоздание письма в блочном редактореИспользование плагина MarkaТрудозатратыНеобходим верстальщик, который воплотит в коде дизайн письма. Наиболее трудозатратный способ.Чаще всего верстальщик не нужен. Письмо собирает менеджер или дизайнер.Верстальщик не нужен. Письмо собирает менеджер или дизайнер.Возможности дизайнаОграничены уровнем верстальщика и здравым смыслом.Ограничены предустановками и функциональностью блочного редактора. Невозможно реализовать нестандартные решения без вкрапления вёрстки.В некоторые редакторы можно внедрить свой дизайн блоков, но для этого необходим верстальщикОграничены только логикой структуры макета, которую необходимо поддерживать для возможности выгрузки.Качество кодаЗависит от уровня верстальщика.В большинстве современных редакторов оставляет желать лучшего.На уровне вёрстки писем агентства Email Soldiers.Pixel Perfect — попадание вёрстки в макетПолностью в руках верстальщика и зависит от опыта.100% Pixel Perfect100% Pixel PerfectОбъём кодаЗависит от уровня верстальщика. При высоком уровне — минимальный объём кода.Большой. Очень большой.СреднийУдобство модификации и повторного использованияВерстальщики повторно используют решения, но от дизайнеров часто приходят задачи, требующие вёрстки с нуля.По сути работа строится на использовании готовых решений.Работа с адаптированным мастер-шаблоном напоминает работу с блочным редактором.Боевое применение нового плагина для ФигмыЛетом продукт был готов к практическому использованию. Мы закрыли несколько проектов, где плагин заменил классическую вёрстку.Одним из первых заказчиков, для которых мы использовали новый инструмент, стал туроператор «Алеан». Мы адаптировали дизайн мастер-шаблона под логику Marka Email Generator. Финальная сборка писем сейчас производится на стороне заказчика и напоминает работу с блочным редактором.Ещё одна работа — письма для агентства i-Media: Что говорят клиентыТуроператор «Алеан» Анна Сахарова, интернет-маркетолог туроператора Алеан: Технология Marka Email Generator вызвала у нас большой интерес: из макета, сделанного в Фигме, буквально за пару секунд получается письмо, свёрстанное в лучших практиках HTML.Ребята из Email Soldiers подготовили для нас два мастер-шаблона, с блоками, которые можно в различных конфигурациях применять в письмах. Из них мы создали уже около 20 разных писем. Очень трудно остановиться на стандартном шаблоне, когда можно постоянно применять что-то новое ?Что нам понравилось:Самое главное — возможность самостоятельно создавать красивые дизайнерские письма, где блоки компонуются в разных вариациях. Этих возможностей не хватает в стандартных шаблонах сервисов рассылок.Перед выгрузкой письма из Фигмы можно сразу проверить, как оно будет выглядеть в десктопной и мобильной версии.Сразу в Фигме можно обработать довольно много изображений и даже gif-анимацию и вставить в письмо.Плагин стоит всего 7$ в месяц.Ребята готовы помогать в работе с плагином и гибко совершенствовать функционал для удобства работы с ним.
Мария Гудкова, маркетолог i-Media:У нас в i-Media 13 услуг, которые мы продвигаем и пять отраслей бизнеса, на которые мы нацелены. Под каждую услугу и отрасль регулярно верстаем email-рассылки, отправляем дайджесты для клиентов и наших сотрудников. В месяц у нас выходит от трёх до восьми писем.До внедрения плагина отправка рассылки запускала долгий процесс подготовки, от которого становилось немного дурно. Сначала отрисовка уникального дизайна, потом вёрстка писем, потом опять мы бежали к дизайнеру, потому что на тестах какой-нибудь элемент стремился занять не своё место. В общем, каждый раз мы испытывали себя на терпимость.Пару месяцев назад мы одними из первых попробовали плагин Marka Pro и, если честно, очень сомневались и переживали. Думали, что ручной труд профессионального верстальщика заменить невозможно. Но мы попробовали и не пожалели.Теперь маркетологи сами справляются со всем процессом. Тратим гораздо меньше времени и сил на email-письма. С плагином от идеи до отправки письма проходит не больше 2 часов.
Андрей Ведерников, дизайнер Creative Soldiers: Фигма — простой графический редактор без излишеств, у неё нет, как в Фотошопе, множества функций. Но, несмотря на простоту Фигмы, в неё удалось добавить сложный плагин, от которого наши дизайнеры, верстальщики и разработчики до сих пор под впечатлением. Он генерирует html-код для писем прямо из дизайн-макета.Подойдёт не любой дизайн-макет, а только который сделан по правилам разработчика плагина. В гайде к Marka описаны основные функции плагина для Фигмы и даны подробные разъяснения про его работу. Но главное, что нужно для успешной работы с Marka, — практика. Мы до сих пор открываем для себя особенности этого инструмента.Работая с Marka, нужно мыслить блочно, создавать блочную модель исходного макета. И в этом плагине всё идёт в работу, каждая кнопочка несёт свою функцию и каждая функция плагина привязана к какому-то элементу интерфейса.Можно загружать любые изображения, любой текст — всё автоматически переходит в код.Раньше при сборке мастер-шаблона, чтобы что-то там изменить, необходимо было идти в код. То есть клиент вносит правки текстом или другим образом, а верстальщик идёт в код и правит. Сейчас клиент самостоятельно заходит в макет и меняет его.Подводные камни нового плагина для ФигмыОсобенности плагина обнаруживаются, в большинстве своём, методом проб и ошибок.Можно изучить гайд для разработчиков, но что-то придётся открывать напрямую в работе. Например, в письмах задан кёрнинг (расстояние между буквами) в 3%, а плагин для Фигмы не считал эту информацию. Приходится поправлять руками.Ещё пример: мобильная версия рассылок работает не так, как на сайтах, и в Marka есть возможность перенести картинку на следующую строку мобильной версии, тогда как в веб-версии картинки расположены на одной строке. Обнаружили это тоже только на практике.Плюсы MarkaЗдесь я вижу один весомый плюс, который перевешивает все недостатки: с новым плагином всё делается быстрее — и дизайн, и вёрстка электронных писем, при этом дизайнер может выступать в роли верстальщика, не затрагивая вёрстку.
Сергей Соболевский, интернет-маркетолог Email Soldiers:Я часто занимаюсь задачами связанными с мастер-шаблонами, и создание таких шаблонов отнимает много времени у команды. Новый плагин для Фигмы помогает отказаться от работы верстальщиков, а по качеству исполнения не уступает результату работы специалиста.Марка отлично подойдёт клиентам, у которых нет верстальщика в штате.Плагин для Фигмы гораздо эффективнее классических блочных редакторов: у последних много ограничений при подготовке письма.У Marka Email Generator есть свой обучающий мануал, но подойдёт он не всем. Для правильной работы нужно разбираться в Фигме хотя бы на среднем уровне.
=========== Источник: habr.com =========== Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:40
Часовой пояс: UTC + 5