Четыре частые ошибки емейл-вёрстки, которые портят не только отображение (+ чек-лист)
Вёрстка письма влияет не только на то, каким его увидят подписчики. Если рассылка собрана хорошо, это способствует общей эффективности емейл-маркетинга — и наоборот.
Вот примеры. В статье собраны ошибки вёрстки, которые я довольно часто встречаю в своём почтовом ящике. Расскажу, чем они опасны и как их избежать. В конце — чек-лист тестирования писем, которым пользуемся мы сами.
URL в тексте ссылки
Иногда в качестве текста ссылки в письмах используют её адрес — например, в футере или в юридических пояснениях.
С точки зрения вёрстки это означает совпадение отображаемого текста и его атрибута .
Однако при отправке письма любая платформа заменит адрес ссылки — для отслеживания перехода. Вот так это выглядит:
1. Я прописываю и в адресе, и в тексте ссылки google.com:
2. ESP меняет адрес:
Таким образом, пользователь получит письмо, где текст ссылки не совпадает с адресом. Почтовые сервисы могут принять это за мошенничество: такой приём встречается в фишинговых рассылках.
В итоге почтовик может добавить к письму предупреждение о возможном мошенничестве или даже пометить его как потенциально опасное и отправить в спам.
Для проверки реакции почтовиков можно отправить письмо себе и открыть его в Thunderbird. Эта программа явно покажет, считается ли сообщение мошенническим.
Чтобы избежать проблемы, я рекомендую не использовать адрес ссылки в качестве её отображаемого текста. Вместо этого лучше написать «смотреть подробнее», «перейти» или что-то в этом духе:
Исключение: если в адресе и тексте совпадает домен. Такое случается, если платформа не подменяет адрес, но в вёрстке прописаны UTM-метки.
Формально ссылки разнятся, но фактически клик приведёт пользователя именно туда, куда ему обещает письмо. Поэтому к таким ситуациям почтовики чаще всего относятся нормально.
Код тяжелее 102 Кб
Gmail обрезает письма, чей код превышает 102 килобайта, — известный факт. Может показаться, что это некритично: подумаешь, футер не прогрузился — основной контент ведь показан.
Но на самом деле последствия шире. Дело в том, что трекинг-пиксель, с помощью которого фиксируются открытия, обычно находится в самом конце. Не загрузилось полностью письмо — не загрузился пиксель — не засчиталось открытие.
Если «перевес» будет систематическим, то, во-первых, емейл-маркетолог начнёт получать недостоверные данные по Open Rate. Это может привести к ложным выводам при анализе канала и неверным шагам в его развитии.
Во-вторых, нарушится сегментация. Почти все пользователи Gmail (кроме единиц процента, кто кликнет «Показать полностью») ошибочно будут признаны неактивными и через какое-то время вычеркнуты из числа получателей рассылки.
Вот так лишний килобайт кода может лишить компанию лояльных подписчиков.
Обнаружить и предотвратить проблему легко: достаточно выслать тест себе на Gmail. А вот проверка веса перед отправкой помогает не всегда: он может увеличиться в платформе после того самого преобразования ссылок из предыдущего пункта.
Непродуманный Alt
Порой письмо открывается у пользователя без картинок. Например, если он не поменял базовую настройку десктопного клиента или включил режим экономии трафика.
В таком случае подписчик увидит Alt, то есть альтернативный текст, который в одноимённом атрибуте изображения укажет емейл-маркетолог.
Тут есть два момента, на которые нужно обратить внимание. Они особенно важны для B2B-компаний, так как их подписчики чаще всего используют десктопные почтовики, где картинки по умолчанию не загружаются.
Первый момент — содержание Alt. Он должен умещаться в ширину той картинки, которую заменяет. Если тексты будут слишком длинными, то наедут друг на друга. Эта куча мала может испортить показатели кликабельности:
Часто такая проблема возникает с иконками соцсетей, как на примере выше. Изображения небольшие, текст должен быть им под стать. Мы в EMAILMATRIX в таких случаях используем понятные сокращения, вроде VK вместо «ВКонтакте»:
Второй — внешний вид. По умолчанию кликабельный Alt будет ярко-синим. Это не очень красиво и может не вписываться в общий дизайн. Техническая возможность для стилизации есть, и лучше ей воспользоваться: прописать в коде размер, цвет и другие параметры текста.
Непредвиденные рамки
Не обнулять бордеры — ещё одна распространённая ошибка в вёрстке писем. Она не проявится в большинстве современных почтовых клиентов, но будет заметна в Outlook, некоторых корпоративных веб-интерфейсах и в программах вроде устаревшей The Bat!
Эти почтовики по умолчанию ко всем картинкам со ссылкой добавляют рамку — ярко-синюю до клика и ярко-фиолетовую после.
Во-первых, это некрасиво.
Во-вторых, рамка имеет некоторую ширину и, говоря просто, занимает место. Если вёрстка письма адаптивная, но не учитывает этот нюанс, то в ряде случаев адаптация может сломаться. Пользователь увидит в десктопе перестроенные блоки, потому что их ширина изменилась из-за появления рамки.
Чтобы такого не происходило, нужно прописать у всех изображений. Желательно даже у тех, на которых нет ссылок, — на всякий случай.
Да, эта проблема скорее не выходит за рамки (такой каламбур) отображения и восприятия писем. Но я часто вижу такую ошибку даже у крупных компаний, поэтому счёл нужным рассказать о ней.
Чек-лист тестирования емейл-вёрстки
Мы в EMAILMATRIX составили небольшой чек-лист для тестирования писем. Он помогает избежать перечисленных и других типовых ошибок вёрстки.
Вот что мы советуем сделать перед отправкой рассылки:
- Сверить вёрстку с макетом
по направляющим.
Через несколько часов вёрстки глаз замыливается и не замечает грубые ошибки — например, два одинаковых товара в сетке или одинаковое описание у двух разных. Что уж говорить о несовпадающих отступах? Особенно после серии итераций правок.
Если в Figma или Photoshop поместить рядом макет и свёрстанное письмо и добавить направляющие, все недочёты бросятся в глаза. Сделать полный скриншот вёрстки для этого можно в режиме предпросмотра в Chrome или в режиме отладки в Firefox.
- Посмотреть письмо
в режиме отключённых картинок.
Отличный способ понять, как будет выглядеть письмо у пользователей, которые не включили загрузку изображений. Также позволяет проверить отображение Alt-текстов и опечатки в них.
Чтобы «отключить» картинки в свёрстанном письме, проще всего переименовать папку Images рядом с HTML-файлом.
- Сравнить отображение в Chrome и Firefox.
Браузеры Chrome и Firefox используют разные движки для интерпретирования кода, поэтому отображение писем может различаться. Открываем файл с кодом в обоих и смотрим, всё ли в порядке.
Почему именно в этих браузерах? Все популярные альтернативы вроде Яндекс Браузера и Opera используют тот же движок, что и Chrome.
- Провалидировать HTML-код.
Проверяем корректность кода в сервисах — к примеру, в Markup Validator. Конечно, валидность кода не означает, что вёрстка будет выглядеть корректно. Но этот этап позволит избежать незакрытых тегов, некорректных атрибутов и других грубых ошибок.
Рекомендую использовать для валидации формат HTML 4. Если выбрать HTML 5, обнаружится больше ошибок, которые на самом деле таковыми для емейла не являются.
- Прогнать письмо через сервисы тестирования.
Существуют специальные сервисы, в которых можно проверить отображение в интерфейсах разных почтовых клиентов и устройств. Они платные, но значительно облегчают процесс тестирования. Самые популярные — Email on Acid и Litmus.
Тестирование письма в сервисе Email on Acid - Проверить письмо в реальных инбоксах.
Синтетические тесты, безусловно, помогают, но лучше проверить письмо и в реальных почтовых клиентах и веб-интерфейсах. Хотя бы потому, что в зарубежных сервисах отсутствует Яндекс Почта — важный для российского рынка почтовик.
- Проверить письмо в тёмной теме мобильной Яндекс Почты.
Тестирование в тёмной теме — стандарт в EMAILMATRIX. Я советую использовать для него мобильную версию Яндекс Почты. Это средний вариант: особенности есть, но их не чересчур много.
Однако в целом необходимо ориентироваться на свою аудиторию. Если большинство ваших подписчиков используют условный Gmail, то в нём в первую очередь и нужно тестировать.
