HTML-шаблон для писем: опыт ExpertSender

До написания статьи у нас был шаблон, состоящий из ~100 строк кода, который использовался для каждого емейла. Мы редко вносили какие-то обновления в него, потому что новые возможности в вёрстке писем случаются не так часто. Он содержал множество лайфхаков, которые помогали адекватно отображать письма на всех почтовиках, включая Outlook, выравнивать их по центру в Gmail, убирать отступы в iOS и т.д.

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

Важные теги

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

<meta charset="UTF-8">

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

<title>${MessageSubject}</title>

Уточню, что ${MessageSubject} сработает только в ExpertSender. Это динамическая переменная, подтягивающая тему сообщения в title, который может потребоваться в веб-версии письма.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Благодаря этому мета-тегу будет работать адаптация на мобильных устройствах. Он указывает браузеру / приложению, что один пиксель устройства равен одному пикселю вёрстки, но это очень грубое объяснение. Подробнее можно почитать вот тут.

Для тега body мы указываем внешние и внутренние отступы по нулю. Полностью это поможет убрать отступы только в стандартной программе почты для iOS, а в остальных почтовых программах вроде Яндекс.Почта, Gmail, Mail.ru или Outlook  всё равно останутся небольшие отступы по бокам, с которыми на данный момент бороться не получается.

<meta name="x-apple-disable-message-reformatting">

Старые версии стандартной программы почты для iOS-устройств отдаляли превью у ваших писем. Как мы видим, тут письмо не во всю ширину и не по центру, а эта строчка в сумме со свойством padding:0 у тега body решает проблему.

<!--[if !mso]><!-->
	<div style="display:block !important;font-size:0px;font-color:#ffffff;"> 
<!--	Скрытый прехэдер-->
	</div>
<!--<![endif]-->

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

Контентная часть шаблона

Для начала откроем родительскую таблицу, которая будет выполнять функцию заливки фона нужным цветом, по умолчанию – белый.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top" bgcolor="#ffffff">

Далее нужно создать уже таблицу для контентной части. Рекомендуемая контентная ширина письма – 600 пикселей. Давайте разберёмся, откуда появилась эта цифра.

Все мы заинтересованы делать адаптивные письма, верно? К счастью, для планшета письма адаптировать уже не нужно, так как 600 пикселей туда точно поместятся, а вот для телефонов нужно, и нужно учесть все существующие модели. Чтобы это сделать, требуется ориентироваться вплоть до минимальной. На данный момент самой маленькой шириной экрана обладает iPhone 5 и SE – это 320 пикселей, и ими пользуется ещё немалый процент людей. Адаптация писем строится на перестроении блоков, а эти блоки очень часто имеют одинаковые размеры.

Если этот блок будет больше 320 пикселей, то он не поместится на экран 5-го Айфона и просто будет пропорционально уменьшаться, уменьшая шрифты и всё остальное.  Есть ещё один нюанс: почтовики оставляют боковые отступы, потому мы стараемся не делать ширину блока больше 300 пикселей, и как я говорил ранее, блоки часто делят пополам по дизайну. И вот – 300х2 = 600 пикселей.

Да и помимо почтовиков в самом дизайне писем бывают отступы до контентной части.

В Яндекс.Почте можно настроить вид входящих сообщений столбиком, а открытие письма – сбоку. Если в этом почтовике открыть письмо на стандартном мониторе ноутбука шириной 1366, то место для превью будет ~630 пикселей. Если письмо шире, может перестроиться, и часть пользователей в веб-интерфейсе увидят уже его мобильную версию.

Мы обычно берём ширину чуть больше, а именно – 660, потому что по дизайну очень часто там оказывается цветовая заливка, а контентную часть помещаем в 91-процентную таблицу, которая равна 600 пикселям.

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 660px">
<tr><td align="center" valign="top" bgcolor="#ffffff" >
		
</td></tr>
</table>

Если мы так и вставим таблицу с ограничением максимальной ширины таблицы при помощи свойства max-width:660px, то Outlook не посчитает это свойство и растянет таблицу на всю ширину экрана, так как он считает атрибут width=»100%». В то же время, если мы укажем атрибутом width=»660″, то письмо перестанет быть адаптивным. В качестве решения для нашего шаблона добавляем условие if (gte mso 9)|(IE). То есть, если движок Outlook, то добавьте таблицу с фиксированной шириной и будет вам счастье.

Внутри этой таблицы размещаем таблицу со свойством max-width: 660px, которая нормально отработает на всех остальных почтовиках.

Новый шаблон

В итоге у нас получится вот такой код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="UTF-8">
	<title>${MessageSubject}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="x-apple-disable-message-reformatting">
	<style>
		html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
		@media (max-width:480px) {
			/* тут будут медиа-запросы */
		}
	</style>
</head>
<body style="margin: 0; padding: 0">
	<!--[if !mso]><!-->
	<div style="display:block !important;font-size:0px;font-color:#ffffff;"> 
<!--	Скрытый прехэдер-->
	</div>
	<!--<![endif]-->
	
	
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top" bgcolor="#ffffff">

	<!--[if (gte mso 9)|(IE)]>
	<table width="660" border="0" cellspacing="0" cellpadding="0">
	<tr><td align="center">
	<![endif]-->
	
	<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 660px">
	<tr><td align="center" valign="top" bgcolor="#ffffff" >
		
	</td></tr>
	</table>
	
	<!--[if (gte mso 9)|(IE)]>
	</td></tr>
	</table>
	<![endif]-->
	
</td></tr>
</table>

</body>
</html>

Мы протестировали шаблон всеми возможными средствами и можем с полной уверенностью заявить: работает! Копируйте код, используйте в своих письмах, мы только за 🙂

А если возникнут вопросы или появятся предложения по улучшению шаблона, пишите. С радостью всё обсудим! 

Согласен

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