Как верстать письма в html

Верстка email рассылок от А до Я для чайников

Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Такие конструкции не будут работать в head и body:

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

2. Обязательные свойства для HTML-тегов

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

border=«0» — толщина рамки в пикселах;
cellpadding=«0» — отступ от рамки до содержимого ячейки;
cellspacing=«0» — расстояние между ячейками;
style=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
-webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
display: block — делает строчный элемент блочным:

alt="" — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
border=«0» — толщина рамки в пикселях (px);
width=«100» — ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=«100». Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=«30» и она будет пропорционально менять и высоту и ширину;
display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

3. HTML теги которые мы можем использовать в верстке

4. Наложения фона

Свойства background="" bgcolor="" можно применять только для тега

так как gmail не воспринимает эти свойства в других тегах, если заходить на почту с помощью браузера Safari.

Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами:

5. Отступы

Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода. Отступы можно делать с помощью CSS свойства padding. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу span, то десктопный Outlook 2007/10/13 + не будет применять отступы.

Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook.com.

Советую применять padding к ячейке таблицы:

Или использовать для отступов пустые ячейки таблицы.

7. Доктайп (DOCTYPE)

Для любого HTML документа необходимо использовать DOCTYPE. Он показывает браузеру, каким образом интерпретировать HTML-разметку. Есть разные версии языка HTML и XHTML, которые имеют разный синтаксис.

Для писем наиболее подходящим доктайпом является:

8. Работа с текстом

Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: bold; font-style: italic; или теги:

Жирный текст, аналог стиля font-weight: bold;

Наклонный текст курсив, аналог font-style: italic;

9. Цвет

Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр (HEX) #dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, #ffffff можно сократить #fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи. Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, #D4D4D4 нужно записать в таком виде: #d4d4d4.

RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb (240,248,250) не будет работать.

10. Картинки

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

11. Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:

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

Для электронной почты:

2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

Не нужно задавать таблице height=«100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.

3. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height.

display: block;" — решает проблему отображение свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

12. Шрифты

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

Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail).

13. Адаптивная верстка

На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.

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

Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center:

Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями:

Общая структура разметки будет выглядеть следующим образом:

Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.

Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы:

Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.

Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.

Основы верстки HTML-писем для веб-разработчиков

Светлана Шаповалова, коммерческий автор и переводчик, специально для «Нетологии» адаптировала статью Ли Манро, в которой он рассказывает об основах верстки писем и делится советами по ее оптимизации.

Верстка HTML-писем. Когда веб-разработчики видят эти слова — на глазах у них выступают слезы.

Если вы верстальщик, то рано или поздно столкнетесь с версткой писем, нравится вам это или нет. HTML-письма — это настоящий олдскул.

Эдакое путешествие в прошлое, в год, скажем, 1999 — эпоху вебмастеров, Frontpage и WYSIWYG-редакторов и табличной верстки.

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

Последние несколько лет я провел, проектируя инструменты для разработчиков, и два года из них работал ведущим дизайнером продукта в Mailgun — email-сервиса для разработчиков. Я многое узнал о том, как работают email-рассылки и с какими проблемами сталкиваются разработчики при верстке HTML-писем. В этой статье я поделюсь своими знаниями.

Светлана Шаповалова

Коммерческий автор и переводчик

курс

Старт в программировании

Узнать больше

• Научитесь писать код за две недели
• Создайте свой первый проект — небольшую игру для индивидуального подсчёта продолжительности жизни и мотивации
• Познакомитесь с основами самого популярного языка программирования — JavaScript

HTML-шаблоны

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

Верстка HTML-шаблонов для email-рассылки

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

Графические движки на клиентской стороне

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

Для обработки HTML-писем почтовые клиенты используют различные движки:

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

Кроме того, почтовые клиенты могут добавлять стили на свой вкус прямо сверху ваших. Например, Gmail приводит все шрифты для тега к виду:

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

Поддержка встроенных стилей и медиа-запросов в Gmail

В сентябре 2016 в Google объявили о поддержке встраиваемых стилей и медиа-запросов для Gmail. Это огромный шаг для развития email-индустрии. Сейчас Gmail поддерживает немалое количество CSS-свойств, что существенно упрощает разработку e-mail-шаблонов.

Использование табличной верстки

При блочной верстке с использованием div-ов возникают проблемы с позиционированием в различных клиентах. Особенно в тех, где для обработки используется Microsoft Word, к примеру, Outlook. Конечно, при желании можно пользоваться div-ами, но безопаснее верстать, будто за окном 1999 год — таблицами. Это означает:

• table вместо div
• #FFFFFF вместо #FFF
• padding вместо margin
• CSS2 вместо CSS3
• HTML4 вместо HTML5
• background-color вместо background
• HTML-атрибуты вместо CSS
• встроенные стили вместо подключаемых или блоков style.

Это советы из опыта. Понятное дело, вы можете их проигнорировать, но действовать придется на свой страх и риск.

При использовании таблиц, не забывайте использовать

Если пользуетесь Premailer, у него есть список с описанием CSS-атрибутов, применяемых в таких случаях.

Встроенные стили

Некоторые клиенты, особенно Gmail до недавних пор, беспощадно обрезают любые не встроенные стили. Есть несколько вариантов:

