Партнёрская email-рассылка для SwimRocket: дизайн и адаптивная HTML-вёрстка

Клиент — проект SwimRocket (плавание, спортивные события).

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

Что требовалось:

— разработать дизайн письма в стиле проекта;

— сверстать его так, чтобы оно одинаково аккуратно выглядело на компьютере и на телефоне;

— подготовить вёрстку к загрузке в сервис рассылок без доработок на стороне заказчика.

Работа состояла из трёх частей: структура письма, дизайн блоков и адаптивная HTML-вёрстка.

Структура

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

Дизайн

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

Вёрстка

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

Подготовка к отправке

Заказчик получил готовый HTML-файл, подготовленный для загрузки в сервис рассылок, и макет письма.

Как это выглядит

Письмо на компьютере и на телефоне.

Заказчик получил готовое письмо: дизайн, адаптивную HTML-вёрстку и файл для загрузки в сервис рассылок.

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

• Структура ведёт от знакомства с проектом к кнопке действия.

• Вёрстка загружается в сервис рассылок без доработок.

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