Аудит и тестирование писем: на что стоит обращать внимание при верстке

Привет, Хабр!

Код не терпит халатного отношения, будь то сложные алгоритмы обработки данных или верстка email-рассылок.

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

Для кого и почему это важно

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

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

Как организовать процесс работы, чтобы свести ошибки к минимуму?

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

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

• За один рабочий день специалисты выполняют в среднем 18,1 задач. Сюда входит как доработка существующих рассылок, так и верстка с нуля пары десятков триггерных кампаний или блоков со сложной логикой и множеством сценариев отображения разным сегментам пользователей;
• Средний срок выполнения задачи — менее двух рабочих дней (в большинстве случаев всё будет готово в день постановки задачи);
• Вероятность некорректного отображения писем у наших клиентов практически нулевая.

Такой результат получен не в последнюю очередь с помощью отлаженного процесса работы, для которого Retail Rocket использует канбан-доски в Trello:

Одна из досок отдела верстки

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

1. Сбор информации: макеты, тексты, ссылки, баннеры и другие сведения от магазина. Нужно максимально получить все необходимые вводные, чтобы какие-то правки не появились на этапах верстки и тестирования, ведь там что-то менять будет более ресурсозатратно.
2. Верстка. За основу берется универсальный базовый шаблон, куда входят все наработки и «фишки» компании, которые можно использовать в дизайне писем (о них, увы, не сегодня);
3. Тестирование. С помощью специализированных инструментов письма проверяются практически на всех почтовых клиентах, некоторые моменты иногда даже проверяем на реальных устройствах с Android и iOS;
4. Снова тестирование. Дополнительная проверка отображения и кода всех писем лично руководителем отдела верстки и проджект-менеджером всех писем;
5. Задача выполнена. Готовые письма отправляются постановщику задачи.

Аудит письма

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

• Планирование процесса по контролю качества верстки. Проведите с коллегами мозговой штурм и на основе своего опыта составьте методологию тестирования и верстки, которая будет дополняться. Это значительно облегчит работу в будущем, особенно с новыми сотрудниками;
• В процессе тестирования каждого письма. Постарайтесь разбить задачу на блоки, где на каждом этапе будет контроль качества;
• Обратите внимание: чтобы письмо было приятно глазу, необходимо следить за соотношением размера шрифтов, изображений, а также интервалами и переносами. Звучит просто, но ниже вы увидите, что некорректное отображение не всегда бывает очевидным;
• Поддерживайте инновации. Старайтесь внедрять новые фишки в работу. Еще недавно мы с коллегами посмеивались над просьбами вставить слайдер в письмо, но появилась AMP и в скором времени такие приемы перейдут в разряд must have.

Вернемся к аудиту. Мы протестировали на нескольких почтовых клиентах полученное письмо после совершения заказа крупного ритейлера по стандартам Retail Rocket.

Давайте для начала вместе посмотрим на отображение письма на десктопе. Попробуйте самостоятельно найти в нем ошибки верстки:

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

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

Рассмотрим ошибки и недостатки верстки подробнее.

Общий недостаток всех писем

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

Наглядно это видно на примере ниже: в одной товарной карточке отображение корректное, а в той, что ниже, текст находится на разных уровнях:

Отображение на iPhone 6 и iPhone 6+

Изображение товара слишком маленькое относительно текста и на этом фоне шрифт кажется огромным. Также переносится символ рубля, что выглядит не очень красиво.

Стоит отметить: цена и название товара находятся на разных уровнях, та же проблема с параметрами товара под названием.

Отображение на iPhone X и Pixel

Проблем с отображением цены нет, но, также как и в предыдущем примере, изображение товара и текст выглядят слишком мелко и крупно соответственно. Также разнятся по высоте цена и название, то же самое касается параметров.

Эти проблемы повторяются в Gmail на iPhone 7 iPhone 7+ и iPhone SE.

Отображение на Samsung Mail

Письмо не адаптируется под размер экрана, без приближения будет сложно рассмотреть детали заказа.

Отображение на Lotus Notes 8.5 и Outlook 2003

Да, этими почтовиками некоторые покупатели еще пользуются и поэтому игнорировать их нельзя. В нашем случае и в Lotus Notes 8.5, и в Outlook 2003 письмо развалилась из-за гигантского размера картинок.

Все изображения в письме должны быть максимально допустимого размера. В конкретно этом случае это 90px в высоту и ширину.

Итоги

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


Наша миссия — повышать продажи интернет-магазинов, поэтому мы открыто делимся своими методами работы и показываем, как избежать ошибок. Тщательное тестирование могло бы выявить все проблемы с отображением и вовремя их исправить.

Возможно, письмо после совершения заказа не самое примечательное, но если в такой простой структуре есть столько недостатков, то какова вероятность, что массовые рассылки с различными дизайнерскими элементами будут сверстаны идеально?

А что вы думаете по этому поводу? Ждем ваши ответы и с радостью обсудим тему.