Как верстать email письма. Часть 1

Выделение произвольной области на Яндекс картах

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

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail - WebKit.
  • Outlook 2000, 2002 и 2003 - Internet Explorer.
  • Outlook 2007, 2010 и 2013 - Microsoft Word.
  • Клиенты, которые используют движки браузера: Safari - WebKit, Chrome - Blink.

Каждый почтовый клиент добавляет свои стили к тем, которые уже были использованы верстальщиком шаблона. Часть ваших стилей просто игнорируется. В качестве примера можно привести сервис от поискового гиганта Google – Gmail, который для всех тегов td добавляет определения шрифта по умолчанию. Совсем недавно они только анонсировали поддержку встроенного CSS и media queries, но, когда она будет полноценно добавлена не известно.

Из-за большой разницы в особенности работы с письмами, верстальщикам приходится использовать универсальные подходы, а еще чаще, отказываться от блочной верстки в пользу табличной, у которой тоже есть свои особенности:

  • table вместо div
  • сокращенное название цветов недопустимо, нужно указывать #FFFFFF вместо #FFF
  • padding использовать предпочтительнее margin
  • CSS2 вместо CSS3
  • HTML4 вместо HTML5
  • background нужно заменять на background-color, не стоит использовать сокращения padding вместо padding-top, padding-left и так далее
  • фон лучше задавать цветом, а не изображением, все визуальные элементы указываются через тег img
  • свойства для наложения фона работать не будут
  • HTML-атрибутов вместо CSS
  • указание стилей для каждого элемента, а не набором стилей в style теге или внешнем файле (их даже загружать не будут).

Работа со шрифтами

Забудьте о подключении внешних шрифтов. Добавлять их к письму так же бесполезно. Только стандартные шрифты, которые есть в системе по умолчанию. Список рекомендованных:

  • font-family: Arial, Helvetica, sans-serif;
  • font-family: 'Arial Black', Gadget, sans-serif;
  • font-family: Georgia, serif;
  • font-family: 'MS Sans Serif', Geneva, sans-serif;
  • font-family: 'MS Serif', 'New York', sans-serif;
  • font-family: Tahoma, Geneva, sans-serif;
  • font-family: 'Times New Roman', Times, serif;
  • font-family: 'Trebuchet MS', Helvetica, sans-serif;
  • font-family: Verdana, Geneva, sans-serif;

Изображения

Почтовые программы так же по-разному работают с картинками:

  • Outlook блокирует
  • Apple Mail не блокирует
  • Gmail не блокирует

Чтобы дать понять получателю вашего письма, что в нем присутствуют картинки, для всех тегов img нужно прописывать alt-текст. Оптимально, если в письме будет ссылка на веб версию письма.

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

Другие особенности верстки

В последние годы стало стандартом отправка html версии письма. Но не стоит забывать, что почтовые системы загружают как обычную текстовую версию, так и html и далее уже сами решают, какую показывать.

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

Если следовать рекомендациям выше, то вы сможете создать такой шаблон письма, который будет правильно отображаться в различных клиентах.

Контакты студии

Пожалуйста, не стесняйтесь задавать вопросы. Наши сотрудники ответят на ваше сообщение как можно быстрее.

Беларусь, г. Гомель, ул. Сосновая 20

+375 44 707-61-24

info@reimax.ru

обновить