Верстка писем для email рассылки конструктор

Обновлено: 26.04.2024

Для запуска собственной email-рассылки предварительно нужно создать письмо со всей необходимой информацией, оформленной в нужном стиле. Сделать это можно двумя способами – сверстать все с нуля либо воспользоваться специальными сервисами.

Первый способ подойдет в тех случаях, когда нужно создать уникальный дизайн с особым функционалом. Такой вариант может обойтись в круглую сумму, так как потребуется отдельный специалист – верстальщик.

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

Почему конструктор писем и как его выбрать

В любом поисковике вы можете найти сотни различных сервисов для создания писем – от бесплатных, с минимальным функционалом, до платных, способных стать заменой верстальщику.

Чаще всего конструктор выбирают потому, что:

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

Чтобы подобрать конструктор, который удовлетворяет этим требованиям, рекомендую обращать внимание на следующие моменты:

количество доступных шаблонов;
кастомизация письма;
простой и понятный интерфейс сервиса;
интеграция с почтовыми сервисами;
возможность сохранять письмо в формате HTML-кода;
наличие тестового периода.

Для вашего удобства ниже я рассмотрел наиболее успешные конструкторы, которые охватывают большинство вышеупомянутых критериев.

Топ-7 конструкторов писем

Stripo

Первый сервис в списке – Stripo. Это бесплатный инструмент для конструирования писем с возможностью подключения платных подписок с расширенным функционалом. Из особенностей стоит отметить открытый HTML/CSS-код и drag-and-drop редактор, с помощью которого можно создавать письма простым перетаскиванием элементов.

Плюсы:

более 300 бесплатных шаблонов;
доступна инструкция, которая поможет быстро разобраться со всем функционалом сервиса;
шаблоны с поддержкой AMP (технология для ускорения тяжелых страниц).

Минусы: это очень популярный сервис на территории СНГ, поэтому ваши письма могут быть похожи на письма конкурентов

Стоимость: есть бесплатная версия с ограничениями (до 4 экспортируемых писем в месяц), платные тарифы начинаются от 150$ в год

Официальная страница: Stripo

Topol

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

Плюсы:

более 100 адаптивных шаблонов;
разработка шаблона в команде;
экспорт в виде HTML-кода;
блоки с видео и гифками;
предварительный просмотр для десктопной версии.

Минусы:

нельзя посмотреть, как выглядит письмо на разных устройствах.

Стоимость: есть бесплатный тариф, а также тестовый период для про-версии на 14 дней со всем функционалом, стоимость платного тарифа – $15/месяц

Официальная страница: Topol

MakeMail

Это бесплатный сервис с интерфейсом на русском языке для создания адаптивных писем. В нем предусмотрена возможность настройки шаблона с одной, двумя или тремя колонками. Из базовых элементов доступны контакты, изображения, текст, ссылки на соцсети, таблицы, отступы.

Плюсы:

встроенный конструктор с понятным интерфейсом, позволяющий создавать письмо простым перетаскиванием элементов;
автоматическое тестирование шаблона письма.

Минусы:

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

Стоимость: бесплатно

Официальная страница: MakeMail

Postcards

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

Плюсы:

100+ модулей;
поддержка Google Fonts, экранов Retina;
возможность редактировать письмо в команде;
хорошая обратная связь в платной версии.

Минусы:

бесплатно доступен только 1 модуль из 8;
нет готовых шаблонов и стандартных блоков.

Стоимость: есть бесплатная ограниченная версия, платная начинается от $17/месяц

Официальная страница: Postcards

Cheapsender

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

Плюсы:

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

Минусы:

единый тариф для конструктора и email-рассылки.

Стоимость: от 70 рублей

Официальная страница: Cheapsender

EmailFactory

Еще один конструктор с бесплатным тарифом, позволяющий использовать 8 шаблонов и добавлять блок с логотипом. Из особенностей EmailFactory стоит отметить функцию, которая автоматически подставляет основную информацию с сайта в шаблон. При первом входе находит на сайте логотип, корпоративные цвета, контакты, ссылки на социальные сети и другие общие данные.

Плюсы:

100+ готовых модулей;
экспортировать письмо в сервис рассылки можно на бесплатном тарифе;
есть предварительный просмотр письма в десктопном и мобильном форматах;
встроенный редактор изображений и HTML;
совместная работа над шаблоном.