• вписывать стили вручную в каждую строку;
• использовать веб-инлайнер CSS;
• использовать программный CSS-инлайнер;
• положиться на почтовый сервис, который вы используете (если он поддерживает такую функцию).

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

Если вы вписываете стили руками, я советую использовать сниппеты и/или язык шаблонов с partial и helper. Это избавит вас от необходимости по многу раз прописывать одно и то же.

К веб-инлайнерам относятся: CSS-инлайнер в Campaign Monitor, CSS Inliner Tool в MailChimp и Responsive Email Inliner в Foundation for Email.

В качестве программного инлайнера я рекомендую модуль Juice для Node.js. Неплохие Ruby-альтернативы — Premailer gem и Roadie.

Кнопки

Чтобы создать кнопку, идеально отображаемую любым клиентом, придется поизвращаться. Как я уже говорил, надо использовать таблицы — даже для кнопок.

Мне нравится вот такое решение. С ним вы получите нормальную кнопку для веб-клиентов:

В таком случае, встроенные стили будут выглядеть примерно так:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ btn-primary» style=»border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;» width=»100%»>
<tr>
<td align=»center» style=»font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;» valign=»top»>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;»>
<tr>
<td style=»font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;» valign=»top» bgcolor=»#3498db» align=»center»> <a href=»» target=»_blank» style=»display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;»>Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>

Разберем подробнее. Первый тег <td> — это обертка, чтобы отцентрировать кнопку. Второй <td> задает размер кнопки. Некоторые клиенты, например, Outlook не распознают внутренние отступы в теге <a>, поэтому необходимо закрасить всю ячейку. В таком случае тег <a> займет все место во втором <td>, и вся область станет кликабельной.

Это лишь один из способов вставить кнопку в письмо. Конечно, не всегда получается добиться идеального отображения во всех клиентах, но и веб не всегда идеален до пикселя. Мне нравится этот способ, потому что он прост и не требует использования картинок или VML.

Что такое VML? Если вы хоть раз занимались разработкой писем, то, вероятно, сталкивались с этим понятием. Язык векторной разметки (Vector Markup Language, VML) поддерживается старыми версиями Outlook. В Microsoft заявили, что VML больше не поддерживается в Internet Explorer (IE), начиная с IE10. Тем не менее, пока в ходу Outlook 2007, 2010 и 2013, вы еще не раз увидите, как его используют для фоновых изображений.

Типографика

Проще всего пользоваться стандартными системными шрифтами. Это Helvetica, Arial и прочие. Однако можно использовать и веб-шрифты, например, Google Fonts. Расположите их за медиа-запросом WebKit, чтобы Outlook не ничего не перепутал.

