Согласно исследованию Adobe «Email Use 2017 — US Report», свыше 60% интернет-пользователей предпочитают связываться с компаниями и брендами по электронной почте. Идентичная картина наблюдается и на рынке СНГ. Почта также позволяет удобно контактировать с клиентом, отправлять ему уведомления. Этот инструмент можно всячески использовать в различных целях – email продолжает играть огромное значение в маркетинговых кампаниях.
Однако рассылок стало слишком много – каждый день в Сети отправляется более миллиона mail сообщений. Объем эффективных писем при этом составляет не более 30% от общей массы. Это означает лишь одно – email-кампания или должна быть качественной, или не быть вообще.
В данном кейсе мы приведем пример решения очень локальной, но крайне важной задачи клиента — верстки E-mail уведомления с билетом на концерт, а также напоминания об этом мероприятии. Посмотрите, как нам удалось сделать действительно качественное, открываемое и удобное электронное письмо!
Хитрости верстки HTML-писем на примере email-билета
Заказчиком этой работы стал сервис BOMOND.COM — компания, которая занимается продажей билетов на концерты в США и по всему миру. Главной задачей в данном случае было сделать адаптивное HTML-письмо – билет на концерт или другое мероприятие. В работе над этой задачей были применены нестандартные решения, о некоторых из которых мы и расскажем ниже.
Верстка электронного письма имеет важные отличия!
При верстке HTML писем существуют особые правила для написания кода. Все стили должны быть встроенные – т.е свой стиль для каждого элемента. И пусть их будет около 1000 на странице – правило есть правило, и его необходимо придерживаться.
Весь код должен писаться методами верстки 10-15-летней давности, когда большинство html-страниц было написано через использование таблиц. Этот метод требует не поверхностных знаний, а четкого стека азов верстки конца девяностых годов.
Макет и создание письма
Макет разрабатывался несколькими специалистами и получился интересным, с бэкграундом и множеством абсолютных элементов. При этом при прокрутке бэкграунд остается на месте.
Письмо сделано адаптивным, оно отображается одинаково хорошо на всех устройствах, браузерах и почтовых клиентах. Чтобы реализовать этот момент, мы применяли разные кроссбраузерные технологии, вплоть до слежения за тем, через какой браузер открыто письмо. Сообщения были проверены в Outlook, Thunderbird, Gmail, а также на разных устройствах, начиная от старых смартфонах на базе Андроида и заканчивая новейшими Iphone.
Что получилось?
Над задачей работали:
Павел Путинцев
Front-end разработчик
Молодцы, хорошая работа. Давно пора бы перевести всех на такие письма, т.к. скачивать и открывать с телефона не адаптивные PDF-ы и искать в них QR-код, увеличивать его уже довольно надоело