Минусы:

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

Стоимость: есть бесплатный тарифный план, платные начинаются от 750 рублей в месяц

Официальная страница: EmailFactory

Campaign Monitor

Последний сервис, о котором мы поговорим – Campaign Monitor. Полноценное использование конструктора обойдётся вам в $9+ ежемесячно. Данный сервис включает в себя все инструменты, необходимые для кастомизации рассылок: создание писем, их автоматизацию, анализ каждой кампании.

Плюсы:

работает по принципу drag-and-drop;
шаблоны одинаково корректно отображаются на разных устройствах;
есть возможность сохранять черновики в HTML.

Минусы: нет пробной версии, довольно большая стоимость по сравнению с альтернативными решениями

Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.

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

Допустим, вы хотите сверстать рассылку

Первый вариант: создать новый HTML-документ, взять готовый бойлерплейт (например, популярные Cerberus или Responsive Email Framework) и засесть писать таблицы с инлайн-стилями, гугля в процессе недостающие хаки или фиксы для внезапно поехавшей в каком-нибудь Gmail для Android вёрстке. Этот вариант подойдет, если у вас за плечами есть определённый опыт в вёрстке писем, достаточно свободного времени, а задача — это вёрстка единичного и простого письма.

Пример шаблона письма, который «из коробки» доступен в Cerberus

Второй вариант: воспользоваться онлайн-редактором для создания шаблона (например, Mosaico или Stripo). Это — самый простой способ. Он отлично подойдет, если вы — не разработчик или же если сталкиваетесь с вёрсткой рассылки впервые и макет письма достаточно простой. Почти все онлайн-редакторы предоставляют готовые шаблоны, а также включают в исходный код шаблона хаки для корректной работы письма в популярных email-клиентах. Но эти инструменты практически не позволяют вам кастомизировать вёрстку письма под ваш конкретный макет и в целом дают очень слабый контроль как кода, так и внешнего вида письма.

Изменения шаблона письма в конструкторе писем Stripo

Третий вариант: использовать email-фреймворк. Если вам регулярно приходится верстать рассылку, если макеты писем сложные, а требования к ним строгие, и если вы хотите автоматизировать свой воркфлоу и частично процесс разработки письма, то этот вариант для вас. Я расскажу о двух самых мощных инструментах: MJML и Foundation for Emails (в молодости известном как Ink).

Используем готовый email-фреймворк. MJML

Github:mjmlio/mjml
Разработчик: Mailjet
Дата выхода: 2016
Лицензия: MIT
Популярность: 7662+ звёздочек
Шаблонизатор: MJML

Главные идеи, заложенные во фреймворк:

responsive-шаблоны «из коробки»,
упрощение работы с кодом посредством собственного шаблонизатора,
набор готовых к использованию внутри письма компонентов,
удобная интеграция в процесс разработки рассылки.

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

MJML предоставляет плагины для популярных текстовых редакторов — Visual Studio Code, Atom и Sublime Text. Они добавляют подсветку синтаксиса языка, линтер и вкладку с превью верстаемого письма прямо в самом редакторе.

Если вам не хочется заморачиваться с cli или текстовыми редакторами, то есть отдельное официальное мультиплатформенное десктопное приложение, со встроенным полноценным редактором кода, просмотрщиком готовых шаблонов для писем и live-preview вашего письма.

Помимо набора стандартных компонентов (таких как кнопка или карусель) существуют готовые кастомные компоненты (например, компонент для рисования графиков). На странице с дополнениями от сообщества можно найти полезные утилиты, например загрузчик MJML для WebPack или инструмент интеграции в MJML-приложение на Laravel. А не так давно в статусе беты появилась возможность использовать API MJML для генерации писем напрямую, например, внутри мобильного приложения. Вещь довольно специфическая, но своего пользователя наверняка найдёт.

Главным минусом фреймворка одновременно является один из его плюсов: «отзывчивость». Фреймворк автоматически и без вмешательства разработчика берёт на себя то, как шаблон письма будет вести себя на девайсах с небольшой шириной размера экрана. Это выливается в ограничение в четыре колонки в сетке и отсутствие возможностей подтюнить responsive-поведение макета под свои нужды.

