Привет, Хабр!
Код не терпит халатного отношения, будь то сложные алгоритмы обработки данных или верстка email-рассылок.
Получив письмо от одного из крупных ритейлеров, наш руководитель отдела верстки заметил, что некоторые элементы располагаются неровно. Профессиональное чутье не позволило просто пойти мимо, и, поскольку магазин не входит в число наших клиентов, он решил проверить его по нашему процессу контроля качества верстки. О результатах и о том, как увидеть проблемы в отображении на стадии разработки рассылки, рассказывает руководитель отдела верстки Retail Rocket Илья Кастерин ikasterin.
Отображение писем важно для интернет-магазинов, т.к. многие из них поддерживают коммуникацию с клиентами в первую очередь через email. Чем менее привлекательной выглядит рассылка, тем больше отписок и меньше заказов.
Возможно, вы возразите: «Если магазин торгует качественным товаром по приемлемой цене, то рассылки не так и важны». Да, это правда. Однако цены на самые популярные позиции везде плюс-минус одинаковые, а сами товары зачастую закупаются у одного производителя. Это особенно актуально для онлайн-гипермаркетов и частично ассортимента маркетплейсов. Вот и получается, что решает качество сервиса, отличная работа в email-коммуникациях и маркетинг в целом. И если кому-то все равно на то, что текст может быть криво перенесен или междустрочные расстояния не одинаковые, то иной покупатель подумает, что такие недочеты могут быть и в сервисе магазина или качестве товара, и изменит мнение о магазине в худшую сторону.
Retail Rocket — это платформа персонализации для интернет-магазинов, которая помогает ритейлерам строить персональные коммуникации с каждым покупателем на сайте и в email-канале. Платформа персонализированного email-маркетинга включает в себя рассылки любого вида и сложности: от триггерных писем до формирования умных автоматизированных кампаний с динамическим контентом.
Многие ритейлеры выбирают нашу платформу из-за высокого уровня сервиса и поддержки, которые мы обеспечиваем с помощью четко выверенного процесса работы. На данный момент отдел верстки достиг (и не собирается останавливаться) следующих показателей:
Такой результат получен не в последнюю очередь с помощью отлаженного процесса работы, для которого Retail Rocket использует канбан-доски в Trello:
Одна из досок отдела верстки
С помощью канбан-досок вся команда контролирует задачу и видит сложности, если они появляются. Весь процесс верстки выглядит следующим образом:
Прежде, чем показать, какие проблемы могут возникнуть при верстке, хочу подчеркнуть, что конкретных решений указано не будет, кроме одного: переделать письмо с нуля. Если у вас есть несколько этапов с ревью, то найти и исправить ошибки будет просто. Вот еще несколько советов, которые помогут повысить качество работы:
Вернемся к аудиту. Мы протестировали на нескольких почтовых клиентах полученное письмо после совершения заказа крупного ритейлера по стандартам Retail Rocket.
Давайте для начала вместе посмотрим на отображение письма на десктопе. Попробуйте самостоятельно найти в нем ошибки верстки:
На первый взгляд письмо достаточно неплохо сверстано, но это потому, что основные ошибки видны, когда открываешь письмо на мобильных устройствах. Хотя и здесь видно несколько огрехов.
Многие ритейлеры ограничиваются проверкой на десктопе и удовлетворяются полученными результатами. А ведь больше половины писем открывается на мобильных. Именно поэтому так важен процесс тестирования на максимально большом количестве различных устройств и почтовых клиентов.
Рассмотрим ошибки и недостатки верстки подробнее.
Абсолютно во всех почтовых клиентах некорректно отображается текстовые блоки с ценой, количеством и свойствами товара, такие как неправильные переносы или несоразмерный шрифт по отношению к картинке, но чаще всего возникают проблемы с отступами.
Наглядно это видно на примере ниже: в одной товарной карточке отображение корректное, а в той, что ниже, текст находится на разных уровнях:
Изображение товара слишком маленькое относительно текста и на этом фоне шрифт кажется огромным. Также переносится символ рубля, что выглядит не очень красиво.
Стоит отметить: цена и название товара находятся на разных уровнях, та же проблема с параметрами товара под названием.
Проблем с отображением цены нет, но, также как и в предыдущем примере, изображение товара и текст выглядят слишком мелко и крупно соответственно. Также разнятся по высоте цена и название, то же самое касается параметров.
Эти проблемы повторяются в Gmail на iPhone 7 iPhone 7+ и iPhone SE.
Письмо не адаптируется под размер экрана, без приближения будет сложно рассмотреть детали заказа.
Да, этими почтовиками некоторые покупатели еще пользуются и поэтому игнорировать их нельзя. В нашем случае и в Lotus Notes 8.5, и в Outlook 2003 письмо развалилась из-за гигантского размера картинок.
Все изображения в письме должны быть максимально допустимого размера. В конкретно этом случае это 90px в высоту и ширину.
Покупатели не всегда осознают, что в рассылке есть проблемы с интервалами или соотношением шрифтов, но это определенно влияет на то, как сообщение воспринимается в целом. К сожалению, не все ритейлеры это учитывают. Примерно так выглядело бы письмо, если бы прошло по нашему процессу верстки:
Наша миссия — повышать продажи интернет-магазинов, поэтому мы открыто делимся своими методами работы и показываем, как избежать ошибок. Тщательное тестирование могло бы выявить все проблемы с отображением и вовремя их исправить.
Возможно, письмо после совершения заказа не самое примечательное, но если в такой простой структуре есть столько недостатков, то какова вероятность, что массовые рассылки с различными дизайнерскими элементами будут сверстаны идеально?
А что вы думаете по этому поводу? Ждем ваши ответы и с радостью обсудим тему.
Код не терпит халатного отношения, будь то сложные алгоритмы обработки данных или верстка email-рассылок.
Получив письмо от одного из крупных ритейлеров, наш руководитель отдела верстки заметил, что некоторые элементы располагаются неровно. Профессиональное чутье не позволило просто пойти мимо, и, поскольку магазин не входит в число наших клиентов, он решил проверить его по нашему процессу контроля качества верстки. О результатах и о том, как увидеть проблемы в отображении на стадии разработки рассылки, рассказывает руководитель отдела верстки Retail Rocket Илья Кастерин ikasterin.
Для кого и почему это важно
Отображение писем важно для интернет-магазинов, т.к. многие из них поддерживают коммуникацию с клиентами в первую очередь через email. Чем менее привлекательной выглядит рассылка, тем больше отписок и меньше заказов.
Возможно, вы возразите: «Если магазин торгует качественным товаром по приемлемой цене, то рассылки не так и важны». Да, это правда. Однако цены на самые популярные позиции везде плюс-минус одинаковые, а сами товары зачастую закупаются у одного производителя. Это особенно актуально для онлайн-гипермаркетов и частично ассортимента маркетплейсов. Вот и получается, что решает качество сервиса, отличная работа в email-коммуникациях и маркетинг в целом. И если кому-то все равно на то, что текст может быть криво перенесен или междустрочные расстояния не одинаковые, то иной покупатель подумает, что такие недочеты могут быть и в сервисе магазина или качестве товара, и изменит мнение о магазине в худшую сторону.
Как организовать процесс работы, чтобы свести ошибки к минимуму?
Retail Rocket — это платформа персонализации для интернет-магазинов, которая помогает ритейлерам строить персональные коммуникации с каждым покупателем на сайте и в email-канале. Платформа персонализированного email-маркетинга включает в себя рассылки любого вида и сложности: от триггерных писем до формирования умных автоматизированных кампаний с динамическим контентом.
Многие ритейлеры выбирают нашу платформу из-за высокого уровня сервиса и поддержки, которые мы обеспечиваем с помощью четко выверенного процесса работы. На данный момент отдел верстки достиг (и не собирается останавливаться) следующих показателей:
- За один рабочий день специалисты выполняют в среднем 18,1 задач. Сюда входит как доработка существующих рассылок, так и верстка с нуля пары десятков триггерных кампаний или блоков со сложной логикой и множеством сценариев отображения разным сегментам пользователей;
- Средний срок выполнения задачи — менее двух рабочих дней (в большинстве случаев всё будет готово в день постановки задачи);
- Вероятность некорректного отображения писем у наших клиентов практически нулевая.
Такой результат получен не в последнюю очередь с помощью отлаженного процесса работы, для которого Retail Rocket использует канбан-доски в Trello:
Одна из досок отдела верстки
С помощью канбан-досок вся команда контролирует задачу и видит сложности, если они появляются. Весь процесс верстки выглядит следующим образом:
- Сбор информации: макеты, тексты, ссылки, баннеры и другие сведения от магазина. Нужно максимально получить все необходимые вводные, чтобы какие-то правки не появились на этапах верстки и тестирования, ведь там что-то менять будет более ресурсозатратно.
- Верстка. За основу берется универсальный базовый шаблон, куда входят все наработки и «фишки» компании, которые можно использовать в дизайне писем (о них, увы, не сегодня);
- Тестирование. С помощью специализированных инструментов письма проверяются практически на всех почтовых клиентах, некоторые моменты иногда даже проверяем на реальных устройствах с Android и iOS;
- Снова тестирование. Дополнительная проверка отображения и кода всех писем лично руководителем отдела верстки и проджект-менеджером всех писем;
- Задача выполнена. Готовые письма отправляются постановщику задачи.
Аудит письма
Прежде, чем показать, какие проблемы могут возникнуть при верстке, хочу подчеркнуть, что конкретных решений указано не будет, кроме одного: переделать письмо с нуля. Если у вас есть несколько этапов с ревью, то найти и исправить ошибки будет просто. Вот еще несколько советов, которые помогут повысить качество работы:
- Планирование процесса по контролю качества верстки. Проведите с коллегами мозговой штурм и на основе своего опыта составьте методологию тестирования и верстки, которая будет дополняться. Это значительно облегчит работу в будущем, особенно с новыми сотрудниками;
- В процессе тестирования каждого письма. Постарайтесь разбить задачу на блоки, где на каждом этапе будет контроль качества;
- Обратите внимание: чтобы письмо было приятно глазу, необходимо следить за соотношением размера шрифтов, изображений, а также интервалами и переносами. Звучит просто, но ниже вы увидите, что некорректное отображение не всегда бывает очевидным;
- Поддерживайте инновации. Старайтесь внедрять новые фишки в работу. Еще недавно мы с коллегами посмеивались над просьбами вставить слайдер в письмо, но появилась 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 в высоту и ширину.
Итоги
Покупатели не всегда осознают, что в рассылке есть проблемы с интервалами или соотношением шрифтов, но это определенно влияет на то, как сообщение воспринимается в целом. К сожалению, не все ритейлеры это учитывают. Примерно так выглядело бы письмо, если бы прошло по нашему процессу верстки:
Наша миссия — повышать продажи интернет-магазинов, поэтому мы открыто делимся своими методами работы и показываем, как избежать ошибок. Тщательное тестирование могло бы выявить все проблемы с отображением и вовремя их исправить.
Возможно, письмо после совершения заказа не самое примечательное, но если в такой простой структуре есть столько недостатков, то какова вероятность, что массовые рассылки с различными дизайнерскими элементами будут сверстаны идеально?
А что вы думаете по этому поводу? Ждем ваши ответы и с радостью обсудим тему.
