Привет, Хабр! Код не терпит халатности, будь то сложные алгоритмы обработки данных или верстка email-рассылок.
Получив письмо от одного из крупных ритейлеров, наш руководитель отдела верстки заметил, что некоторые элементы расположены неправильно.
Его профессиональное чутье не позволило ему просто пройти мимо, и поскольку магазин не входит в число наших клиентов, он решил проверить его с помощью нашей процедуры контроля качества макета.
О результатах и о том, как выявить проблемы с отображением на этапе разработки рассылки, рассказывает Илья Кастерин, руководитель отдела верстки Retail Rocket. икастерин .
Для кого и почему это важно?
Отображение электронной почты важно для интернет-магазинов, потому что.многие из них общаются с клиентами преимущественно посредством электронной почты.
Чем менее привлекательно выглядит рассылка, тем больше отписок и меньше заказов.
Вы можете возразить: «Если в магазине продается качественный товар по разумной цене, то рассылки не так важны».
Да, это правда.
Однако цены на самые популярные товары везде плюс-минус одинаковые, а сами товары часто приобретаются у одного и того же производителя.
Особенно это касается онлайн-гипермаркетов и отчасти ассортимента маркетплейсов.
Вот и получается, что решают качество обслуживания, отличная работа в сфере email-коммуникаций и маркетинга в целом.
И если кого-то не волнует, что текст может быть кривым или межстрочный интервал не тот, то другой покупатель подумает, что такие недостатки могут быть в сервисе магазина или качестве товара, и изменит свое мнение о товаре.
хранить к худшему.
Как организовать рабочий процесс, чтобы минимизировать ошибки?
Retail Rocket — платформа персонализации для интернет-магазинов, которая помогает ритейлерам выстраивать персональные коммуникации с каждым покупателем на сайте и в канале электронной почты.Платформа персонализированного email-маркетинга включает в себя рассылки любого типа и сложности: от триггерных писем до формирования умных автоматизированных кампаний с динамическим контентом.
Многие ритейлеры выбирают нашу платформу из-за высокого уровня обслуживания и поддержки, которые мы предоставляем в рамках строгого процесса.
На данный момент отдел верстки достиг (и не собирается останавливаться) следующих показателей:
- За один рабочий день специалисты выполняют в среднем 18,1 задач.
Сюда входит как доработка существующих рассылок, так и создание с нуля пары десятков триггерных кампаний или блоков со сложной логикой и множеством сценариев показа для разных сегментов пользователей;
- Средний срок выполнения задачи – менее двух рабочих дней (в большинстве случаев всё будет готово в день постановки задачи);
- Вероятность того, что электронные письма будут отображаться некорректно для наших клиентов, практически равна нулю.
Одна из плат из отдела макетирования С помощью канбан-досок вся команда контролирует выполнение задачи и видит трудности, если они возникают. Весь процесс верстки выглядит так:
- Сбор информации: макеты, тексты, ссылки, баннеры и другая информация из магазина.
Вам необходимо получить максимально всю необходимую информацию, чтобы какие-либо изменения не проявились на этапах верстки и тестирования, потому что менять что-то там будет более ресурсозатратно.
- Макет. В основе — универсальный базовый шаблон, включающий в себя все разработки и «фишки» компании, которые можно использовать при оформлении писем (увы, не о них сегодня);
- Тестирование.
С помощью специализированных инструментов письма проверяются практически на всех почтовых клиентах, иногда мы даже проверяем некоторые моменты на реальных устройствах с 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 письмо развалилось из-за гигантского размера изображений.
Все изображения в письме должны быть максимально разрешенного размера.
В данном конкретном случае это 90 пикселей по высоте и ширине.
Полученные результаты
Покупатели не всегда осознают, что в информационном бюллетене есть проблемы с интервалами или соотношением шрифтов, но это определенно влияет на то, как сообщение воспринимается в целом.
К сожалению, не все ритейлеры это учитывают. Вот как бы выглядело письмо, если бы оно прошло наш процесс верстки: 
Наша миссия — увеличение продаж интернет-магазинов, поэтому мы открыто делимся методами работы и показываем, как избежать ошибок.
Тщательное тестирование позволит выявить любые проблемы с отображением и вовремя их устранить.
Письмо после заказа, возможно, не самое примечательное, но если в такой простой структуре столько недостатков, то какова вероятность того, что массовые рассылки с разными элементами дизайна будут выложены идеально? Что Вы думаете об этом? Ждем ваших ответов и будем рады обсудить тему.
Теги: #Вёрстка электронного письма #тестирование макета #электронная коммерция и рентабельность инвестиций
-
Очиститель Реестра Безопасен?
19 Oct, 24 -
Открытый Исходный Код: Век Наступил
19 Oct, 24 -
Веб-Сайт Wordpress Для Малого Бизнеса
19 Oct, 24 -
Почтовый Апокалипсис
19 Oct, 24 -
Re: Как Активировать Режим Бога В Windows 7
19 Oct, 24