Небольшая, но приятная деталь: на сайте в разделе с документацией есть раздел с СanIUse-подобным описанием поддерживаемости компонентов MJML в различных имейл-клиентах. Можно сразу проверить на сайте и не гадать, как поведёт себя письмо, например, в Outlook 2007.

Итог: MJML — очень мощный и простой в освоении инструмент для создания responsive-писем. Сложности могут возникнуть, только если вам нужна очень тонкая, pixel perfect настройка шаблонов.

Используем готовый имейл-фреймворк. Foundation for Emails

Github:zurb/foundation-emails
Разработчик: ZURB
Дата выхода: 2015
Лицензия: MIT
Популярность: 6885+ звёздочек
Шаблонизатор: Inky

Если вы не первый год в мире фронтенда, то наверняка слышали (но — готов поспорить — вряд ли исползовали ;)) о Foundation for Sites. Этот фреймворк, созданный разработчиками из компании ZURB, давно закрепил за собой статус второго место по популярности (после Bootstrap) среди фронтендных веб-фреймворков.

Foundation for Emails сделан теми же людьми и по сути является частью Foundation for Sites. Это дает ему как ряд преимуществ (крупная компания-разработчик, довольно большое комьюнити, все, что вам нравилось в Foundation for Sites), так и накладывает ряд ограничений (все, что вам не нравилось в Foundation for Sites, не понравится и в Foundation for Emails).

Первое, что нужно сделать, если вы решите попробовать фреймворк, это установить Foundation CLI:

npm install --global foundation-cli

После чего можно создать новый проект командой:

foundation new --framework emails

и приступать к разработке письма.

Правда, придётся подождать несколько минут, пока загрузятся все необходимые модули и компоненты. Так как скачивается большое количество файлов, не удивляйтесь размеру папки — пустой проект будет весить 400+ мб. Помимо cli, «из коробки» доступен Live Reload, базовый бойлерплейт со всеми необходимыми хаками, готовые шаблоны и партиалы, а также поддержка SASS.

Файловая структура проекта на Foundation for Emails

У FfE свой шаблонизатор — Inky. По свой сути он делает то же, что и шаблонизатор MJML — упрощает работу со сложными вложенными таблицами с помощью shorthand-тегов:

Всего тегов около десяти, три их них используются для создания сетки (см. пример выше), тег block-grid — для создания блочной сетки, еще два тега — меню (menu и item), а названия еще двух говорят сами за себя: button и callout.

FfE использует 12-колоночную сетку, которая может быть упрощена до 2-х, 3-х, 4-х или 6-ти колоночной, а также позволяет задавать количество колонок отдельно для мобильного и десктопного состояний.

Система партиалов (partials) и хелперов реализована с помощью файлового компилятора Panini, который внутри себя использует простой и удобный движок шаблонизатора Handlebars.

В отличие от MJML, при использовании FfE создаётся две версии письма — одна для десктопных клиентов и одна для мобильных. Далее вы решаете на каком брейкпоинте нужно выполнить переключение состояний desktop/mobile, а также можете включить или выключить какие-либо блоки вашей верстки с помощью специальных классов: .hide-for-large и .show-for-large.

Итог: Foundation for Emails предоставляет полный контроль за вёрсткой письма как для его десктопного, так и мобильного её состояния. Сложности могут возникнуть в процессе погружения в фреймворк и при попытке разобраться с его тонкостями, так как он достаточно большой и сложный. Но если вы хотите контролировать каждый аспект вашего шаблона — ваш выбор Foundation for Emails.

Инструменты для тестирования рассылки

Итак, наша рассылка готова. В браузере она выглядит отлично. А как насчет Outlook и мобильных email-клиентов? Самое время обратиться к специализированным сервисам для тестирования рассылки: Litmus и Email on Acid.

Тестируем рассылку с Litmus

Litmus предоставляет полный набор инструментов, которые могут понадобиться при тестировании рассылки. Это и веб-ide для редактирования html-кода (Builder), и система аналитики рассылки, и набор «чеклистов» — инструментов тестирования производительности, проверки письма на «спамность» и многое другое.

Самый важный «чеклист» — Email Preview — дает возможность проверить письмо в 90+ десктопных/мобильных/веб email-клиентах. Делается это парой кликов. Нужно вставить код письма в Builder, нажать на кнопку тестирования и выбрать нужные email-клиенты.

