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

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

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

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

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

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