Улучшили вёрстку писем ВкусВилла на уровне результата и процесса
Креатив делает емейл-рассылку ценнее для подписчиков, улучшает вовлечённость и добавляет бренду популярности. За него традиционно отвечают копирайтеры и дизайнеры, однако эффект писем не меньше зависит от верстальщика. Все творческие идеи нужно воплотить на техническом уровне, а это бывает трудно без должных знаний и внимания к деталям.
За быстрой и качественной вёрсткой в EMAILMATRIX обратился бренд продуктов для здорового питания «ВкусВилл», чья рассылка славится дружелюбными текстами и милыми иллюстрациями. Убедить бренд в своих знаниях и навыках нам помогли в том числе собственные креативные письма.
Эта статья — не только о том, что мы изменили в письмах «ВкусВилла». Я также расскажу, как агентство вместе с клиентом решало технические и организационные проблемы.
Easy: внедрить понятное
«ВкусВилл» ждал от емейл-вёрстки качественный финальный продукт в связке с дизайном. Все задачи были связаны с тем, чтобы донести информацию до максимума подписчиков независимо от устройств и настроек.
Главным было адаптировать письма к тёмной теме. Мы учитываем её во всех рассылках и даже составили гайд по её особенностям. А вот за чем мы особенно следим в письмах «ВкусВилла»:
- Заголовки с нестандартным шрифтом. Они должны иметь обводку, чтобы не пропасть при инвертировании.
Оригинал
Тёмная тема «Яндекс. Почты» на Android
Тёмная тема Gmail на iOS - Фон изображений. Любую заливку нужно убрать, иначе картинки будут выглядеть чужеродными. С этим у «ВкусВилла» всё в порядке, так что для примера ниже картинку я «испортила» сама.
- Контрастность иконок. Мы обязательно проверяем отображение: если иконки сливаются с фоном, к ним нужно добавить обводку или заливку.
- Иконки соцсетей. Им нужно добавлять заливку логотипов в цвет фона: прозрачные могут потеряться. Смотрите:
- Цветовой контраст. Если цвета текста и фона отличаются от белого и чёрного, важно следить, чтобы их инверсия не испортила дизайнерскую идею. Например, здесь мы по согласованию с клиентом изменили цвет текста, чтобы тот остался читабельным.
Было
Стало
Также клиенту важен альтернативный текст картинок: чтобы подписчики получили информацию, даже если изображения не загрузятся. Мы заполняем его по таким правилам:
- Если на картинке есть текст, то непременно дублируем его в alt. Исключение: он уже продублирован в тексте письма — тут повторяться излишне.
- Для иконок отталкиваемся от смысла. Некоторые значки выполняют декоративную функцию — им alt не нужен. А вот для нумерованного списка или соцсетей — обязателен.
- Учитываем размер изображения, то есть область для alt-текста. Если он не умещается, используем общепринятые сокращения — к примеру, VK вместо «Вконтакте».
Normal: починить то, что сломалось
Редкий проект идёт полностью по плану — важно искать выход, который устроит обе стороны. У нас так случилось с мобильной адаптацией писем. Клиент поставил два условия: собственно, делать вёрстку адаптивной и сохранять при этом дизайнерский замысел. На практике соблюсти оба одновременно не удалось.
Стандартное мобильное перестроение сильно ломало задумку. К тому же и без того насыщенные письма становились ещё длиннее. А при адаптации через сжимание контента картинки становились слишком маленькими, так как мы пытались сохранить всю возможную ширину для текста.
Иногда перестроение вообще было невозможно и многие элементы приходилось верстать картинками. Это риск: если изображения не загрузятся, рассылка не произведёт нужного впечатления. Да, alt-текст проинформирует его, но не заменит визуал полноценно — тем более такой, как у «ВкусВилла».
Чтобы сохранить уникальный стиль рассылки, мы предложили клиенту отказаться от мобильной адаптации. Он согласился. Это решение позволило нам сохранять идеи, которые бренд вкладывает при дизайне. При этом читабельность не страдает, так как дизайнеры «ВкусВилла» используют крупный шрифт.
Неадаптивность даже в чём-то развязала нам руки. Теперь больше элементов делаем вёрсткой вместо картинок — это помогает всем. Например, бренду проще поставить ссылки на каждый ингредиент в рецепте (не нужно резать на кусочки картинку):
А подписчику не нужно запоминать нарисованный промокод — можно скопировать набранный:
Впрочем, было у этого решения и неприятное последствие. iOS-приложение Gmail неожиданно начало творить с письмами что заблагорассудится:
С такими багами мы не сталкивались. При этом у них не было общей причины, а значит и единого решения. Но анализ вёрстки и тестирование помогли нам справиться с капризами сервиса. Скажем, высоты в сетке плясали из-за того, что Gmail игнорировал значение в теге td, — мы дополнительно обернули карточки в div, и почтовик сдался.
Hard: найти и убрать системный сбой
Проблема с мобильной адаптацией была значимой, но конкретной. В процессе работы мы обнаружили и более масштабную проблему: вёрстка длилась гораздо дольше, чем мы обещали «ВкусВиллу» на старте. Смета росла, а создание писем затягивалось — однажды мы даже сорвали дедлайн.
Вот что мы сделали вместе с клиентом, чтобы сэкономить время и деньги.
1. Вычислили причины
Мы проанализировали всю работу и смогли разобраться, что замедляло её.
Во-первых, время уходило на притирку к неадаптивной вёрстке. Мы используем её редко и в основном для писем, отправляемых через Outlook (вот один из таких проектов). Нужно было понять возможности и риски неадаптива для конкретной рассылки. Когда мы набили руку, этот стопор исчез сам собой.
Во-вторых, макеты не были полностью подготовлены для вёрстки, они не учитывали некоторые нюансы емейлов. Нам приходилось вручную дорабатывать их, что отнимало время. С этим мы справились на следующем шаге:
2. Составили инструкцию для дизайнеров
Я провела аудит макетов — выбрала спорные моменты в дизайне и описала их в документе. Получилась инструкция для дизайнеров «ВкусВилла» с полутора десятками пунктов.
Одни советы касались только подготовки макетов к вёрстки — например, объединять слои изображения. Другие также помогли улучшить итоговый внешний вид писем. Скажем, для товарных сеток я порекомендовала это:
- Делать карточки одинакового размера. Это важно для идентичного отображения сетки во всех почтовиках: они по-разному рендерят отступы.
- Избегать выносных элементов. Карточки с ними можно сверстать только единой картинкой — не получится повесить ссылку на кнопку, придётся прописывать всей карточке.
- Не пересекать карточкой центральную вертикальную направляющую. Это тоже порождает проблемы со ссылками.
Больше практических советов и примеров по подготовке макетов к емейл-вёрстке смотрите в этой статье.
3. Поменяли процесс
Сначала у работы с «ВкусВиллом» был базовый алгоритм: получить макет — сделать вёрстку — отдать архив с кодом. Когда мы с клиентом поняли, что второй пункт обходится дороже, чем ожидалось, то изменили процесс.
В нём появился новый пункт: получив макет, мы не начинаем вёрстку, а сперва анализируем его и при необходимости возвращаем на доработку дизайнерам. При этом мелкие неточности по согласованию с клиентом исправляем сами, чтобы экономить время.
И здесь хочу поблагодарить «ВкусВилл» за конструктивный подход. Команда клиента нацелена на результат и всегда готова к диалогу: мы вместе ищем оптимальные решения и прислушиваемся к мнению друг друга. Без этого не удалось бы решить описанные разнородные проблемы.
Отдельный плюс — обратная связь. Она не только своевременная и содержательная, но и душевная. На заметку заказчикам: хвалить подрядчика полезно для проекта. Мы хотим делать задачи «ВкусВилла» — и делать их хорошо, чтобы сотрудничество оставалось на приятной волне.
Результаты
Мы работаем с «ВкусВиллом» уже около полгода и сверстали больше 40 писем. Промежуточные итоги можно подвести в двух плоскостях.
С точки зрения процесса — мы с клиентом закончили притирку, справились со всеми возникшими проблемами и донастроили взаимодействие. Вёрстка больше не затягивается, а в большинстве случаев мы справляемся быстрее оговоренного срока. Среднее время сократилось на 30%.
С точки зрения результата — письма передают креативные задумки бренда. Они сохранили качество отображения после того, как дизайн стал сложнее. А в тёмной теме рассылка стала выглядеть даже лучше.
Покупатели «ВкусВилла» продолжают любить его рассылку — пожалуй, это главный итог. Кстати, рассказал об этом тоже клиент:
Отзыв клиента
Мы долгое время верстали сложные по дизайну макеты картинками, но хотели постепенно прийти к живой вёрстке. И нам нужны были специалисты, которые расскажут обо всех её нюансах. С EMAILMATRIX, например, мы узнали, что можно делать тени к блокам. Или поставить иллюстрацию на фон и сверху нанести живой текст, а не объединять их в картинку. Это позволило нам сохранить красочность писем и при этом облегчить их: теперь письма загружаются в разы быстрее.
Часто ребята предлагают незначительные изменения в дизайне, которые позволят оставить блок живым. Например, нам нужен был блок в виде дома с треугольной крышей, но она не позволяла в тёмной теме инвертировать весь фон. Быстро созвонились и нашли решение — сделать крышу горизонтальной. Сохранили и крышу, и красоту тёмной темы, и живую вёрстку.
Мы очень ценим, что команда EMAILMATRIX не оставляет без ответа ни один вопрос, супероперативно верстает наши письма (это важно, потому что продакшн письма долгий, 4-5 дней). Мы даже стали чуть меньше думать, потому что есть гайды и надёжная подстраховка.
А ещё с EMAILMATRIX мы наконец стали делать AMP-письма. Но это уже история следующего кейса.
Полина Сумина
специалист по созданию контента в емейл-рассылках «ВкусВилл»
КОМАНДА
ПРОЕКТА
