Как тестировать вёрстку писем

Валерий Селезнев

Руководитель отдела вёрстки

Тестирование вёрстки — обязательный этап при создании письма. Мы должны убедиться, что письмо выглядит так, как задумывалось, во всех почтовиках и на всех устройствах. Отдать клиенту криво свёрстанное письмо — это не только стыдоба, но и ущерб репутации и вероятные финансовые потери. Никому не понравится плохая работа. Поэтому — ТЕСТИМ!

Перед тем как начать тестировать вёрстку, нужно быть уверенным в том, что наш код валидный и не содержит незакрытых тегов, ведь это может быть причиной поломки письма. Для этого мы используем редактор Brackets с расширением HTMLHint, который в случае ошибки сразу сообщит об этом, указав номер строки кода и проблемный тег.

Да, работает неидеально и иногда пропускает ошибки, вроде неправильной последовательности тегов:

<tr><td>
<tr><td>
</td></tr>
</td></tr>

Он считает общее количество открытых и закрытых тегов, не всегда учитывая их последовательность, но когда нас просят проверить письмо, то мы обычно с этого и начинаем, находим незакрытые теги и часть писем именно таким образом и чинится 🙂

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

Сервис платный, как и его прямой конкурент — Litmus, но как-то исторически сложилось, что мы пользуемся EmailOnAcid уже несколько лет. Его функционал и интерфейс на момент выбора показался нам лучше и удобнее, как обстоят дела сейчас, лучше выяснить самому 🙂 Так как эти сервисы эмулируют устройства, то лучше проверить ещё и на реальных, потому что иногда они показывают картину, которая расходится с реальной. И тут наступает 3-й этап тестирования —  «аналоговый». 

Для этого мы загружаем архив с письмом в платформу ExpertSender и отправляем на заранее подготовленный тестовый лист, где есть емейлы с самыми популярными почтовыми провайдерами: mail.ru, yandex.ru, gmail.com, outlook.com. Последний не является популярным, но также считается важным, так как стоит предустановленным почтовиком из пакета MS office. В нём куча своих проблем и интересные способы их решения, но об это мы напишем в другой нашей статье про вёрстку для Outlook`a, но уже сейчас важно знать, что даже если в Outlook 2013 отображается корректно, то в других версиях вполне возможно будут проблемы, и наоборот.

Проверяем как веб-версию всех почтовых провайдеров, так и в мобильном приложении (по возможности проверить на iOS и Android), а в случае с Оutlook —  в приложении для компьютера.

Чек-лист по тестированию верстки:

  • Валидация. Проверяем код на валидность с помощью редактора Brackets с расширением HTMLHint
  • Автоматическое тестирование. Тестируем верстку с помощью специальных сервисов, которые эмулируют работу разных почтовиков: Litmus, Emailonacid.
  • Ручное тестирование. Отправляем сверстанное письмо на тестовых список адресов разных почтовых провайдеров. Проверяем веб и мобильную версии на разных устройствах и в разных почтовиках.

Если всё ок, то письмо можно с чистой совестью и гордостью за проделанную работу отправлять клиентам. 

Однако если при тестировании всплыл какой-то баг, не стоит впадать в панику. Большинство проблем, с которыми ко мне неоднократно обращались клиенты ExpertSender, легко чинятся.

Самые частые проблемы

1. Отступы пропали/некорректно отображаются

Если валидатор не нашёл ошибок, то скорее всего, у вас в коде для отступов используется свойство padding/margin. Они ещё не обрели полную поддержку: padding корректно работает только для тега <td>, а margin неполноценно поддерживается Outlook. Поэтому для горизонтальных отступов мы используем таблицу с выравниванием по центру внутри более крупной таблицы.

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

<div style="height: 10px ; line-height:10px; font-size:8px;"> </div>

Вот как в итоге всё это выглядит.

2. В Яндекс.Почте или Рамблере мобильный вид работает не так, как на остальных почтовых провайдерах

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

3. С адаптацией все было хорошо, но после добавления картинки/элемента в письмо, она перестала работать.

Вероятно, вы добавили элемент, у которого указана фиксированная ширина. К примеру, в картинке указана ширина 600 пикселей (width=”600”), а у всех остальных элементов ширина указана в процентах. И да, именно из-за одного элемента с фиксированной шириной, всё письмо перестанет адаптироваться. Тут нужно просто изменить ширину на процентную. 

4. В Оutlook картинка в разы больше своих размеров, и всё письмо поломано.

Тут всё просто: скорее всего, исходник картинки у вас, к примеру, 1500 пикселей в ширину, а в коде указана ширина 100% (width=”100%”). Outlook понимает это по своему, он растянет вашу картинку на 100% от ширины исходного файла (то есть на 1500 пикселей), а не на 100% от ширины родительского элемента, как это делают остальные почтовики. Из-за этого таблица, в которой была картинка, растягивается на ширину картинки, и в итоге всё ломается. 

Решений тут может быть несколько.

  • Если это баннер на всю ширину письма, то тут нужно изменить ширину исходного файла на ширину картинки в вашем макете. 
  • Это фотокарточка вашего товара в адаптивном блоке, ширина которого не более 300 пикселей, и вам важно, чтобы качество картинки было двукратным, то можно указать фиксированную ширину. Это и не помешает вашей адаптации, и позволит использовать ретина изображения. 
  • Прописать условие if else для Оutlook.
<!--[if mso]>
	Версия для Оutlook
 <![endif]-->
 <!--[if !mso]> <!---->
	Версия для остальных почтовиков и Outlook 2003 и OSX версии
 <!-- <![endif]-->

Естественно, в версии для Outlook мы указываем, что его ширина будет фиксирована, а для всех остальных —  процентная

<!--[if mso]>
	<img src="img/logo.png" width="600"  alt="" border="0" style="display: block;" />
 <![endif]-->
 <!--[if !mso]> <!---->
	<img src="img/logo.png" width="100%"  alt="" border="0" style="display: block;" />
 <!-- <![endif]-->

5. Вместо текста отображаются странные символы

Это проблемы с кодировкой. Проверьте её в теге <head>, которая прописана в html файле. Там должен быть вот такой meta-тег, с кодировкой UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

6. В Gmail обрезается часть письма

Проверьте размер html-файла, если он больше 102кб, то Gmail его будет обрезать. Решением тут станет только оптимизация вашего кода: удаление лишних отступов и таблиц.

Остались вопросы по тестированию или есть баги, с которыми частенько сталкиваетесь? Напишите нам, мы придумаем, как вам помочь 🙂

Согласен

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