Июнь 9, 2019, Автор Фролов Олег

Кейс: верстка HTML-писем для рассылки билетов

Кейс: верстка HTML-писем для рассылки билетов

Согласно исследованию 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.

Что получилось?

Кейс: верстка HTML-писем для рассылки билетов
Кейс: верстка HTML-писем для рассылки билетов
Кейс: верстка HTML-писем для рассылки билетов
Кейс: верстка HTML-писем для рассылки билетов

Над задачей работали:

Кейс: верстка HTML-писем для рассылки билетов
Павел Путинцев
Frontend Developer
Разработка пользовательских интерфейсов с клиентской стороны (front-end), создание сайтов. HTML/CSS/JavaScript
Sheptura
Алексей Шептура
CEO, партнер
Разработчик мобильных приложений для Android, веб-программист, разработчик сайтов на Wordpress. Владеет HTML, CSS, JS, PHP, Java.

1
Оставить комментарий

avatar
1 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
1 Авторы комментариев
Николай Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Николай
Гость
Николай

Молодцы, хорошая работа. Давно пора бы перевести всех на такие письма, т.к. скачивать и открывать с телефона не адаптивные PDF-ы и искать в них QR-код, увеличивать его уже довольно надоело


Scroll Up