Сегодня существует много сервисов, предлагающих клиентам инструменты для создания почтовых рассылок. И если в компании принимается решение сделать шаблон самостоятельно, то придется разбираться с вопросами верстки, так как шаблон для сайта и шаблон для письма - разные вещи. Существует несколько движков для рендеринга содержимого письма:
- 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 и далее уже сами решают, какую показывать.
Если просматривать письмо на мобильном клиенте, можно заметить рядом с заголовком сообщения, чаще всего под ним, часть содержимого письма. Этот элемент стоит использовать для детализации письма и побуждения получателя его открыть. Если не уделять этому должного внимания, то на таком важном месте может оказаться и подпись отправителя и кнопки социальных сетей или часть ссылки на отказаться от подписки.
Если следовать рекомендациям выше, то вы сможете создать такой шаблон письма, который будет правильно отображаться в различных клиентах.