Недавно разработчики добавили крутую фичу: инспектор обработанного email-клиентом html-кода (processed html). Он немного напоминает инспектор из dev-tools вашего любимого браузера: можно выделить определенную область письма и посмотреть её код. Это очень помогает разбирать клиентоспецифичные проблемы не прибегая к правкам в слепую с последующим просмотром результата в Email Preview.

Просмотр Processed HTML в Litmus

У Litmus я нашел два минуса. Первый — это неотзывчивость UI в целом и лаги Email Preview, которые происходят время от времени и заставляют тратить достаточно много времени на ожидание создания превью и повторно запускать тесты.

Тестируем рассылку с Email On Acid

Второй сервис, о котором я хотел бы рассказать, это Email On Acid. Его можно смело назвать «младшим братом» Litmus практически по всем аспектам.

Судите сами: web-ide для редактирования рассылки — есть, инструменты для аналитики письма — есть, тестирование на «спамность» — есть, и — конечно же — Email Testing в 70+ приложениях тоже есть.

Превью писем сделано практически так же, как в Litmus. Отличия в основном во внешнем виде, опций/настроек чуть поменьше, нет инспектора обработанного кода письма и некоторых других менее полезных инструментов. Но UI EoA удобнее и легче, чем у Litmus и работает практически без лагов. Тестирование писем происходит примерно раза в полтора быстрее.

Последний немаловажный фактор: цена. Email on Acid в два раза дешевле Litmus при очень схожем функционале. И нет никаких ограничений на количество превью вашего письма. Это несомненный вин EoA.

Что выбрать?

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

Если же рассылками вы занимаетесь эпизодически, то есть два альтернативных варианта:

использовать триал Litmus/Email on Acid на 7/14 дней (в зависимости от сервиса) — деньги за первый месяц вернутся вам на карту;
воспользоваться комбинацией менее популярных сервисов, у которых есть бесплатные планы, а в части email-клиентов протестировать вручную.

Вот какие сервисы можно хоть и ограниченно, но использовать бесплатно:

(Gmail для Chrome/FF/IE, Thunderbird, Apple Mail для iOS7); (Thunderbird 2/3, Outlook 2003/2007/2010/Outlook Express); (Outlook 2003, Gmail в IE); + PilotMailer (онлайн-сервисы для отправки кода письма на любые адреса, удобно использовать для ручного тестирования рассылки);

Что бы вы не выбрали в конечном счете, главное, чтобы инструмент соответствовал вашим потребностям.

Заключение

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

Если вы верстаете письма редко и они в целом несложные — смело берите базовый бойлерплейт, верстайте и тестируйте «вручную». Как вариант, воспользуйтесь бесплатными сервисами для тестирования.

Если же с вёрсткой писем приходится сталкивать на регулярной основе, а макеты попадаются сложные и адаптивные, то MJML и Foundation for Email возьмут часть забот на себя. А Limus и Email on Acid сэкономят массу времени и нервных клеток в попытке победить какой-нибудь надоедливый Outlook или Gmail на Android.

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

Я решила разобраться с тем, какие вообще инструменты создания адаптивных писем существуют сегодня, и выбрал наиболее простые в использовании, функциональные и свежие. Поехали!

Типы систем для создания писем

Инструменты категории email builders делятся по типам на основе принципов своей работы и целевой аудитории. Вот некоторые из них:

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

Email-фреймворки – как правило такие инструменты используют какой-то язык разметки, а описанный с его помощью шаблон затем конвертируется в адаптивный HTML.

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

Drag-n-drop редакторы – такими инструментами чаще пользуются маркетологи. По аналогии с конструкторами сайтов здесь шаблоны писем собираются в визуальном редакторе из доступных элементов. Как правило, это облачные сервисы, хотя есть и исключения, о которых ниже.

В этой статье я сфокусируюсь на последней категории инструментов.

Облачные drag-n-drop редакторы

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

С помощью этого инструмента можно создавать в drag-n-drop редакторе письма, комбинируя более 100 готовых элементов и 900 шрифтов. После того, как шаблон создан в конструкторе, его можно экспортировать в HTML, причем он будет адаптивным – то есть письмо будет нормально выглядеть в подавляющем большинстве существующих почтовых клиентах и приложениях.

