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

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

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

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

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

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

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

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

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

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

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

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 с максимальной эффективностью.

508

Советуем почитать

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