Адаптивная вёрстка письма — полный гид по настройке
| Адаптивность — возможность письма подстраиваться под ширину экрана на разных устройствах. Так, чтобы картинки были оптимального размера, а текст оставался читабельным. |
Важно создавать адаптивные письма, чтобы не потерять внимание пользователя и покупку вместе с ним.
В «сломанном» письме клиенту неудобно нажимать на кнопки и читать текст. А товар, который должен быть представлен максимально выгодно, может и вовсе «мигрировать» за пределы экрана.
Принципы адаптивной вёрстки
| При разработке сайтов мы используем блочную вёрстку. В письмах — табличную. Прописываем стили внутри тегов и работаем с резиновой вёрсткой и медиа‑запросами. Не по отдельности, а вместе, сочетая оба подхода. |
Начинающие верстальщики часто забывают про таблицы и используют блочную вёрстку. Из‑за этого она «слетает», а письмо отображается некорректно.
Это происходит потому, что большинство почтовых клиентов не видят внешние стили. Поэтому, если вы прописали стили отдельно, а потом подключили их к блокам — письмо попросту сломается в одном из ключевых мест.
А ещё, важно помнить, что половина почтовых клиентов не видит медиа‑запросы.
Вот эти почтовики не работают с таблицами стилей и «вырезают» медиа‑запросы из вёрстки, прописать их в инлайне — нельзя.
| Gmail App | Mail.ru App | Yandex App |
| Mailbox App | Yahoo App | Windows Phone |
Чтобы решить эту проблему, сочетайте резиновую вёрстку и медиа‑запросы. Так, письма не будут сжиматься до нечитаемого состояния, в картинки не выйдут за рамки просмотра. Даже в почтовых клиентах, не поддерживающих медиа‑запросы.
Что ломается чаще всего и как это исправить
Пройдёмся по тем блокам, которые «ломаются» в письмах чаще всего.
Делаем блоки адаптивными
В адаптивной вёрстке элементы рассылки на экране мобильного перестраиваются друг под друга автоматически.
Два перестраивающихся блока — это два блока div, которым задано свойство display со значением inline. Оно определяет, что элемент будет отображаться как встроенный инлайн‑блок.
Инлайн‑блоки занимают всю ширину контейнера. Если использовать ширину письма в 600px, то два одинаковых контейнера будут по 300px. Вот пример кода:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="font-size: 0px;">
<!--Item -->
<div style="display: inline-block;vertical-align:top;width:300px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
style="border-collapse:collapse;">
<tr>
<td align="center" valign="middle" style="font-size: 14px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
контент
</td>
</tr>
</table>
</td>
</tr>
</table>
</div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" style="width: 300px;">
<![endif]-->
<!-- Item -->
<div style="display: inline-block;vertical-align:top;width:300px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
style="border-collapse:collapse;">
<tr>
<td align="center" valign="middle" style="font-size: 14px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
контент
</td>
</tr>
</table>
</td>
</tr>
</table>
</div><!-- Item END-->
</td>
</tr>
</table>Cellpadding и cellspacing мы обнуляем, а td align задаём center.
Закрывает код первого блока условный комментарий для Outlook, чтобы он увидел закрывающий тег </td> в первом контейнере.
Второй блок будет почти таким же. Добавим к нему только условный комментарий для Outlook. Вот так будет выглядеть наша таблица
| контент | контент |
А если экран сузится даже на пиксель, блоки сами перестроятся.
| контент |
| контент |
Если вы хотите задать разную ширину ячеек, используйте этот код:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="font‑size: 0px;">
<!-- Item -->
<div style="display: inline‑block;vertical‑align:top;max‑width:400px;width:100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border‑collapse:collapse;">
<tr>
<td align="center" valign="middle" style="font‑size: 14px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
контент
</td>
</tr>
</table>
</td>
</tr>
</table>
</div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" style="width: 200px;">
<![endif]-->
<!-- Item -->
<div style="display:inline‑block;vertical‑align:top; width:200px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border‑collapse:collapse;">
<tr>
<td align="center" valign="middle" style="font‑size: 14px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
контент
</td>
</tr>
</table>
</td>
</tr>
</table>
</div><!-- Item END-->
</td>
</tr>
</table>Теперь наша таблица базово выглядит так:
| контент | контент |
А когда письмо придёт на смартфон, она станет такой:
| контент |
| контент |
Адаптируем изображения
Сразу — к примеру. Баннер без адаптива просто уменьшается пропорционально экрану смартфона. Прочитать текст на такой картинке — нереально. А все важные мысли в заголовках моментально теряют свою значимость.
Вот пример письма от PichShop. Блоки просто‑напросто уменьшились в мобильной версии. А тексты стали практически нечитаемыми из‑за бардака в пределах одного экрана.
Как заверстать изображения
Здесь работает простой принцип: для всех изображений шириной больше 300px не нужно прописывать фиксированную высоту.
Когда высота не прописана в коде, система самостоятельно её вычислит пропорционально размеру картинки.
Если ваша картинка больше 300px, в стилях мы прописываем ширину в процентном соотношении (100%), и максимальную ширину картинки img (600px), используя резиновый подход:
<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px;color:#000000;">
<img src="creative-main.png" width="600" alt="Альтернативный текст" border="0"
style="display: block; width: 100%; max-width: 600px"/>
</span>Десктопные версии (в том числе Outlook) увидят запись width="600" и покажут баннер шириной 600px. Google читает запись width: 100%; max-width: 600px и отобразит изображение на всю ширину, но не более 600px. Так получится масштабирование изображения, которое не помешает адаптироваться всему остальному контенту письма.
Не забудьте в alt прописать альтернативный текст.
Прикручиваем кнопки
Вот как мы масштабируем кнопки в мобильной версии так, чтобы они растянулись на весь экран.
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td align="center" valign="middle" height="50" bgcolor="#000"
style="height: 50px; display: block; background-color: #000000;">
<!--[if gte mso 9]>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap align="center" valign="middle" height="50" style="padding: 0 30px;">
<![endif]-->
<a href="#" target="_blank"
style="font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 50px; color: #ffffff; white-space: nowrap; font-weight: normal; text-decoration: none; display: block; padding: 0 30px;">
Текст кнопки
</a>
<!--[if gte mso 9]>
</td></tr>
</table>
<![endif]-->
</td>
</tr>
</table>Height и line-height здесь одинаковые, также как background и bgcolor. Target задано свойство _blank — так страница загрузится в новом окне браузера.
Важно: высота строки должна соответствовать высоте кнопки, а её текст должен быть меньше 300px в ширину. Если будет больше — текст сломает адаптацию или вылезет за пределы кнопки.
Адаптируем письмо к тёмной теме
Какая бо‑о-оль, какая бо‑о-оль 🙂 Часто верстальщики не учитывают, что пользователь может использовать тёмную тему смартфона.
И тогда текст просто‑напросто теряется на фоне. Вот так:
Если фон верстается картинкой, то происходит инверсия цвета текста. Это может повлиять на его читаемость. Некоторые почтовики делают прямую инверсию «белый — чёрный», а некоторые «подбирают» тёмный аналог.
Важно: разные почтовики по‑разному работают с тёмной темой и результат будет отличаться.
Рассказываем, как верстать, чтобы стиль инвертировался
1. Сообщите почтовику, что ваши имейлы поддерживают тёмную тему. В HTML-коде добавьте метатеги в тег <head>:
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">2. Настройте почтовики, которые поддерживают кастомизацию. Используйте медиазапрос в <head>:
@media (prefers-color-scheme: dark) { }3. Поменяйте цвет шрифтов и фона. Тёмный текст сделайте светлым, а светлый фон — наоборот, тёмным:
@media (prefers-color-scheme: dark) {
.copy {
background-color: #222222;
color: #eaeaea;
}
}4. Можно добавить один логотип для светлой темы, а другой — для тёмной. Для этого пропишите в коде два варианта логотипа и CSS, чтобы каждый из них отображался корректно:
<img class="light-img" src="logo-light.png" alt="">
<img class="dark-img" src="logo-dark.png" alt="" style="display: none;">
@media (prefers-color-scheme: dark) {
.img_light { display: none !important; }
.img_dark { display: block !important; }
}Некоторые почтовики позволяют заменять изображения, но могут не могут заменить некоторые цвета. Учитывайте это и обязательно тестируйте письмо перед финальной отправкой.
А можно адаптировать письма без кода?
Можно! Для этого используйте конструктор электронных писем Letteros. Просто выбирайте подходящий шаблон и смотрите, как здорово он будет выглядеть на разных устройствах.
Letteros — это модульный редактор, благодаря которому можно создать вёрстку шаблона письма без профильного специалиста или знаний HTML.
Платформа покажет, как письмо будет выглядеть на 100+ смартфонах, а встроенные сервисы сразу проверяют письмо на ошибки.
Итог: рассылка выглядит красиво и на десктопе, и в мобильных почтовиках. Также прямо в Letteros можно перевести текст на любой другой язык, автоматически «подтянуть» превью к видео в письме и быстро перестраивать блоки между собой.
Посмотрите демо и переходите на Letteros. Здесь на создание писем уходит всего 15–20 минут.
Кстати, если нужно, мы бесплатно поможем перенести ваши шаблоны в конструктор. А наша поддержка всегда будет на связи и подскажет, как использовать Letteros с максимальной эффективностью.
