Заказать демо Войти

Адаптивная вёрстка письма — полный гид по настройке

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

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

В «сломанном» письме клиенту неудобно нажимать на кнопки и читать текст. А товар, который должен быть представлен максимально выгодно, может и вовсе «мигрировать» за пределы экрана.

Принципы адаптивной вёрстки

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

Начинающие верстальщики часто забывают про таблицы и используют блочную вёрстку. Из-за этого она «слетает», а письмо отображается некорректно. 

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

А ещё, важно помнить, что половина почтовых клиентов не видит медиа-запросы. 

Вот эти почтовики не работают с таблицами стилей и «вырезают» медиа-запросы из вёрстки, прописать их в инлайне — нельзя.

Gmail AppMail.ru AppYandex App
Mailbox AppYahoo AppWindows 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 с максимальной эффективностью.

Заказать демо