Красивые e-mail письма. Почему это сложно

Красивые e-mail письма. Почему это сложно
г. Минск, ул. Старовиленская, 100, 4 этаж, пом. 1

Предисловие

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

  • заказ на покупку товаров;
  • заявка на оказание услуги;
  • запрос обратной связи;
  • справочная консультация;
  • регистрация в личном кабинете;
  • изменение пароля;
  • и т.д.

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

Рекомендации по внешнему виду

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

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

В целом рекомендован общепринятый подход к организации письма:

  • Хэдер логотип и ссылки на осн. разделы сайта
  • Сообщение письма информация, сообщающая клиенту, почему он получил это письмо
  • Список товаров таблица товаров, схожая по оформлению с корзиной на сайте
  • Контакты для обратной связи телефоны, мессенджеры, соц. сети, адреса и т. п.
  • Футер текст мелким шрифтом (некоторые юр. аспекты, кнопка «Отписаться» и т. п.)

Несколько примеров хороших шаблонов писем:

Шаблоны взяты с сервиса «Stripo»

В чём сложность?

Хоть письма и создаются (верстаются) HTML-кодом, как и сайты, но процесс этот намного более сложный и трудоёмкий. Вёрстка сайта должна обеспечить его «ровный» внешний вид исключительно для браузеров, специфика работы которых плюс-минус одинаковая. Но для прочтения электронной почты могут использоваться не только браузеры, но и различные моб. приложения и почтовые клиенты (программы на компьютерах). И разнообразие всех этих инструментов накладывает ряд обязательств и ограничений на вёрстку писем. Один перечень почтовых клиентов чего стоит:

  • MS Outlook 2010/2013/2016/2019
  • Apple Mail
  • Spark
  • Mozilla Thunderbird
  • Airmail
  • и т.д.

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

Чтобы обеспечивать работу вёрстки писем в таком количество сервисов необходимо учитывать много аспектов:

  • Большинство почтовых клиентов поддерживают далеко не все современные стилевые свойства (CSS);
  • Не всегда поддерживаются «новые» HTML-теги, приходится использовать устаревшие (, и др.);
  • Не все почтовые клиенты поддерживают даже такую простую вещь, как изображения;
  • Почтовые клиенты используют разные движки для обработки текстов, поэтому необходимо использовать спец. символы;
    Например, вместо простой записи " нужно использовать &laquо;
  • Специфические шрифты вообще нет возможности подключить, приходится использовать только те, которые предустановлены в операционных системах;
  • Многие провайдеры из соображений производительности обрабатывают только письма ограниченного размера (~100 Кб);
  • Неверное использование фоновых изображений может привести к попаданию письма в СПАМ;
  • Недопустима запись цветов в сокращённой форме;
    Вместо #fff нужно использовать #ffffff

И, поверьте, это далеко не полный список нюансов!

Чтобы оценить масштаб проблемы, давайте посмотрим пример оформления простого блока на сайте, и в электронном письме.

Внешний вид блока
Код блока на сайте
Код блока в электронном письме

Тестирование

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

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

Главные сервисы, в которых мы рекомендуем проверять вёрстку писем:

  • веб-интерфейс Яндекс
  • веб-интерфейс Gmail
  • веб-интерфейс Mail.ru
  • программа Outlook (Windows)
  • приложение Mail (iOS)
  • приложение Я.Почта (iOS и Android)
  • приложение Gmail (iOS и Android)

Что насчёт адаптивности?

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

Медиа-запросы

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

Пример адаптивной вёрстки

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

Резиновая вёрстка

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

Пример резиновой вёрстки

Такой подход весьма специфичен и мало применим, т.к. ширина экрана может очень разниться (от 320- до 2000+ px). И блоки, растянувшись в несколько раз по ширине, непременно потеряют целостность своего внешнего вида.

Контейнерная вёрстка

Для адаптивного решения электронного письма больше подходит другой подход — контейнерная вёрстка.

Пример контейнерной вёрстки

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

Вывод

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

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

Узнать стоимость и условия

* — поля, обязательные для заполнения
г. Минск, ул. Старовиленская, 100, 4 этаж, пом. 1