11 правил верстки email-рассылок

9 ноября 2018

772

В этой статье я хочу поделиться важными вещами на которые стоит обратить внимание при работе с рассылкой.

В ходе работы я сталкивался с различного рода проблемами, на решение которых мне приходилось тратить немало времени. Одна из самых основных проблем, с которой я столкнулся - обилие почтовых клиентов (Outlook, Yandex, Gmail, Mail.ru и другие).

У почтовых сервисов нет общих правил отображения html писем, поэтому одно и то же письмо может отображаться по-разному.

Первое, на что следует обратить внимание - это ширина email-рассылки. Для того чтобы письмо гарантированно поместилось в рабочее поле без прокрутки, рекомендуется устанавливать максимальную ширину в 600 пикселей.
Также не стоит забывать и о мобильной версии. Процент писем открываемых с мобильных устройств уже составляет 50% и постоянно растет.
Для мобильной версии необходимо учитывать дизайн так, чтобы письмо выглядело валидно при размере в 320 пикселей.
Ширина в Gmail считается немного иначе. Если контент письма будет больше 320 пикселей, то на маленьких экранах он будет вылазить за границы, что приведет к малоприятным последствиям.
При работе следует использовать только стандартные шрифты, которые установлены на всех устройствах — Arial, Helvetica, Tahoma, Verdana, Georgia и др. Это обусловлено тем, что в email-рассылках нельзя подключить другие файлы, а многие почтовые клиенты не воспринимают тег <style>.
Для корректного отображения письма нужно использовать встроенные (inline) стили и прописывать их каждому взятому элементу. Это поможет предотвратить последующие проблемы с добавлением стилей другими почтовыми клиентами.
Малопривлекательная картина складывается и с отступами. Они также везде воспринимаются по-своему. Некоторые почтовики видят отступы только в теге <td>, поэтому предлагаю делать их с помощью свойства padding, вписывая его в тег <td>, т.к. margin воспринимается меньше, чем padding. Такой вариант отступов воспринимается во всех клиентах.
Если вы хотите, чтобы ваши изображения везде отображались одинаково, включая мобильные устройства, указывайте размеры изображения через свойства width и height. В противном случае, вы рискуете увидеть фактический размер изображения, что может неблагоприятно сказаться на всем письме.
К большому сожалению, при работе с email-рассылками мы ограничены небольшим рядом инструментов. Это касается и фона в виде картинок. Рекомендую отказаться от него, ведь в большинстве мейл-клиентов и интерфейсах он просто не поддерживается.
Чтобы получить кнопку с красивым фоновым изображением, которая будет стабильно отображаться на всех платформах, изначально сделайте её с текстом в виде изображения.
Для того чтобы ссылка в вашем письме везде выглядела одинаково, оберните её в тег <span> и продублируйте ему стили данной ссылки. Так вы сможете избежать определенного вмешательства от почтовиков.

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