Кейс: верстка HTML-листів для розсилки квитків

Згідно з дослідженням Adobe «Email Use 2017 – US Report», понад 60% інтернет-користувачів вважають за краще зв’язуватися з компаніями та брендами по електронній поштою. Ідентична картина спостерігається і ринку СНД. Пошта також дозволяє зручно контактувати з клієнтом, надсилати йому повідомлення. Цей інструмент можна всіляко використовувати в різних цілях – email продовжує грати величезне значення в маркетингових кампаніях.
Однак розсилок стало занадто багато – щодня в Мережі відправляється понад мільйон повідомлень. Обсяг ефективних листів при цьому становить не більше 30% від загальної маси. Це означає лише одне – email-кампанія або повинна бути якісною, або не бути взагалі.
У даному кейсі ми наведемо приклад рішення дуже локального, але вкрай важливого завдання клієнта – верстки E-mail повідомлення з квитком на концерт, а також нагадування про цей захід. Подивіться, як нам вдалося зробити дійсно якісний, зручний і зручний електронний лист!
Хитрості верстки HTML-листів на прикладі email-квитка
Замовником цієї роботи став сервіс BOMOND.COM — компанія, яка займається продажем квитків на концерти в США та по всьому світу. Головним завданням у цьому випадку було зробити адаптивний HTML-лист – квиток на концерт чи інший захід. У роботі над цим завданням були застосовані нестандартні рішення, про деякі з яких ми розповімо нижче.
Верстка електронного листа має важливі відмінності!
При верстці HTML листів існують спеціальні правила написання коду. Всі стилі повинні бути вбудовані — тобто свій стиль для кожного елемента. І нехай їх буде близько 1000 на сторінці — правило є правило, і його потрібно дотримуватись.
Весь код повинен писатися методами верстки 10-15-річної давності, коли більшість html-сторінок було написано через використання таблиць. Цей метод вимагає не поверхневих знань, а чіткого стека азів верстки кінця 90-х років.
Макет і створення листа
Що вийшло?


