Как сверстать письмо, которое затянет и восхитит подписчиков. «Глубокий» кейс EMAILMATRIX

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

Для собственной контентной рассылки мы в EMAILMATRIX тоже используем типовые решения, но регулярно создаём и нестандартные письма (мы называем их креативными). Так мы прокачиваем свои скиллы и демонстрируем их аудитории. И эти рассылки часто ставят передо мной нетривиальные вызовы.

Один из таких вызовов — письмо с анонсом статьи о скрытых смыслах CRM-маркетинга. Оно показало рекордный CTOR и принесло нам немало положительных отзывов. Расскажу, как решала сразу несколько задач с (морской) звёздочкой и почему не грех помучить дизайнера ради должного результата.

В креативных письмах задача верстальщика — не только сделать так, чтобы письмо корректно отображалось на всех устройствах, но и воплотить замысел дизайнера. На сей раз главной фишкой стала большая длина, а точнее, «глубина» письма. Обычно в рассылках стремятся к компактности — здесь же мы сделали всё наоборот.

Чтобы реализовать эту задумку, мы с Фай резали, удлиняли и перекрашивали фон, отдельно прорисовывали разные части письма…

Вот главные нюансы этой «глубокой» вёрстки.

Особенности письма начинаются ещё над водой, где на морской пейзаж накладывается логотип агентства. В самом расположении лого в «шапке» ничего необычного нет — но в этот раз из-за него мне пришлось отказаться от традиционной вёрстки изображений.

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

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

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

Следующий вариант: сверстать логотип контентом, а пейзаж фоном — тоже не устроил: нет нужного эффекта.

Чтобы сохранить «десктопный» вид логотипа и пропорции, я решила сверстать его как контент, а остальную надводную часть — как неадаптивный фон. При таком варианте края письма не будут видны в мобильной версии, а у нас там только волны, которыми можно пожертвовать:

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

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

Но фоновая картинка не инвертируется в тёмной теме. А вот лежащий поверх текст — ещё как. И если многие почтовики оставляют светлый текст светлым, то в Gmail на iOS с его полной инверсией цветов мы получили вот такое:

Мы с дизайнером добавили в градиент прозрачность. За счёт этого сквозь фон-картинку стал виден цвет, заданный для фона письма вёрсткой (это делается всегда — на случай, если изображение не загрузится). Он такой же, как у картинки, но инвертируется в светлый. Так тёмный текст стал читабельным.

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

На этом можно было бы закончить адаптацию для тёмной темы, если бы фон не содержал смысловых элементов. Морской пейзаж с 70-процентной прозрачностью градиента поблёк. Чтобы восстановить его красоту и контрастность, мы вернули прозрачность 100%.

Щупальца на самом «дне» — едва ли не главный визуальный элемент письма. По крайней мере, именно они в итоге получили больше всего положительных откликов.

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

Сначала «главное» щупальце (то, что тянется вверх) вело себя по-разному на экранах разной ширины — из-за изменения общей высоты письма при адаптации.

Сохранить щупальцу нужное место в мобильной версии оказалось самым сложным, но при этом и самым интересным.

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

Решение — увеличить длину основного фона и перекрасить низ градиента в контентной области. Найти оптимальные параметры с первого раза не получилось. Мы с Фай пробовали, дорабатывали, снова пробовали — и после нескольких неудач добились результата:

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

Оптимальной позицией оказался сдвиг 70% по горизонтали. Видимо, это наше счастливое число 🙂

Ещё один выбор, который мне нужно было сделать, — способ адаптации блоков с морской живностью и текстами. Можно сохранить их положение или перестроить по вертикали.

Макет подталкивал к первому варианту: Фай расположила реплики персонажей на одном уровне с ними самими. Но я выбрала перестроение, чтобы сохранить жутковатое впечатление от подводных жителей. Это способ позволил оставить их на маленьких экранах настолько большими, насколько это возможно. Сравните:

Я уже упоминала Outlook — главную «любовь» всех емейл-верстальщиков. Этот почтовик накладывает кучу ограничений на нашу работу. К тому же у него много версий и у каждой — свои особенности. Например, старые версии могут «разорвать» фоновую картинку, если она длиннее 2000 пикселей:

Чтобы наши подписчики с Outlook смогли оценить задумку, мы сделали для них отдельное письмо — минималистичную вариацию со ссылкой на полную веб-версию:

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

Нет, всё-таки без Outlook мне было бы гораздо скучнее!

С креативными рассылками бывает сложно: приходится строить гипотезы, ставить эксперименты, а часто и вовсе менять подход к вёрстке. Мне так хотелось воплотить в жизнь все идеи Фай, что я, наверное, замучила её созвонами, вопросами и просьбами попробовать вот так и вот так. Но в итоге мы нашли полезные решения на будущее и сделали письмо, которое вовлекло и очаровало аудиторию!

Верстая креативные письма, иной раз думаешь: «И зачем мы с дизайнером сами придумали себе проблемы?!» Но они отлично повышают навыки и позволяют расширить возможности рассылки.

Какое письмо вы всегда хотели сделать, но боялись кривой реализации? Подумайте — и попробуйте!