Из плюсов Postcards:

возможность командной работы – можно расшарить доступ к шаблону коллегам;

версионность – это важно как раз для совместного редактирования шаблона;

неограниченное число экспортов шаблонов – некоторые сервисы ограничивают это.

Еще один grag-n-drop редактор. Пользователи могут выбирать примерно из 10 шаблонов в бесплатной версии. Можно и создать собственный шаблон из готовых блоков, причем результат получится адаптивным – разработчики заявляют о поддержке более 90% десктопных, мобильных и веб-клиентов электронной почты.

Десктопные приложения

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

Это десктоп-приложение для Mac. С его помощью можно разрабатывать шаблоны рассылок электронной почты. Как и в случае BEE, здесь есть более 80 готовых шаблонов, которые можно дорабатывать.

Редактор также работает по принципу drag-n-drop и позволяет изменять графические элементы, добавлять анимации из специальной библиотеки, кастомизировать тексты, используя различные шрифты.

Этот инструмент работает на платформе Windows. В отличие от Mail Designer 365, здесь есть не просто триал, а возможность бесплатного использования с ограниченной функциональностью.

Что еще: встраиваемые плагины

При этом, в Unlayer нет готовых шаблонов, которые можно было бы кастомизировать – придется разрабатывать свои с нуля. Среди интересных и полезных именно для разработчиков фич – возможность сохранить шаблон в формате JSON.

Заключение

Как видно, сегодня создавать адаптивные почтовые рассылки можно и без серьезных навыков программирования. При этом выбрать подходящий для конкретной задачи инструмент не всегда просто – нужно изучить набор функций и цену на подписку, понять, насколько велика библиотека графических элементов, есть ли интеграции со сторонними сервисами рассылки для автоматизации email-маркетинга. Надеюсь, этот материал послужит неплохой отправной точкой для такого анализа.

Какими инструментами для создания адаптивных писем пользуетесь вы? Пишите в комментариях – соберем самый подробный список в одном месте.

Вёрстка HTML для электронной почты — интересная и довольно сложная задача.

Электронная почта — отличный инструмент коммуникации, который позволяет компаниям доставлять аудитории контент удобным для нее способом. При этом читать письма в формате plain text не всегда удобно, поэтому в современных новостных рассылкахиспользуются различные графические элементы.

Письма должны одинаково хорошо отображаться на старых устройствах и версиях программных клиентов.

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

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

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

Если вы собираетесь верстать письма вручную или использовать готовый шаблон, стоит придерживаться двух основных правил создания HTML для электронной почты:

Необходимо использовать таблицы HTML для большего контроля над шаблоном письма. Даже если вы привыкли полагаться на CSS в вебе — не переносите эту привычку в мир email, потому что это не сработает при том разнообразии клиентского софта.
Используйте встроенный CSS (inline) для получения большего контроля над другими элементами письма (шрифты, цвет фона и т.п.) — вот отличная версияCSS Inlinerот «Печкина».

Самый простой способ увидеть, как HTML-таблицы и встроенный CSS могут использоваться в шаблонах email-писем — это скачать некоторые такие шаблоны с сайтов компаний Campaign Monitor и MailChimp (прим. пер: вот здесь собраны примеры дизайна email-рассылок клиентов сервиса Pechkin-mail).

При изучении этих шаблонов будут заметны несколько вещей, которые мы подробнее обсудим далее:

Объявления стилей CSS располагаются после тега , а не между тегов ;
Не используются сокращения CSS: вместо сокращенного правила для стиля font: 12px/16px Arial, Helvetica, следует создать отдельные сущности для каждого шрифта, с прописыванием им значений font-family, font-size и line-height;
span и div используются редко и для реализации конкретных эффектов, основную же работу по описыванию шаблона письма берут на себя таблицы HTML;
Стили CSS также используются на базовом уровне, без применения каких-либо CSS-файлов.

Да, таблицы вернулись. Да, веб уже далеко ушел вперед, но мы-то не в вебе! Из всего многоорбазия email-клиентов найти такой, который бы обладал широкой и качественно поддержкой CSS — та еще задача. Это значит, что мы просто вынуждены использовать таблицы, если хотим, чтобы создаваемые письма рассылок консистентно отображались у каждого читателя.