<style>
@import url(http://fonts.googleapis.com/css?family=Pacifico);
/* Type styles for all clients */
h1 <
font-family: Helvetica, Arial, serif;
>
/* Type styles for WebKit clients */
@media screen and (-webkit-min-device-pixel-ratio:0) <
h1 <
font-family: Pacifico, Helvetica, Arial, serif !important;
>
>
</style>

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

Условия

Мы можем применять специальные CSS стили и показывать/скрывать определенные элементы/контент в различных версиях Outlook.

Если надо обратиться только к версии Outlook, базирующейся на Microsoft Word:

<!—[if mso]>
Этот контент видно только в версиях Outlook, базирующихся на Microsoft Word.
<![endif]—>

Версии Outlook, базирующиеся на IE:

<!—[if (IE)]>
Этот контент видно только в версиях Outlook, базирующихся на IE.
<![endif]—>

Если нужна определенная версия Outlook:

<!—[if mso 12]>
Этот контент видно только в Outlook 2007.
<![endif]—>

Также с помощью медиа-запросов можно выбрать клиентов, базирующихся на WebKit:

.special-webkit-element <
display: none;
>
@media screen and (-webkit-min-device-pixel-ratio:0) <
.special-webkit-element <
display: block !important;
>
>

Изображения и медиа

Изображения в письмах

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

• Outlook по умолчанию блокирует обработку изображений.
• Apple Mail нет.
• Gmail уже нет.

Не забывайте прописывать качественный alt-текст ко всем изображениям. Текст расскажет пользователю, что было написано на картинке или пояснит, что это за изображение, например, «Логотип компании». Можно даже привнести в текст немного творчества, как это сделали Email Monks:

Не забудьте добавить базовый сброс стилей для всех изображений:

<img src=»https://www.smashingmagazine.com/wp-content/uploads/2016/11/» alt=»» width=»» height=»» border=»0″ style=»border:0; outline:none; text-decoration:none; display:block;»>

Анимированные гифки поддерживаются большинством клиентов. Версии Outlook с 2007 по 2013 не отображают гифки, вместо этого показывается первый кадр.

Не забывайте также сжимать медиафайлы и загружать их на облако или хостинг. Большинство сервисов рассылок обычно делают это за вас.

У масштабируемой векторной графики (Scalable Vector Graphics, SVG) масса преимуществ для использования в вебе. Однако ее отображение в письмах может вести себя не так как надо, поэтому SVG нуждается в запасных вариантах или условиях. Обычно я не рекомендую использовать ее в письмах.

Для изображений, адаптированных под Retina-дисплеи, подбирайте изображения крупнее (1.5× to 3×) и изменяйте размер. Я обычно сохраняю изображения низкого качества в двух разрешениях, получается неплохо.

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

Видео в письмах

Видео поддерживается на iOS, Apple Mail и Outlook.com. В зависимости от клиента, вы можете использовать медиа-запросы, чтобы показывать или скрывать видео.

Формы в письмах

Поддержка форм везде разная. Поэтому лучше держитесь от них подальше и при необходимости подключайте внешние формы. Понятное дело, все зависит от целей. Безопаснее не пользоваться формами, но, к примеру Rebelmail и Mixmax делали классные штуки для опросов и e-commerce.

Кнопки быстрого действия в Gmail (Gmail Actions)

В Gmail можно использовать удобные кнопки быстрого действия. Возможно, вы встречали их в оповещениях GitHub или Amazon.

Создание шаблона HTML письма с нуля.

Nicole Merlin Last updated Nov 22, 2022

Лучший способ понять любой процесс — выполнить его самостоятельно, с самого начала. Сегодня мы проделаем это с дизайном электронного письма, создавая его с нуля.

Материалы

Для начала стоит упомянуть, где я взял некоторые ресурсы.

• Чудесные 2D иконки от Pierre Borodin на Dribbble
• Использованные шрифты Oil Can, Source Sans Pro и Mission Script
• Иконки социальных сетей от Metrize Icons

Теперь, как мы уже обсуждали в предыдущем уроке, начинаем HTML письмо с XHTML doctype:

После этого можем начать строить остальную часть письма.

Создание контейнера и основной таблицы.

Прежде всего мы создадим общую структуру нашего письма с помощью тега <body> и зададим ему нулевые margin и padding, чтобы избежать неожиданного пространства.

Мы также создадим table с шириной 100%. Это и будет служить основным контейнером нашего письма, т. к. стили для body не везде поддерживаются. Если Вы хотите добавить фон для body, Вам необходимо будет применить это свойство для основной таблицы.

Установите нулевые значения cellpadding и cellspacing, чтобы избежать неожиданного пространства в таблице.

Внимание: мы собираемся оставить значение border=»1″ для всех таблиц, чтобы видеть скелет макета. В конце мы удалим это значение с помощью простой функции Найти и Заменить.

Если какой-либо атрибут существует в HTML, используйте его вместо CSS свойства.

Теперь поместите таблицу шириной 600px внутрь контейнера основной таблицы. 600px является безопасной максимальной шириной электронного письма, чтобы комфортно отображаться в большинстве настольных и почтовых клиентов на разных разрешениях мониторов.

Задайте ширину в HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML писем: если какой-либо атрибут существует в HTML, используйте его, вместо CSS свойства.

Теперь заменим наше небольшое приветствие ‘Hello!’ на эту таблицу:

Мы также добавили инлайновые стили, которые задают свойству border-collapse значение collapse . Если мы этого не сделаем, последние версии Outlook добавят небольшое пространство между таблицей и обводкой.

Создание Структуры и Шапки.

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

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

Теперь зададим им цвет в соответствии с дизайном. Поскольку bgcolor является валидным атрибутом HTML, мы будем использовать его вместо CSS, чтобы задать цвет фона. Помните, чтобы всегда использовать полное шестизначное значение hex кода, трёхзначные сокращения не всегда работают.

Хорошо, в следующем шаге сфокусируемся на Строке 1. Нам необходимо задать padding в ячейке и затем вставить изображение.

Использование Padding

Когда используете padding в HTML письмах, всегда необходимо задавать каждое отдельное значение (top, right, bottom и left), в противном случае результаты могут быть непредсказуемы. Я считаю, здесь всё ещё можно использовать сокращённую форму записи padding: 10px 10px 8px 5px; , но если у Вас возникнут проблемы, напишите полную форму padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;

Если у Вас всё же возникли большие проблемы с padding (например почтовый клиент удаляет Ваш CSS), не используйте их совсем. Просто используйте пустые ячейки, чтобы создать пространство. Совсем не обязательно использовать gif распорку, можно просто добавить style=»line-height: 0; font-size: 0;» для ячейки, вставить внутрь &nbsp; и задать определённую высоту или ширину. Пример ниже:

Также обратите внимание, что безопаснее использовать padding в <td> тэгах, а не в <p> или <div>. Они ведут себя намного более непредсказуемо.

Итак, мы использовали немного инлайновых стилей CSS, чтобы задать padding для ячейки. Теперь вставим изображение, добавив alt и style=»display:block;» . Это делается для того, чтобы некоторые почтовые клиенты не добавляли пробелы под изображением. Отцентрируем изображение с помощью align=»center» для нашего <td> тэга. Мы также добавили alt тэг, который необходим для того, чтобы, когда наше письмо будет только загружаться, оно в большинстве случаев будет без изображений.

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

Создание области конента

Прежде всего добавим padding для средней ячейки, так, чтобы таблица внутри имела вокруг немного пространства, в соответствии с дизайном.

Теперь добавим таблицу с тремя строками для главного контента — одна для главного заголовка, вторая для вступительного текста и третья для строки с двумя колонками. Зададим ширину таблицы 100%, используем проценты, а не пиксели, т.к. это поможет нам в дальнейшем сделать письмо адаптивным. Если всё время использовать значения в пикселях, в конечном итоге можно запутаться с огромным количеством значений, которые придётся переопределять с помощью медиа запросов. Если задать определённую ширину родительскому контейнеру, а вложенным в него таблицам размеры в процентах, все элементы будут адаптироваться пропорционально.

Теперь вставим наш контент и добавим padding для средней ячейки.

Добавим две колонки с контентом для строки 3. Нам нужен margin между двумя ячейками, но margin не поддерживается, поэтому мы создадим таблицу с тремя колонками и средняя колонка останется пустой.

Сколько бы я не придерживался процентов, но, если Вам нужен контент определённого размера, может быть непросто перевести его в проценты (например, колонки будут равны 48,1%, что может привести к путанице ). Именно поэтому, учитывая, что наши изображения равны 260px, мы создадим колонки шириной 260px, с ячейкой для margin в 20px посередине. (В общем выходит 540px: 600px ширина таблицы минус padding 30px с каждой стороны). Обязательно обнулите font-size и line-height и добавьте неразрывный пробел &nbsp; в ячейку с margin.

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

Теперь добавим изображение и контент в эти колонки. Т.к. нам нужно несколько строк, вставим ещё одну таблицу, потому что мы не можем использовать colspan или rowspan. Мы также добавим padding между изображениями и скопируем каждую колонку.

Здесь мы установили ширину изображений с помощью HTML на 100% ширины колонки. Это, опять же, для того, чтобы сделать письмо адаптивным. Мы можем использовать только медиа запросы, чтобы изменить ширину родительского элемента. Нам нужно переопределить высоту в пикселях, потому что используя style=»height: auto» теперь не будет работать везде (кашель, Outlook). Так что зададим в пикселях. Это значит, нам придётся установить height: auto!important этим изображениям используя медиа запросы, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Как только установим ширину в процентах, не нужно будет ничего переопределять. Чем меньше элементов для переопределения, тем лучше.

Footer

Теперь добавим padding для строки footer.

Внутрь этой ячейки вставим другую таблицу, чтобы получить две колонки.

Создадим другую небольшую таблицу для иконок социальных сетей. Зададим родительской ячейке align=»right» . Убедитесь, что Вы установили border=»0″ на ссылках с изображением (чтобы избежать подчёркивания ссылки) и не забудьте display:block

Теперь вставим текст и зададим ширину для ячеек, на всякий случай, даже если между ними достаточно пространства. Установим ширину этой ячейки на 75% и других на 25%.

Ну вот и всё! Наша вёрстка закончена.

Валидация

Давайте прогоним код через W3C валидатор, чтобы убедиться, что ничего не сломалось. Если Вы точно всему следовали, то валидатор скажет, что всё в порядке.

Далее запустим тест через Litmus, чтобы убедиться, что структура нашей электронной почты отлично работает. Вот сводка из моего теста:

Взгляни онлайн

Стилизация текста

Наша первая строка — это заголовок. Будем использовать тег <b> , чтобы сделать текст жирным, потому, что, как мы знаем, если есть возможность стилизовать в HTML, используем это, вместо CSS свойств.

Также добавим эти стили ко всем другим ячейкам текста:

Далее нам нужно стилизовать текст футера и, кроме этого, приведём в порядок ссылку откказа от рассылки. Стилизуем ссылку используя одновременно CSS и HTML тег <font> . Дублирование тегов — это лучший способ убедиться, что Ваши ссылки не будут отображаются синим по умолчанию.

И вот оно! Всё готово! Время, чтобы выключить границы и увидеть, как всё красиво выглядит. Пройдитесь по коду и замените каждое border=»1″ на border=»0″

Сейчас всё выглядит немного грустно, плавает в белом пространстве, так что давайте вернёмся к нашей первой ширине 600px и добавим:

Теперь ничего не плавает в пространстве. В качестве последнего шриха я добавлю 30px padding к нижней части самой первой ячейки, чтобы предотвратить внезапную остановку нашей электронной почты на некоторых почтовых клиентах (таких, как Apple Mail), и 10px padding сверху, так, чтобы наш синий заголовок имел немного воздуха.

И это всё! Мы готовы к финальному тесту.

Взгляните онлайн

Готово!

Если вы использовали какие-либо комментарии, избавьтесь от них. Некоторые почтовые клиенты могут споткнуться о Ваши комментарии, поэтому разумно не оставлять лишний код в файлах.

Сейчас самое подходящее время для финального теста и тогда Ваше электронное письмо готово к отправке!

Ну а чтобы поднять Ваши знания на новый уровень, смотрите следующие уроки:

How-to: Правила вёрстки email-писем

Вёрстка HTML для электронной почты — интересная и довольно сложная задача.

Электронная почта — отличный инструмент коммуникации, который позволяет компаниям доставлять аудитории контент удобным для нее способом. При этом читать письма в формате plain text не всегда удобно, поэтому в современных новостных рассылкахиспользуются различные графические элементы.

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

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

Основы HTML для электронной почты

Главной проблемой при вёрстке email-писем является тот факт, что существует огромное количество софта для чтения подобных сообщений — от десктоп-продуктов вроде Eudora Outlook, AOL, Thunderbird и Lotus Notes до веб-сервисов вроде Yahoo!, Gmail, Mail.ru и до мобильных почтовых приложений.

От того, как программное обеспечение используется каждым из таких инструментов для рендеринга HTML и будет зависеть, какой HTML и СSS-код будет работать, а какой нет.

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

Если вы собираетесь верстать письма вручную или использовать готовый шаблон, стоит придерживаться двух основных правил создания HTML для электронной почты:

1. Необходимо использовать таблицы HTML для большего контроля над шаблоном письма. Даже если вы привыкли полагаться на CSS в вебе — не переносите эту привычку в мир email, потому что это не сработает при том разнообразии клиентского софта.
2. Используйте встроенный CSS (inline) для получения большего контроля над другими элементами письма (шрифты, цвет фона и т.п.) — вот отличная версияCSS Inlinerот «Печкина».

Самый простой способ увидеть, как HTML-таблицы и встроенный CSS могут использоваться в шаблонах email-писем — это скачать некоторые такие шаблоны с сайтов компаний Campaign Monitor и MailChimp (прим. пер: вот здесь собраны примеры дизайна email-рассылок клиентов сервиса Pechkin-mail).

При изучении этих шаблонов будут заметны несколько вещей, которые мы подробнее обсудим далее:

• Объявления стилей CSS располагаются после тега <body>, а не между тегов <head>;
• Не используются сокращения CSS: вместо сокращенного правила для стиля font: 12px/16px Arial, Helvetica, следует создать отдельные сущности для каждого шрифта, с прописыванием им значений font-family, font-size и line-height;
• span и div используются редко и для реализации конкретных эффектов, основную же работу по описыванию шаблона письма берут на себя таблицы HTML;
• Стили CSS также используются на базовом уровне, без применения каких-либо CSS-файлов.

Шаг 1: Использование таблиц HTML для верстки шаблонов

Да, таблицы вернулись. Да, веб уже далеко ушел вперед, но мы-то не в вебе! Из всего многоорбазия email-клиентов найти такой, который бы обладал широкой и качественно поддержкой CSS — та еще задача. Это значит, что мы просто вынуждены использовать таблицы, если хотим, чтобы создаваемые письма рассылок консистентно отображались у каждого читателя.

Так что придется отложить в сторону лучшие практики соответствия веб-стандартам и засучить рукава, разбираясь в вёрстке.

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

Одноколоночный шаблон, как правило, состоит из:

1. Заголовка, содержащего логотип и какое-то количество навигационных ссылок на родительский сайт — с целью брендинга и ознакомления читателей письма с дизайном самого сайта.
2. Внутренних ссылок, которые ведут на какие-то участки конкретно этого письма.
3. Подвал (футер) в нижней части email-сообщения, который чаще всего содержат ссылки, дублирующие навигацию из заголовка плюс инструкции по тому, как отписаться от рассылки.

В двухколоночных письмах также есть заголовок и футер. Как и в случае двухколоночной веб-страницы, в подобных сообщениях одна колонка узкой — в ней помещаются ссылки для получения дополнительной информации и прочие навигационные элементы, а второй, более широкий столбец, содержит, собственно, контент сообщения. Чтобы заставить такие письма хорошо отображаться на смартфонах и планшетах приходится приложить немало усилий по вёрстке.

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

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

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

Вот какой подход можно использовать при создании HTML-писем:

• Для двухколоночных шаблонов создается одна таблица для заголовка, вторая — для центральных столбцов с контентом и третья — для футера. Эти таблицы «оборачиваются» в еще одну общую таблицу («контейнер»). Этот же подход можно использовать для одноколоночных шаблонов, просто таблица с контентом должна состоять из одного столбца. Этот подход особенно хорош, если письмо содержит множество изображений, разбитых по разным ячейкам. Простая таблица со строками <td> для заголовка (с colspan=”2” в случае двухколоночного дизайна), контента и футера будет хорошо отображаться на всем почтовом софте (кроме Lotus Notes).
• Внутри таблиц и тегов <td> можно использовать атрибуты, помогающие контролировать отображение таблицы. К примеру, установка border=”0", valign=”top”, align=”left” (или center, если это будет хорошо выглядеть в конкретном варианте оформления), cellpadding=”0", cellspacing=”0" и т.д. Главным образом это помогает старым почтовым программам отображать письмо в более или менее приемлемом виде.
• Даже если дизайн письма не предполагает отображение границы таблицы, во время разработки бывает полезно установить величину border=”1” — это помогает при отладке и поиске проблем, которые могут возникнуть с выравниванием контента внутри тегов <tr> и <td>. При запуске рассылки в «продакшн», границу можно установить обратно на border=”0”.

Этот подход может вызвать недовольство поклонников разработки по последним стандартам, но это единственный путь добиться приемлемого результата. К тому же использование табличной вёрстки вовсе не подразумевает использование устаревших методов в других аспектах создания email-рассылок. К примеру, неважно, как плохо Lotus Notes отображает HTML, никогда не нужно обходить это с помощью тега <font>. И даже при всех минусах движка рендеринга HTML в MS Outlook 2007, с таблицами он справляется вполне хорошо.

Конечно, везде есть сложности. В следующем разделе статьи поговорим о стилях.

Шаг 2: Добавляем стили CSS

Выше мы говорили о том, что многие email-клиенты не сильны в поддержке CSS. Однако это не значит, что вы не должны использовать стили в своих письмах, сверстанных с помощью таблиц. Нужно лишь учитывать несколько моментов.

Прежде всего, следует использовать встроенные стили, чтобы хранить в них всю нужную информацию, как показано ниже:

Таким же образом можно использовать <table>, <td>, <p>, <a> и т.п.

Не нужно использовать объявление CSS <style> в HTML-теге <head>, как часто делают при вёрстке веб-страниц. Вместо этого объявление <style> нужно разместить сразу за тегом <body> — однако Gmail ищет любые теги style в письме и удаляет их. Кроме того не стоит даже тратить время на использование элемента link для того, чтобы сослаться на внешний файл стилей: популярные email-клиенты проигнорируют, изменят или удалят такие обращения к внешним сущностям.

Для таблицы-контейнера, в которой хранятся таблицы заголовка, контента и футера, следует установить ширину на уровне 98%. Некоторым почтовым клиентам (например, Yahoo) нужна прокладка по 1% с каждой стороны письма, чтобы его корректно отобразить. Если боковые элементы критически важны для вашего письма, то лучше уменьшить ширину таблицы до 95% или даже 90%, чтобы точно избежать возможных проблем. При этом таблицы внутри контейнера, само собой, должны иметь ширину в 100%.

Помещать информацию об основном шрифте нужно в табличный тег <td>, который ближе всего расположен к собственно контенту. Да, это может вылиться в многочисленное повторение объявлений стилей в разных ячейках <td>. Тем не менее выносить заглавный стиль в заголовки (<h1>, <h2>) следует только в крайних случаях.

Не стоит злоупотреблять тегами <div>, их можно использовать для выравнивания небольших блоков контента со свойством float и ссылок на элементы справа или слева от ячейки <td>. Gmail игнорирует объявления CSS float (другие клиенты вроде Yahoo и Outlook online работают с ними нормально). Иногда лучше написать больше кода для более сложного табличного шаблона, чем полагаться на использование на выравнивание с помощью float в узкой колонке. Плохая поддержка этого свойства почтовыми клиентам — одна из причин некорректного отображения писем. (Кстати об этом свойстве на Хабре есть интересная статья).

Теги <div> полезны время от времени, а вот <span> работает всегда — потому что с его помощью как раз и встраиваются элементы. В некоторых случаях теги <span> могут быть использованы не только для установки цвета и размера текста: с их помощью текст можно размещать над или под контентом.

Важный момент: некоторые сервисы email-рассылок могут распаковывать определения стилей, чтобы сделать их более явными и, соответственно, более читабельными для почтового софта. К примеру, сокращение CSS style=”margin: 10px 5px 10px 0;” может быть развернуто в более длинное объявление, которое показано выше по тексту. Перед рассылкой следует протестировать разные варианты писем и посмотреть, что происходит с кодом после отправки. В начале лучше использовать сокращения CSS, поскольку даже в самом плохом случае, так или иначе почтовые клиенты смогут их понять.

Если скачать и изучить шаблоны писем с сайтов вроде MailChimp или Campaign Monitor, то станет ясно, что в них таблица-контейнер рассматривается в качестве HTML-тега <body>. Например, команда сервиса Campaign Monitor обращается к этой таблицы как к“BodyImposter” — отличный способ представления таблицы-обертки. С точки зрения CSS, таблица-контейнер делает ровно то, что делал бы элемент <body>, если бы сервисы вроде Gmail его не игнорировали.

Шаг 3: Применение лучших практик

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

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

Первыми средствами тестирования писем являются браузеры Firefox и Internet Explorer. Если сообщение хорошо выглядит в них, то велик шанс на то, что и в клиентах вроде Outlook, Yahoo, Gmail и других с ним не будет больших проблем. Если это возможно, следует даже пойти дальше и протестировать письмо в IE 6 — это позволит увидеть, как письмо будет «рендериться» в Outlook 2003. Чтобы примерно понять, как письмо будет показываться на iPhone и iPad нужно протестировать его в Safari.

После того, как письмо нормально отображается в IE и FF, нужно отправить его на некоторый диапазон тестовых почтовых адресов с помощью сервиса email-рассылок. В идеале в выборке должны быть аккаунты из самых популярных почтовых сервисов — конечно, окончательный выбор зависит от того, на каких доменах адреса у людей из списка рассылки. Если среди них нет никого, с почтой на Yahoo, то не стоит и тратить время, на подгонку письма под эту систему.

Ниже представлены полезные приемы вёрстки, которые облегчают этап тестирования:

• Иногда ситуацию улучшает переключение с ширины в процентах на фиксированное значение. Это не идеальный вариант, поскольку читатели часто «ресайзят» окно браузера во время чтения письма, но иногда другого способа заставить письмо нормально выглядеть в разных клиентах просто нет.
• Если возникает проблема с расстоянием между столбцами, прежде всего следует поиграть с атрибутами таблицы cellpadding иcellspasing. Если это не помогает, то следует применить CSS-атрибуты margin и padding. На старых почтовых программах лучше работает вариант с чистым HTML.
• Если ячейка <td> закрывается сразу под тегом <img>, может возникнуть проблема с расположением изображения. Это давняя проблема HTML. Решить ее можно разместив закрывающий тег </td> сразу после тега <img> на одной строке с ним.

В дополнении к этому, рекомендуется следовать представленным ниже лучшим практикам:

• Следует избегать использования JavaScript. Большинство email-программ его в любом случае отключат.
• Если изображение «нарезано» и размещено в нескольких ячейках HTML-таблицы, нужно проверять письмо с помощью разных тестовых аккаунтов. Иногда бывает так, что письмо выглядит отлично в Outlook, изображение разъезжается в других почтовых программах. Кроме того стоит рассмотреть вариант, при котором изображение становится фоном для новой HTML-таблицы, которая заключает в себе все строки и столбцы той таблицы, в которой будут отображаться части картинки. Этим можно добиться такого же эффекта, как при «нарезке» изображения при меньшем количестве кода. Нужно помнить, что Outlook 2007 не показывает фоновые изображения — всегда важно тестировать письмо на наиболее важном и популярном у подписчиков почтовом сервисе.
• Для фоновых изображений лучше использовать атрибут background вместо CSS. Это позволяет добиться большего единообразия при работе с различными почтовыми сервисами.
• Хранить изображения из письма нужно на веб-сервере, в идеале, в папке, отличной от той, где хранятся картинки основного сайта компании (например, папка может называться /images/email), и их никогда нельзя удалять. Некоторые люди открывают письма недели и месяцы спустя их получения, используя их аналогично закладкам в браузере — чтобы вернуться к нужному контенту.
• В изображениях необходимо использовать атрибуты alt, height и width. Задание значений этих элементов улучшает результаты при работе с Gmail. Кроме того, это позволяет шаблону письма не разваливаться, если пользователь отключил отображение картинок. Примечание: Outlook 2007 не распознает атрибут alt.
• В тегах ссылок нужно использовать атрибут target=”_blank” — люди, которые читают письмо в веб-клиенте вряд ли захотят, чтобы ссылка открылась в том же окне.
• Использование изображений размером 1×1 пиксель может помочь в выравнивании контента письма, однако часто такие следящие пиксели используют спамеры, чтобы понять, было ли открыто это письмо. Поэтому применение таких маленьких изображений повышает вероятность того, что письмо будет помечено почтовой системой, как спам.
• Также не нужно использовать огромные изображения выше собственно письма — это еще одна излюбленная тактика спамеров, и фильтры этого очень не любят.

Очень важно удостовериться, что письмо отображается корректно в почтовых клиентах, в которых отключен показ изображений. В большом количестве email-клиентов по умолчанию эта настройка стоит на “off”. Это значит, что при использовании фонового изображения с белым текстом поверх него, при невозможности загрузки этой картинки, возникнут проблемы. Чтобы этого избежать нужно прописать тёмный фоновый цвет для этой части HTML-таблицы.

После настройки и проведения работ, которые привели к тому, что письмо качественно отображается на тестовых почтовых аккаунтах, можно «прогнать» его через финальный чеклист. Он может выглядеть так:

• Отображается ли в поле «От кого» правильная информация (в виде имени, а не просто почтового адреса)?
• Корректно ли заполняется строка темы письма?
• Корректна ли и визуально очевидна контактная информация?
• Есть ли в шапке письма пояснение о том, что «вы получили это письмо, потому что…» и ссылки для того, чтобы отписаться от рассылки в его подвале?
• Есть ли в письме просьба добавить адрес отправителя в контакт-лист пользователя?
• Есть ли в шапке письма ссылка для его отображения в веб-версии?

Многие сервисы email-рассылок позволяют протестировать то, как письмо будет отображаться в разных почтовых системах — это позволяет увидеть возможные проблемы до его отправки.

Шаг 4: Вёрстка для Gmail, Lotus Notes и Outlook 2007

Gmail, Lotus Notes и Outlook 2007 ставят перед верстальщиками и дизайнерами новые вызовы. К примеру, в Outlook 2007 поддержка CSS значительно хуже, чем в предыдущих версиях сервиса.

Gmail позволяет больше вольностей — поскольку это веб-сервис, то он не может контролировать контент отображаемого сообщения. Соответственно, инженерам Google пришлось поработать над тем, чтобы их почтовая система работала корректно вне зависимости от качества HTML и CSS в самих письмах.

В итоге Gmail ведет себя как артефакт из 90-х, когда веб-стандарты находились на примитивном уровне.

Прежде всего, Gmail удаляет CSS-стили, содержащиеся между любы тегами стилей, вне зависимости от того, в каком месте письма они будут обнаружены. Единственная альтернатива стилям — отображение шрифтов внутри HTML-таблиц, но при этом шрифт часто оказывается больше, чем предполагалось (вне зависимости от структуры HTML).

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

Вот несколько трюков, которые работают в Gmail и старых почтовых клиентах:

• Определять фоновый цвет лучше в ячейке <td> с помощью атрибута bgcolor, не используя CSS.
• Побочным эффектом такого подхода является тот факт, что фоновое изображение можно сделать сколь угодно длинным — если контент в письме разного размера, то использование супер-длинной картинки позволяет увеличивать или сокращать высоту письма в зависимости от текста сообщения. Однако в Outlook 2007 фоновые изображения полностью игнорируются.
• Если это работает лучше, то можно использовать padding для указания величины полей ячейки <td>. Стиль margin в таких ячейках не сработает, а padding — вполне.
• В том случае, если необходимо отобразить границу вокруг ячейки <td>, следует помнить, что Gmail по-умолчанию отображают границу ячейки, когда она определена в div, но не показывает ее, когда она определена, как стиль границы в теге <td>.
• Если нужно разместить светлую ссылку на темном фоне, лучше поместить объявление шрифта в ячейку <td> (то же касается тегов <p> и <a>), а затем добавить к тегу стиль color:.
• Если шрифты в <a> и <p> оказываются разного размера, то тег <a> надо завернуть в <p>.
• Gmail агрессивно использует правую колонку экрана пользователя, в результате содержимое письма сжимается левее в сторону центра экрана. Необходимо устанавливать размер ячеек на 10 пикселей — это позволит избежать наложения текста на левую и правые границы.
• Во время тестирования HTML-письма в Gmail с высокой долей вероятности обнаружится, что в тегах <td>, <h1>, <h2>, <p>, <a> и других не хватает одного или более стилей шрифтов. Нужно проверить каждый шрифт, чтобы убедиться в том, что почтовая система Google отображает его корректно.

Помимо Gmail есть еще один «злой гений» среди почтовых сервисов — это Lotus Notes. Многие большие корпорации продолжают поддерживать и обновлять этот софт.

К сожалению, определить, какие компании используют Notes «извне» никак нельзя. Единственный выход — следовать лучшим практикам, описанным в статье. То есть, чем примитивнее код вёрстки, тем выше вероятность, что он будет хорошо работать с Notes.

Эта система таит в себе немало сюрпризов. Например, старые версии Notes могут конвертировать изображения в собственный проприетарный формат или просто игнорировать полностью корректные базовые теги HTML в одном письме, но отображать их в другом сообщении.

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

• Как обсуждалось выше, следует использовать таблицу-контейнер, в котой содержатся все внутренние таблицы шаблона (шапка письма, контент и подвал). Это позволит скрепить все части HTML-письма воедино, не позволил им разъехаться при отображении в Notes.
• Следует оставлять прокладку из пустого места вокруг таблицы-контейнера, указав ширину в процентах (и задав ширину меньше 100%) и используя cellpadding как минимум величиной 5.
• Нужно избегать использования объявления style в тегах письма <head>. Notes, как и Gmail может удалить стили. Поэтому необходимо использовать встроенные (inline) стили в тегах <table, <td>, <h2>, <h2>, <p>, <a> и др.
• Нужно использовать абсолютные URL для изображений, которые хранятся на веб-сервере. С привычкой Notes конвертировать изображения особо ничего не поделать, но хранение картинок на внешнем сервере может помочь.
• Внутренни ссылки с якорями крайне редко (если не сказать никогда) не работают в Notes. Проще просто игнорировать ссылки, которые позволяют читателю перепрыгнуть на конкретный участок письма.
• Следует избегать использования colspan в HTML-таблицах. Notes — особенно его ранние версии — может иметь дело только с простейшими табличными шаблонами.
• Следует убедиться в корректности ширины ячеек <td>. В отличие от веб-браузеров, которые самостоятельно приводят ширину ячейки к самой большой установленной величине, Notes установит ширину каждой ячейки ровно так, как она была для нее прописана.
• Центрирование шаблона вряд ли сработает в Notes. Следует использовать шаблоны, выровненные по левому краю.

Использование этих техник позволит добиться хорошего рендеринга писем в Gmail и Lotus Notes и поможет качественного отображения в Outlook 2007, в котором применяется более старый движок рендеринга.

У Campaign Monitor есть довольно подробный список элементов CSS, которые поддерживаются популярными мобильными, веб и десктоп-почтовыми клиентами.

Шаг 5: Вёрстка для телефонов и планшетов

Огромное число людей читают HTML-письма, открыв их на своих смартфонах или планшетах, а не только в вебе или на десктопе. Это значит, что адаптация таблиц для отображения на мобильных устройствах будет крайне полезной — к тому же, это не так уж и сложно.

Для этого нужно использовать определние CSS @media для задания ячеек <td> в HTML-таблицах и увеличения шрифтов для их качественного отображения. К примеру, шрифты на iPhone должны быть размером не менее 13 пикселей, чтобы их можно было разобрать.

Веб- и десктоп-клиенты просто проигнорируют определения @media, в то время, как смартфоны и планшеты их заметят и применят для качественного отображения сообщения.

Ниже представлен простой набор определений @media для отображения одноколоночного шаблона с HTML-таблицами на телефонах и планшетах:

Этот код следует разместить сразу после тега body, после в определении таблицы и в ячейках<td>. Когда такое письмо будет открыто на мобильном устройстве (или горизонтально ориентированном веб-браузере) размером менее 480 пикселей эти определения будут активированы.

Секрет вёрстки двухколоночных шаблонов HTML-писем для отображения на маленьких экранах залючается в помещении каждого столбца в отдельную таблицу. Затем для каждой HTML-таблицы нужно использовать встроенный CSS для float:left и HTMLalign=”left” для выравнивания всего контента в столбце по его левому краю. Затем в описание <table> нужно добавить определение а в ячейки <td> — >

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

Заключение

Многие люди, которым приходят те или иные почтовые рассылки, предпочитают просматривать HTML-письма, а не их plain text версии по целому ряду причин. Для разработчиков, однако, задача по созданию HTML-рассылки может быть не столь тривиальной.

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

Список источников для дальнейшего изучения:

Представленные ниже ресурсы содержат ценную информацию, которая поможет всем желающим лучше освоить вёрстку писем в HTML: