Как сверстать html-письмо
При верстке писем нужно учитывать, что существует большое количество различных почтовых клиентов и у многих есть свои алгоритмы обработки писем. Главное, что большинство не поддерживают блочную верстку, поэтому для верстки писем используем резиновую табличную верстку. Все стили прописываем внутри тегов. Медиа-запросы не сработают во многих почтовых клиентах, поэтому нужно это учесть и использовать медиазапросы по минимуму.
Запомните главное: при разработке сайтов мы используем современную блочную верстку, в письмах — устаревшую табличную. Прописываем стили внутри тегов. И работаем с резиновой версткой и медиа-запросами, — не по отдельности, а вместе, сочетая оба подхода.
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Viewport
<meta name="viewport" content="width=device-width" />
Фон для письма добавляем в body и в корневую таблицу
<body style="font-size: 20px; font-family: Verdana, sans-serif; margin: 0px; padding: 0; color: #31363a; background-color:#ffe8d0; background-image: url('images/bg.png'); background-repeat: repeat; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color:#ffe8d0; background-image: url('images/bg.png'); background-repeat: repeat;">
Центрируем основное содержимое с шириной в 600px
...
<tr>
<td align="center" valign="top">
<span style="max-width: 600px; display: block;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
...
</tr>
</table>
</span>
</td>
</tr>
...
Все таблицы в таком формате:
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
Добавляем картинки
<img src="images/logo.png" alt="Company" style="max-width: 100%; height: auto; display: block;" border="0" />
Делаем две колонки, которые съедут одна под другую на мобильных устройствах:
<tr>
<td style="padding-top:0px;padding-bottom:20px;padding-right:0;padding-left:0;text-align:center;" >
<!--[if (gte mso 9)|(IE)]>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="50%" valign="top" >
<![endif]-->
<div class="column" style="width:100%;max-width:290px;display:inline-block;vertical-align:top;" >
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td align="center" style="padding-top:10px;padding-bottom:5px;padding-right:5px;padding-left:5px;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size:15px; line-height:18px; color:#222222;">Товар № 1 — 990 рублей</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top" >
<![endif]-->
<div class="column" style="width:100%;max-width:290px;display:inline-block;vertical-align:top;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td align="center" style="padding-top:10px;padding-bottom:5px;padding-right:5px;padding-left:5px;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size:15px; line-height:18px; color:#222222;">Товар № 2 — 990 рублей</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
Интерактивные письма в Gmail
Gmail позволяет симулировать CSS-селекторы классов, для этого нужно использовать атрибуты, которые почтовый сервис не вырезает (например, title). Ниже представлен код для создания в письме кнопки с hover-эффектом. Также в код добавлены содержащий два селектора классов (.divbox) и атрибута (class=”divbox”), чтобы эффект сработал и в почтовых клиентах, вырезающих селекторы атрибутов (например, в Yahoo! Mail).
<html>
<head>
<style>
.divbox,
* [lang~="x-divbox"]:hover{
background-color: green !important;
color: white;
}
</style>
</head>
<body>
<div class="divbox" lang="x-divbox" style="padding:10px;width:100px;height:40px;
background-color:#eeeeee;">Divbox Content</div>
</body>
Использованный в этом коде атрибут lang входит в число немногих атрибутов, которые Gmail не вырезает (в этом списке title, lang, width, alt, href). Здесь можно было бы использовать title, но у него есть один «побочный эффект» — при наведении курсора, этот заголовок был бы видим. Lang же, в свою очередь, универсален (подходит для всех элементов) и не появляется при наведении.
В спецификациях HTML данный атрибут предполагается использовать по-другому. Поэтому здесь используется префикс “x-”, который говорит почтовому клиенту не обрабатывать атрибут lang.
А здесь перечислены все стили, работоспособность в Gmail которых подтвердилась экспериментами Джастина Ку:
* E[foo] * E[foo="bar"] * E[foo~="bar"] * E[foo^="bar"] * E[foo*="bar"] * E[foo$="bar"] * E:hover * E:link * E:visited * E:active E F E > F E + F E ~ F
Ниже представлено описание того, как Gmail обрабатывает CSS в заголовке письма:
.divbox {..} //Разрешено, но бесполезно - Gmail вырезает из элементов атрибуты классов
#divbox {..} //Разрешено, но бесполезно - Gmail вырезает из элементов id-атрибуты
[class~="divbox"] {...} //Удален Gmail
* [class~="divbox"] {...} //Разрешено, но бесполезно — нет атрибутов классов
div {...} //Разрешен, но не особенно полезен
div:hover {...} //Удалено Gmail. Псевдоклассы не поддерживаются? Не совсем так!
* div:hover {...} //Разрешено! Уже интереснее…
* [lang~="x-divbox"] {...} //Разрешено, с этим можно работать
* [lang~="x-divbox"]:hover {...} //Разрешено! То, что нужно!
Вот, к чему мы стремимся (цветом отмечены «точки прерываний» для разных размеров экрана):
- Указывайте как можно больше стилей для элементов. Если стилей нет, их «навяжет» почтовый клиент и контент отобразится не так, как хотелось.
- Вместо margin я использую padding для td
- Все картинки загружаются на внешний сервер, чтобы картинку мог отркыть любой пользователь с любого региона, с любого устройства.
- проверяйте вид письма с отключенными картинками, задавайте фон под фоновой картинкой того же цвета, что и основной цвет в картинке. Например, фоновая картинка темного увета, а текст на ней белый, при отключенных картинках, фоновый цвет должен быть так же темного цвета, иначе белый текст не будет виден на белом фоне.
Полезные статьи
https://habrahabr.ru/company/netologyru/blog/324970/
https://habrahabr.ru/company/pechkin/blog/263699/
Когда-то давно были задачи по наполнению новосозданного сайта текстами. Несмотря на то, что я просил…
Гифка же и так анимированная подумали вы, но не все так просто, все еще проще….
Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера? Для изображений…
Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS. В чем его особенность — при прокрутке…
1 комментарий
Ответить
Табличная верстка топ, только не совсем понятно почему(