Поработали с письмами «ВкусВилла»: дизайн стал сложнее, а вёрстка быстрее

1. Вводная задача от заказчика, проблематика, цели

«ВкусВилл» ждал от емейл-вёрстки качественный финальный продукт в связке с дизайном. Все задачи были связаны с тем, чтобы донести информацию до максимума подписчиков независимо от устройств и настроек. Также важно было адаптировать письма к тёмной теме.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

ВНЕДРИЛИ ПОНЯТНОЕ

На что мы обратили внимание в письмах «ВкусВилла» в первую очередь:

• Заголовки с нестандартным шрифтом. Они должны иметь обводку, чтобы не пропасть при инвертировании.
• Фон изображений. Любую заливку нужно убрать, иначе картинки будут выглядеть чужеродными.
• Контрастность иконок. Мы обязательно проверяем отображение: если иконки сливаются с фоном, к ним нужно добавить обводку или заливку.
• Иконки соцсетей. Им нужно добавлять заливку логотипов в цвет фона: прозрачные могут потеряться.
• Цветовой контраст. Если цвета текста и фона отличаются от белого и чёрного, важно следить, чтобы их инверсия не испортила дизайнерскую идею. Например, в примере ниже мы по согласованию с клиентом изменили цвет текста, чтобы тот остался читабельным.

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

• Если на картинке есть текст, то непременно дублируем его в alt. Исключение: он уже продублирован в тексте письма — тут повторяться излишне.
• Для иконок отталкиваемся от смысла. Некоторые значки выполняют декоративную функцию — им alt не нужен. А вот для нумерованного списка или соцсетей — обязателен.
• Учитываем размер изображения, то есть область для alt-текста. Если он не умещается, используем общепринятые сокращения — к примеру, VK вместо «Вконтакте».

ПОЧИНИЛИ ТО, ЧТО СЛОМАЛОСЬ

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

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

Иногда перестроение вообще было невозможно и многие элементы приходилось верстать картинками. Это риск: если изображения не загрузятся, рассылка не произведёт нужного впечатления. Да, alt-текст проинформирует его, но не заменит визуал полноценно — тем более такой, как у «ВкусВилла».

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

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

Впрочем, было у этого решения и неприятное последствие. iOS-приложение Gmail неожиданно начало творить с письмами что заблагорассудится: могли схлопнуться ширины (столкнулись лого и иконки, ужался баннер с приложениями), высота товарных карточек стала разной вопреки фиксированному значению в коде и так далее. С такими багами мы не сталкивались. При этом у них не было общей причины, а значит и единого решения. Но анализ вёрстки и тестирование помогли нам справиться с капризами сервиса. Скажем, высоты в сетке плясали из-за того, что Gmail игнорировал значение в теге td, — мы дополнительно обернули карточки в div, и почтовик сдался.

НАЙТИ И УБРАТЬ СИСТЕМНЫЙ СБОЙ

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

1. Вычислили причины

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

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

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

2. Составили инструкцию для дизайнеров

Мы провели аудит макетов — выбрали спорные моменты в дизайне и описали их в документе. Получилась инструкция для дизайнеров «ВкусВилла» с полутора десятками пунктов. Одни советы касались только подготовки макетов к вёрстки — например, объединять слои изображения. Другие также помогли улучшить итоговый внешний вид писем. Скажем, для товарных сеток мы порекомендовали это:

• Делать карточки одинакового размера. Это важно для идентичного отображения сетки во всех почтовиках: они по-разному рендерят отступы.
• Избегать выносных элементов. Карточки с ними можно сверстать только единой картинкой — не получится повесить ссылку на кнопку, придётся прописывать всей карточке.
• Не пересекать карточкой центральную вертикальную направляющую. Это тоже порождает проблемы со ссылками.

3. Поменяли процесс

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

3. Результаты сотрудничества

Мы работаем с «ВкусВиллом» уже около полутора лет и сверстали множество писем. Вот какие промежуточные итоги можно подвести:

С точки зрения процесса — мы с клиентом довольно быстро закончили притирку, справились со всеми возникшими проблемами и донастроили взаимодействие. Вёрстка больше не затягивается, а в большинстве случаев мы справляемся быстрее оговоренного срока. Среднее время сократилось на 30%.

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

Покупатели «ВкусВилла» продолжают любить его рассылку — пожалуй, это главный итог.

Полина Сумина

специалист по созданию контента в емейл-рассылках, ВкусВилл

Мы долгое время верстали сложные по дизайну макеты картинками, но хотели постепенно прийти к живой вёрстке. И нам нужны были специалисты, которые расскажут обо всех её нюансах. С EMAILMATRIX, например, мы узнали, что можно делать тени к блокам. Или поставить иллюстрацию на фон и сверху нанести живой текст, а не объединять их в картинку. Это позволило нам сохранить красочность писем и при этом облегчить их: теперь письма загружаются в разы быстрее. Часто ребята предлагают незначительные изменения в дизайне, которые позволят оставить блок живым. Например, нам нужен был блок в виде дома с треугольной крышей, но она не позволяла в тёмной теме инвертировать весь фон. Быстро созвонились и нашли решение — сделать крышу горизонтальной. Сохранили и крышу, и красоту тёмной темы, и живую вёрстку.

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

А ещё с EMAILMATRIX мы наконец стали делать AMP-письма. Но это уже история следующего кейса.