Следи за нами

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

Дата создания: г.

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

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

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

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

  1. Первое, на что следует обратить внимание - это ширина email-рассылки. Для того чтобы письмо гарантированно поместилось в рабочее поле без прокрутки, рекомендуется устанавливать максимальную ширину в 600 пикселей.
  2. Также не стоит забывать и о мобильной версии. Процент писем открываемых с мобильных устройств уже составляет 50% и постоянно растет.
  3. Для мобильной версии необходимо учитывать дизайн так, чтобы письмо выглядело валидно при размере в 320 пикселей.
  4. Ширина в Gmail считается немного иначе. Если контент письма будет больше 320 пикселей, то на маленьких экранах он будет вылазить за границы, что приведет к малоприятным последствиям.
  5. При работе следует использовать только стандартные шрифты, которые установлены на всех устройствах — Arial, Helvetica, Tahoma, Verdana, Georgia и др. Это обусловлено тем, что в email-рассылках нельзя подключить другие файлы, а многие почтовые клиенты не воспринимают тег <style>.
  6. Для корректного отображения письма нужно использовать встроенные (inline) стили и прописывать их каждому взятому элементу. Это поможет предотвратить последующие проблемы с добавлением стилей другими почтовыми клиентами.

  7. Малопривлекательная картина складывается и с отступами. Они также везде воспринимаются по-своему. Некоторые почтовики видят отступы только в теге <td>, поэтому предлагаю делать их с помощью свойства padding, вписывая его в тег <td>, т.к. margin воспринимается меньше, чем padding. Такой вариант отступов воспринимается во всех клиентах.
  8. Если вы хотите, чтобы ваши изображения везде отображались одинаково, включая мобильные устройства, указывайте размеры изображения через свойства width и height. В противном случае, вы рискуете увидеть фактический размер изображения, что может неблагоприятно сказаться на всем письме.

  9. К большому сожалению, при работе с email-рассылками мы ограничены небольшим рядом инструментов. Это касается и фона в виде картинок. Рекомендую отказаться от него, ведь в большинстве мейл-клиентов и интерфейсах он просто не поддерживается.
  10. Чтобы получить кнопку с красивым фоновым изображением, которая будет стабильно отображаться на всех платформах, изначально сделайте её с текстом в виде изображения.
  11. Для того чтобы ссылка в вашем письме везде выглядела одинаково, оберните её в тег <span> и продублируйте ему стили данной ссылки. Так вы сможете избежать определенного вмешательства от почтовиков.

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


Прикрепить файл

до 50мб