Так что придется отложить в сторону лучшие практики соответствия веб-стандартам и засучить рукава, разбираясь в вёрстке.

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

Одноколоночный шаблон, как правило, состоит из:

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

Вот какой подход можно использовать при создании HTML-писем:

Этот подход может вызвать недовольство поклонников разработки по последним стандартам, но это единственный путь добиться приемлемого результата. К тому же использование табличной вёрстки вовсе не подразумевает использование устаревших методов в других аспектах создания email-рассылок. К примеру, неважно, как плохо Lotus Notes отображает HTML, никогда не нужно обходить это с помощью тега . И даже при всех минусах движка рендеринга HTML в MS Outlook 2007, с таблицами он справляется вполне хорошо.

Конечно, везде есть сложности. В следующем разделе статьи поговорим о стилях.

Выше мы говорили о том, что многие email-клиенты не сильны в поддержке CSS. Однако это не значит, что вы не должны использовать стили в своих письмах, сверстанных с помощью таблиц. Нужно лишь учитывать несколько моментов.

Прежде всего, следует использовать встроенные стили, чтобы хранить в них всю нужную информацию, как показано ниже:

Не нужно использовать объявление CSS в HTML-теге , как часто делают при вёрстке веб-страниц. Вместо этого объявление нужно разместить сразу за тегом — однако Gmail ищет любые теги style в письме и удаляет их. Кроме того не стоит даже тратить время на использование элемента link для того, чтобы сослаться на внешний файл стилей: популярные email-клиенты проигнорируют, изменят или удалят такие обращения к внешним сущностям.

Для таблицы-контейнера, в которой хранятся таблицы заголовка, контента и футера, следует установить ширину на уровне 98%. Некоторым почтовым клиентам (например, Yahoo) нужна прокладка по 1% с каждой стороны письма, чтобы его корректно отобразить. Если боковые элементы критически важны для вашего письма, то лучше уменьшить ширину таблицы до 95% или даже 90%, чтобы точно избежать возможных проблем. При этом таблицы внутри контейнера, само собой, должны иметь ширину в 100%.

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

Теги полезны время от времени, а вот работает всегда — потому что с его помощью как раз и встраиваются элементы. В некоторых случаях теги могут быть использованы не только для установки цвета и размера текста: с их помощью текст можно размещать над или под контентом.

Важный момент: некоторые сервисы email-рассылок могут распаковывать определения стилей, чтобы сделать их более явными и, соответственно, более читабельными для почтового софта. К примеру, сокращение CSS style=”margin: 10px 5px 10px 0;” может быть развернуто в более длинное объявление, которое показано выше по тексту. Перед рассылкой следует протестировать разные варианты писем и посмотреть, что происходит с кодом после отправки. В начале лучше использовать сокращения CSS, поскольку даже в самом плохом случае, так или иначе почтовые клиенты смогут их понять.

Если скачать и изучить шаблоны писем с сайтов вроде MailChimp или Campaign Monitor, то станет ясно, что в них таблица-контейнер рассматривается в качестве HTML-тега . Например, команда сервиса Campaign Monitor обращается к этой таблицы как к“BodyImposter” — отличный способ представления таблицы-обертки. С точки зрения CSS, таблица-контейнер делает ровно то, что делал бы элемент , если бы сервисы вроде Gmail его не игнорировали.

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

Следующим шагом является тестирование получившегося письма на различных email-клиентах. Как правило, на этом этапе вылезут проблемы, для решения которых понадобятся те или иные хитрости.

Ниже представлены полезные приемы вёрстки, которые облегчают этап тестирования:

В дополнении к этому, рекомендуется следовать представленным ниже лучшим практикам:

