Адаптивные email-письма и media queries: Проблемы и решения



    В нашем блоге мы неоднократно затрагивали тему создания адаптивных почтовых рассылок. В наши дни почти половина всех писем просматривается со смартфонов и планшетов, а значит, необходимо позаботиться о том, чтобы письмо хорошо выглядело на устройствах с разным форм-фактором. Именно для этого в вёрстке и начали использовать медиазапросов (media queries). Однако существует целый ряд препятствий для широкого применения технологии. Сегодня мы по-дробнее взглянем на проблемы при использовании media queries и их возможные решения.

    Зачем нужны медиазапросы в email


    Для начало еще раз остановимся на то, что собой представляют медиазапросы. Итак, media query — это компонент языка CSS. Этот компонент часто используется в качестве «переключателя», который на основе набора правила отвечает за выбор тех или иных стилей оформления.

    Media query состоит из трех частей: тип среды (‘media’), выражение (‘expression’) и правила стилей, которые содержатся в самой media query.



    Media type используется для объявления среды, к которой будут применяться правила. Существует четыре вариант: все, печать, экран, речь(all, print, screen и speech). Для задач email почти всегда используется тип screen.

    Выражения (expressions) позволяют таргетировать устройства с помощью более узких условий. Выражения описывают свойства устройства, например ширину (witdh) и высоту экрана, соотношение сторон (aspect-ratio) и цвет. Часто дизайнеры используют следующие свойства:

    • max- и min-width;
    • max- и min-device-width;
    • device-pixel-ratio.

    И, наконец, в фигурных скобках указываются CSS-правила, которые применяются, если письмо открывается на устройстве, соответствующем требованиям по типу среды и свойствам в выражении. Media queries пишутся в блоке стилей, который как правило расположен в заголовке html-шаблона.

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

    В чем проблема


    Главный минус всей этой ситуации — media queries работают далеко не везде. Например, один из популярнейших в мире почтовых клиентов Gmail ни в браузере ни в мобильных приложениях не поддерживает эту технологию — почтовая программа просто отрезает секцию шаблона с
    , где как раз и располагаются все стили и media queries. 
    Поддержка Media Query почтовыми клиентами
    iOS (iPhone/iPad)
    check-green
    Gmail app (iOS + Android)
    check-x
    Inbox by Gmail app (iOS + Android)
    check-x
    Android 4.x native client
    check-green
    Android Outlook Exchange via native client
    check-x
    Android Outlook.com app
    check-green
    Android Yahoo! Mail app
    check-X
    Gmail (Android Browser)
    check-X
    Mailbox (iOS + Android)
    check-x
    Outlook.com (Android Browser)
    check-X
    Outlook.com (iOS)
    check-green
    Yahoo! Mail (Android Browser)
    check-X
    Windows Phone 7
    check-X
    Windows Phone 7.5
    check-green
    Windows Phone 8
    check-X
    BlackBerry OS 6
    check-green
    BlackBerry OS 7
    check-green
    BlackBerry Z10
    check-green
    Kindle Fire native client
    check-green

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

    Именно проблемы с поддержкой media queries влечет за собой необходимость создания шаблонов рассылок с помощью HTML и инлайн-стилей и использовании media queries только в качестве «приправы», позволяющей прогрессивно улучшать дизайн.

    Как реализовать адаптивность в Gmail


    Профессионалы в области email-рассылок, конечно же, не могли так просто смириться с невозможностью создания интерактивных и адаптивных писем в Gmail. Один из них — автор блога Freshinbox Джастин Ку, реализовал интересный способ реализации этой функции.

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



    Если при создании письма используется заданная максимальная ширина в 600 пикселей, то первую «точку прерывания» (breakpoint) можно было бы установить именно на этой отметке, однако Gmail учитывает ширину окна браузера, а не контейнера email-сообщения, как делают некоторые другие почтовые программы.
    В таком случае, первый медиазапрос можно использовать на отметке в 1160 пикселей — при этом ширина email-контейнера составит как раз 600 пикселей.

    @media screen and (max-width:1160px){ * [lang=x-outer]{ width:100% !important; } }

    Когда окно браузера будет сужено до 700px, то ширина области письма составит уже всего 450px. Если ширина будет еще меньше, появится горизонтальный скролл, который является не самым удобным элементом навигации.

    Чтобы этого избежать, нужно установить ширину на отметке в 100% ширины экрана минус 250 пикселей для колонки, зафиксированной в левой части экрана.

    
    @media screen and (max-width:700px){
    		* [lang=x-outer]{
    			width:calc(100vw - 250px) !important;
    			float:left;
    		}
    	}
    

    Здесь используются единицы измерения vw1 vw = 1% viewport width (в данном случае, окна браузера). При этом процентами описывается размер элемента, содержащегося в контейнере (в нашем случае, зафиксированном на 450px). Затем для осуществления подсчетов используется функция Calc (умеет работать с величинами px, %, em, rem, vw, vh и т.п.)

    В данном случае наш email будет не уже 300 пикселей. Поэтому эти 300px добавляются к 250px левой колонки, кроме того, используется медиазапрос, фиксирующий ширину на 300px:

    
    @media screen and (max-width:550px){
    		* [lang=x-outer]{
    			width:300px !important;
    		}
    	}
    

    Полный код примера представлен в нашем топике (поработать с ним можно и на Codepen).

    Как обойтись без медиазапросов


    Описанный выше лайфхак неплох для работы с Gmail, но остается еще большое количество почто-вых клиентов, которые не поддерживают медиазапросы. Николь Мерлин летом 2015 года опубликовала материал, в котором представила свой способ создания адаптивных писем без использования media queries. Перевод этого материала был опубликован на хабрахабре ранее, поэтому остановимся на основных моментах предложенной техники.

    Метод называется «плавающим гибридным» (fluid-hybrid method), который также известен как «эластичный» метод (spongy method). Слово «плавающий» означает, что предлагается использовать большое количество процентных вычислений.

    «Гибридный» означает, что для ограничения размеров элементов на больших экранах используется атрибут max-width.

    1. Начало


    Все начинается с создания пустого файла под именем index.html. Нужно вставить туда следующий код:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--[if !mso]><!-->
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!--<![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <!--[if (gte mso 9)|(IE)]>
        <style type="text/css">
            table {border-collapse: collapse;}
        </style>
        <![endif]-->
    </head>
    <body>
        <center class="wrapper">
            <div class="webkit">
                [content goes here]
            </div>
        </center>
    </body>
    </html>
    

    Давайте быстро познакомимся со всеми элементами кода:

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" – этот DOCTYPE Николь Мерлин называет наиболее предсказуемым.

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" – предо-ставляет поддержку всех символов Unicode в документе.

    /> – используется для то-го, чтобы смартфоны на базе ОС Windows Phone корректно отображали письмо. Этот тег заключен в условный комментарий, скрывающий его ото всех продуктов mso (Microsoft Outlook), во избежание проблем с отображением изображений в почте Windows Live.

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

    Мерлин использует внешнюю таблицу стилей, но говорит, что можно выбрать лю-бой другой вариант. Теперь необходимо создать новый документ и назвать его styles.css. Нужно сохранить его в той же директории, что и HTML. В самом конце проводится его встраивание.

    Далее, между расположилась условная CSS-конструкция для Outlook, которая нужна, чтобы принудительно сцепить все таблицы и избежать появления пробелов. Это условное выражение работает со всеми версиями Microsoft Outlook (mso), начиная с девятой (девятая версия является самой ранней: Outlook 2000), а также с версиями Outlook, использующими Internet Explorer для отображения содержимого писем (Outlook 2000-2003).

    Первым тегом после «тела» оказывается
    , центрирующий свое содержи-мое и обладающий несколькими полезными глобальными свойствами (поскольку тэг  часто очищается в веб-клиентах). Тег  стоит здесь для ранних версий почтовых клиентов на WebKit (это Apple Mail 6 и ниже, а также Outlook 2011). Эти почтовые клиенты поддерживают max-width только для блочных элементов, поэтому проще всего будет «завернуть» все содержимое в этот  – теперь нам можно не ограничивать ширину в медиазапросах.

    2. Начальные стили


    Далее, необходимо создать пустой CSS-файл и назвать его styles.css. Скопируйте в него следующее:

    /* Basics */ body { Margin: 0; padding: 0; min-width: 100%; background-color: #ffffff; } table { border-spacing: 0; font-family: sans-serif; color: #333333; } td { padding: 0; } img { border: 0; } .wrapper { width: 100%; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } .webkit { max-width: 600px; }

    Здесь происходит обнуление свойств margin и padding «тела» и таблиц и их ячеек, также обнуляются значения границ, которые могут появиться вокруг изображений со ссылками. Наши стили для тегов и заменят HTML-атрибуты cell-padding и cellspacing. Вы можете использовать HTML-атрибуты – здесь все зависит от вас; раньше Николь Мерлин была сторонником использования HTML-атрибутов там, где это возможно, однако проработав над большим количеством крупных проектов, убедилась, что гораздо удобнее определять свойства в CSS, особенно, если вы работаете с платформой, обеспечивающей автоматическое встраивание CSS.

    Обычно она включает атрибут min-width со значением 100% в тег , чтобы избежать ситуаций, когда его содержимое не заполняет всю ширину вьюпорта мо-бильного устройства. По ее мнению, хорошей идеей будет настроить цвет фона, даже если он просто белый – это позволит избежать багов с цветом в Outlook и Lotus Notes.

    Мы установили свои стили с несколькими свойствами для .wrapper, чтобы избе-жать реформатирования текста на Windows Phone и iOS. Строка table-layout: fixed
    нужна, чтобы гарантировать отображение контента по центру в почте Yahoo. Также мы присвоили атрибуту max-width нашего тега .webkit значение в 600 пикселей, чтобы уместить все его содержимое на экране в приложениях Apple Mail 6 (и ниже) и Outlook 2011.

    3. Создание внешнего структурного контейнера


    Мы начнем с одного из самых важных моментов: создания уловной таблицы стилей для Outlook, невидимой для остальных почтовых клиентов. Для Outlook нужна отдельная таблица, потому что мы собираемся использовать свойство max-width, которое он не поддерживает. Только по этой причине нам нужно создать специальные таблицы, в которых задать точные значения ширины в пикселях.



    Поскольку Outlook не поддерживает свойство max-width, мы воспользуемся условной таблицей стилей

    В нашем HTML-файле нужно удалить филлер [content goes here] и заменить его нижеследующим кодом. Мерлин говорит, что привыкла выравнивать все условные теги по левому краю с одинаковым отступом, чтобы повысить читаемость, однако по ее мнению, дизайнеры в праве отформатировать все так, как им удобно.

    <!--[if (gte mso 9)|(IE)]>
    <table width="600" align="center">
    <tr>
    <td>
    <![endif]-->
    <table class="outer" align="center">
    <tr>
            <td>
                [content goes here]
            </td>
        </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    

    Внутри условной таблицы вы увидите тег
    Pechkin.com
    Новый инструмент для e-mail маркетинга
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 1

      +1
      Я пришел к тому, что вовсе не использую медиазапросы при верстке писем кроме пары исключений.
      Например к нас есть трехколоночная выкладка товаров магазина в письме. Без применения медиазапросов получается по одному товару в строке на смартфонах. Каждый из этих товаров занимает примерно 75% от ширины письма. Для нормальных почтовиков, которые понимают медиазапросы я пишу width:50% для элемента товара и таким образом мы получаем по два товара в строке на мобильном почтовом клиенте. Но это частных случай. В основном все же один товар в строке будет лучше, ибо не нужно напрягать зрение, чтобы его рассмотреть.

      Подход Николь кажется громоздким только на первый взгляд. На самом деле о очень хорош. Я перенял у нее многие идеи, но оформил их немного иначе в своем фреймворке. Мои заявления о неработоспособности были на тот момент необоснованными. Я недостаточно хорошо изучил описанный материал.

      Также я решил вопрос инлайнинга писем, подключив gulp-inline-css. В процессе работы с ним были выявлены небольшие баги с переносом стилей и Александр, который мне помогает развивать фреймворк отправил разработчику pull-реквест, который был принят. Это приятно.

      К тому же Николь тоже внесла корректировки в свой шаблон письма с момента публикации ее статьи. Возможно кому то это покажется интересным. Вот ее профиль на гитхабе.

      Only users with full accounts can post comments. Log in, please.