Следует избегать использования JavaScript. Большинство email-программ его в любом случае отключат.
Если изображение «нарезано» и размещено в нескольких ячейках HTML-таблицы, нужно проверять письмо с помощью разных тестовых аккаунтов. Иногда бывает так, что письмо выглядит отлично в Outlook, изображение разъезжается в других почтовых программах. Кроме того стоит рассмотреть вариант, при котором изображение становится фоном для новой HTML-таблицы, которая заключает в себе все строки и столбцы той таблицы, в которой будут отображаться части картинки. Этим можно добиться такого же эффекта, как при «нарезке» изображения при меньшем количестве кода. Нужно помнить, что Outlook 2007 не показывает фоновые изображения — всегда важно тестировать письмо на наиболее важном и популярном у подписчиков почтовом сервисе.
Для фоновых изображений лучше использовать атрибут background вместо CSS. Это позволяет добиться большего единообразия при работе с различными почтовыми сервисами.
Хранить изображения из письма нужно на веб-сервере, в идеале, в папке, отличной от той, где хранятся картинки основного сайта компании (например, папка может называться /images/email), и их никогда нельзя удалять. Некоторые люди открывают письма недели и месяцы спустя их получения, используя их аналогично закладкам в браузере — чтобы вернуться к нужному контенту.
В изображениях необходимо использовать атрибуты alt, height и width. Задание значений этих элементов улучшает результаты при работе с Gmail. Кроме того, это позволяет шаблону письма не разваливаться, если пользователь отключил отображение картинок. Примечание: Outlook 2007 не распознает атрибут alt.
В тегах ссылок нужно использовать атрибут target=”_blank” — люди, которые читают письмо в веб-клиенте вряд ли захотят, чтобы ссылка открылась в том же окне.
Использование изображений размером 1x1 пиксель может помочь в выравнивании контента письма, однако часто такие следящие пиксели используют спамеры, чтобы понять, было ли открыто это письмо. Поэтому применение таких маленьких изображений повышает вероятность того, что письмо будет помечено почтовой системой, как спам.
Также не нужно использовать огромные изображения выше собственно письма — это еще одна излюбленная тактика спамеров, и фильтры этого очень не любят.

Очень важно удостовериться, что письмо отображается корректно в почтовых клиентах, в которых отключен показ изображений. В большом количестве email-клиентов по умолчанию эта настройка стоит на “off”. Это значит, что при использовании фонового изображения с белым текстом поверх него, при невозможности загрузки этой картинки, возникнут проблемы. Чтобы этого избежать нужно прописать тёмный фоновый цвет для этой части HTML-таблицы.

После настройки и проведения работ, которые привели к тому, что письмо качественно отображается на тестовых почтовых аккаунтах, можно «прогнать» его через финальный чеклист. Он может выглядеть так:

Отображается ли в поле «От кого» правильная информация (в виде имени, а не просто почтового адреса)?
Корректно ли заполняется строка темы письма?
Корректна ли и визуально очевидна контактная информация?
Есть ли в шапке письма пояснение о том, что «вы получили это письмо, потому что…» и ссылки для того, чтобы отписаться от рассылки в его подвале?
Есть ли в письме просьба добавить адрес отправителя в контакт-лист пользователя?
Есть ли в шапке письма ссылка для его отображения в веб-версии?

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

Gmail, Lotus Notes и Outlook 2007 ставят перед верстальщиками и дизайнерами новые вызовы. К примеру, в Outlook 2007 поддержка CSS значительно хуже, чем в предыдущих версиях сервиса.

В итоге Gmail ведет себя как артефакт из 90-х, когда веб-стандарты находились на примитивном уровне.

Прежде всего, Gmail удаляет CSS-стили, содержащиеся между любы тегами стилей, вне зависимости от того, в каком месте письма они будут обнаружены. Единственная альтернатива стилям — отображение шрифтов внутри HTML-таблиц, но при этом шрифт часто оказывается больше, чем предполагалось (вне зависимости от структуры HTML).

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

Вот несколько трюков, которые работают в Gmail и старых почтовых клиентах:

Помимо Gmail есть еще один «злой гений» среди почтовых сервисов — это Lotus Notes. Многие большие корпорации продолжают поддерживать и обновлять этот софт.

К сожалению, определить, какие компании используют Notes «извне» никак нельзя. Единственный выход — следовать лучшим практикам, описанным в статье. То есть, чем примитивнее код вёрстки, тем выше вероятность, что он будет хорошо работать с Notes.

Вот несколько советов, которые помогут убедить эту программу в том, что ваше письмо можно показать нормально:

Как обсуждалось выше, следует использовать таблицу-контейнер, в котой содержатся все внутренние таблицы шаблона (шапка письма, контент и подвал). Это позволит скрепить все части HTML-письма воедино, не позволил им разъехаться при отображении в Notes.
Следует оставлять прокладку из пустого места вокруг таблицы-контейнера, указав ширину в процентах (и задав ширину меньше 100%) и используя cellpadding как минимум величиной 5.
Нужно избегать использования объявления style в тегах письма . Notes, как и Gmail может удалить стили. Поэтому необходимо использовать встроенные (inline) стили в тегах , , ,
, и др.
Нужно использовать абсолютные URL для изображений, которые хранятся на веб-сервере. С привычкой Notes конвертировать изображения особо ничего не поделать, но хранение картинок на внешнем сервере может помочь.
Внутренни ссылки с якорями крайне редко (если не сказать никогда) не работают в Notes. Проще просто игнорировать ссылки, которые позволяют читателю перепрыгнуть на конкретный участок письма.
Следует избегать использования colspan в HTML-таблицах. Notes — особенно его ранние версии — может иметь дело только с простейшими табличными шаблонами.
Следует убедиться в корректности ширины ячеек . В отличие от веб-браузеров, которые самостоятельно приводят ширину ячейки к самой большой установленной величине, Notes установит ширину каждой ячейки ровно так, как она была для нее прописана.
Центрирование шаблона вряд ли сработает в Notes. Следует использовать шаблоны, выровненные по левому краю.

Использование этих техник позволит добиться хорошего рендеринга писем в Gmail и Lotus Notes и поможет качественного отображения в Outlook 2007, в котором применяется более старый движок рендеринга.

У Campaign Monitor есть довольно подробный список элементов CSS, которые поддерживаются популярными мобильными, веб и десктоп-почтовыми клиентами.

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

Ниже представлен простой набор определений @media для отображения одноколоночного шаблона с HTML-таблицами на телефонах и планшетах:

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

Многие люди, которым приходят те или иные почтовые рассылки, предпочитают просматривать HTML-письма, а не их plain text версии по целому ряду причин. Для разработчиков, однако, задача по созданию HTML-рассылки может быть не столь тривиальной.

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

Список источников для дальнейшего изучения:

Представленные ниже ресурсы содержат ценную информацию, которая поможет всем желающим лучше освоить вёрстку писем в HTML:

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

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

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

Подборку таких конструкторов мы собрали для вас, выбирайте и пользуйтесь :)

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

Лучшие конструкторы шаблонов e-mail рассылок

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

Stripo

Стоимость

Бесплатно, если вести один проект на аккаунте. На платных тарифах больше возможностей.

Возможности

Создание адаптивных шаблонов для писем, в том числе в формате АМP.
Работа в редакторе в двух режимах — в HTML и в визуальном drag-and-drop, если удобнее смотреть на блоки, а не на код.
Редактирование элементов письма в нескольких шаблонах одновременно.

Экспорт готовых email-шаблоны в популярные почтовые сервисы Gmail. Mailchimp, GetResponse, Campaign Monitor, UniSender, eSputnik и другие.
Встраивание редактора писем в свой инструмент рассылки с помощью плагина.

MakeMail от NotiSend

Стоимость

Возможности

Создание адаптивного шаблона письма: можно выбрать из предложенных и отредактировать или загрузить свой в HTML.
Работа в трех режимах редактора: блочном drag & drop, HTML и WYSIWYG.

BEE Free

Стоимость

На бесплатном тарифе доступен только редактор и экспорт шаблона с изображениями в HTML.

Интеграция с почтовыми сервисами, предпросмотр, хранение писем и другие возможности есть на платных тарифах от 15$ в месяц.

Возможности

Создание адаптивных шаблонов на основе каталога, разделенного по категориям писем: новостная рассылка, акции к Черной пятнице, анонс мероприятия и другие.
Работа в визуальном редакторе drag-and-drop, не требующем знаний HTML.

Предпросмотр писем в разных почтовых клиентах.
Экспорт HTML-файла. На платных тарифах интеграция с почтовыми системами GMail, Mailchimp, HubSpot и другими.
Встраивание в свои приложения с помощью плагина.

EmailFactory

Стоимость

Бесплатно для одного аккаунта с двумя проектами, до 50 шаблонов на одном проекте. Первым блоком письма будет промо-блок «Сделано в EmailFactory».

Платные тарифы снимают ограничения и открывают больше каталогов с шаблонами, стоимость от 750 рублей в месяц. Интеграция с почтовыми сервисами доступна на платном тарифе.

Читайте также: