Компания
294,95
рейтинг
23 мая 2013 в 12:41

Разработка → Responsive Email Design, или Как прочитать письмо на холодильнике

image Для нас, как и для большинства социальных сетей, очень важны email-рассылки. Одной из интересных и сложных технических задач является корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.
Сегодня мы расскажем, каких правил придерживаться в разработке электронных писем, как сохранить их юзабилити на мобильных устройствах, а также поделимся своими хитростями, накопленными в процессе работы.

Требования


С какими проблемами мы столкнулись и какие требования предъявляются к нашим письмам:

  • письма должны корректно отображаться в множестве разных почтовых клиентов и браузеров;
  • они должны быть оптимизированы под различные устройства на платформах iOS и Andriod (смартфоны с большим, средним и малым разрешением экрана; планшетные компьютеры);
  • нужна обязательная поддержка Outlook 2003/2007/2010, т.к. он занимает большой сегмент использования;
  • редактирование компонентов, которые применяются еще в 50 шаблонах писем;
  • необходимо создавать универсальные блоки, которые будут подстраиваться под ситуацию, т.к. в письмах данные имеют динамическую структуру (например, письма переводят на 44 языка, в них меняются размеры блоков, изображений, размер текста).

Для начала нужно определить, на какие платформы нацелен проект. За последний год процент открытия наших писем на мобильных устройствах вырос с 15% почти до 23%.


Но не стоит забывать о десктопных почтовых клиентах, таких как Outlook, в котором открывается приблизительно 18% всех отправленных нами писем.

Как же это делается?


Рассмотрим основные правила верстки, которые мы соблюдаем при создании электронных писем:

  • каркас строится на таблицах;
  • для веб-версий все CSS-свойства описываются c помощью атрибута style;
  • в почтовых клиентах для мобильных устройств полноценно используются CSS-классы. Исключением является Gmail;
  • для фоновых изображений применяется атрибут background:

    <td background="картинка" style="background-position: значение;">

  • для удаления отступов в ячейках таблицы используется:

    <table border="0" cellpadding="0" cellspacing="0">

  • в разметке писем не рекомендуется использовать блочные элементы, такие как
    <h1-h5>
    для картинок прописываем ширину и высоту, обнуляем рамку border="0". А для избавления от пустого пространства под картинкой необходимо задать vertical-align: top; тегу img;
    в качестве альтернативы CSS-свойства float используем эквивалентный ему html-атрибут align=”значение”. Выравниваем две таблицы по левому краю:

    <table align="left"></table><table></table>


    нужно задать text-decoration: none; ссылке, если в ней находится картинка, для устранения подчеркивания;
    условные комментарии, содержимое внутри которых понимает только Outlook 2007/2010:

    <!--[if gte mso 10]><![end if]-->


    для того чтобы на платформе Android размер текста был такой, каким мы его задумали, добавляем body свойство -webkit-text-size-adjust: none;

    Media queries


    Основное средство для оптимизации писем под мобильные устройства ― Media queries. Далее представлена таблица соответствия Media queries и самых распространенных мобильных устройств:
    iPhone 3g, 3gs iPhone 4, 4s iPhone 5 320*480 480*800 720*1280
    max-device-width: 480px
    -webkit-device-pixel-ratio: 1
    -webkit-device-pixel-ratio: 1.5
    -webkit-device-pixel-ratio: 2

    Но как же быть с почтовыми клиентами на мобильных устройствах, которые не поддерживают Media queries? Например, клиент Gmail для платформ Android и iOS удаляет весь тег style из письма. Здесь действует следующее правило, которое является ключевым во всей разработке писем: нельзя использовать элементы с фиксированной шириной более 320 пикселей. Для того чтобы письмо могло быть «резиновым», лучше использовать относительные единицы измерения.

    Шаблон


    Итак, рассмотрим шаблон письма:



    1. В качестве каркаса письма мы используем два тега center: один для центрального выравнивания, а второй ― для ограничения ширины его содержимого:

    <center><center style="text-align: {{align}}; max-width: 560px; width: 100%;">
    ...
    </center></center>
    

    2. Для картинки во всю ширину письма используется тег table с фоновым изображением, чтобы не создавать распорок в качестве картинки. Для Outlook 2007/2010 используем картинку в условных комментариях:

    <table background="картинка" style="padding: 0; border-collapse: collapse; width: 100%;">
    <tr>
        <td style="padding: 0; font-size: 0;line-height:3 px;">
        <!--[if gte mso 10]><img src="image" border="0" width="580" height="3"><![end if]-->
        </td>
    </tr>
    </table>
    

    3. Количество фотографий различается в мобильной и веб-версиях. Мы не знаем, на каком устройстве будет открыто письмо, поэтому проставляем для всех картинок, начиная с пятой, класс m__hidden, который будет скрывать фотографии пользователей на мобильных устройствах.

    4. Кнопка оказалась очень проблематичным элементом. Она имеет форму прямоугольника с закругленными углами и градиентом. И, разумеется, она должна тянуться как в высоту, так и в ширину. Она разных цветов и создается отдельно для каждого письма. Для этого мы задаем контейнеру фоновое изображение или сплошной цвет. Каркас кнопки делится на три части: верхний, в котором задается верхняя рамка и два уголка; средний ― в нем вертикальные рамки и контент кнопки; и нижний, в котором задается нижняя рамка и два уголка:



    <table cellpadding="0" cellspacing="0" style="direction: ltr; border-collapse: collapse; font-size: 0; line-height: 0;">
    <tr>
    <td style="padding:1px 0 0 0;">
    <table background="{{btn_bg}}" bgcolor="#{{bgcolor}}" cellpadding="0" cellspacing="0" style="border-collapse: collapse; background-repeat: repeat-x;">
    
    <tr>
        <td width="5"><img src="{{btn_tl}}" border="0" height="5" width="5"></td>
        <td style="min-width:100%;">
        <table style="border-collapse: collapse; width:100%;"><tr>
            <td style="border-top: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td>
         </tr></table>
        </td>
        <td width="5"><img src="{{btn_tr}}" border="0" height="5" width="5"></td>
    </tr>
    
    <tr>
        <td colspan="3" style="direction: {{direction}}; text-align: center;">
        <table style="border-collapse: collapse; width: 100%;" cellpadding="0" cellspacing="0"><tr>
            <td style="border-left: 1px solid #{{border_color}}; border-right: 1px solid #{{border_color}};">
            <a href="{{url}}" style="color: #ffffff; font-size: 16px; line-height: 20px; text-decoration: none; padding: 6px 20px; display: block; font-weight: bold; text-shodow: 1px -1px #{{shadow_color}};">{{text}}</a>
            </td>
        </tr></table>
        </td>
    </tr>
    
    <tr>
        <td width="5" style="vertical-align: bottom;"><img src="{{btn_bl}}" border="0" height="5" width="5"></td>
        <td style="vertical-align: bottom; min-width: 100%;">
        <table style="border-collapse: collapse; width: 100%;"><tr>
            <td style="border-bottom: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td>
        </tr></table>
        </td>
        <td width="5" style="vertical-align: bottom;"><img src="{{btn_br}}" border="0" height="5" width="5"></td>
    </tr>
    
    </table>
    </td>
    </tr>
    </table>
    

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

    CSS


    У нас есть базовый набор классов для одинаковых элементов. Он находится в отдельном шаблоне и вставляется в нужные письма:

    <!--[if gte mso 10]> /* Стили для Outlook 2007/2010 */
    <style>
    .o__table {
        width: 560px !important;
    }
    .o__btn-a{
        display: block !important;
        padding: 8px 20px !important;
        font-size: 18px !important;
        border: 1px solid #017ac2 !important;
    }
    </style>
    <![end if]-->
    <style>
    @media only screen and (max-device-width: 720px) {
    body {
        margin: 0 !important;
        padding: 0 !important;
        -webkit-text-size-adjust: none;
    }
    .m__hidden {
        display: none !important;
    }
    .m__btn {
        width: 300px !important;
        text-align: center !important;
    }
    .m__content {
        padding: 0 10px !important;
    }
    .m__footer {
        padding: 10px !important;
    }
    .m__content-border {
        border-bottom: 1px dotted #e5e5e5 !important;
    }
    .m__user-pic {
        width: 52px !important;
        height: 52px !important;
        border-radius: 0 !important;
    }
    .m__user-more {
        width: 49px !important;
        height: 29px !important;
        padding: 22px 0 0 0 !important;
    }
    .m__user-more img {
        width: 27px !important;
        height:7px !important;
    }
    .m__padding_b-0 {
        padding-bottom: 0 !important;
    }
    .m__padding_t-0 {
        padding-top: 0 !important;
    }
    .m__padding_b-10 {
        padding-bottom: 10px !important;
    }
    .m__padding_b-15 {
        padding-bottom: 15px !important;
    }
    .m__padding_t-10 {
        padding-top: 10px !important;
    }
    .m__padding_t-15 {
        padding-top: 15px !important;
    }
    .m__body-txt {
        font-size: 14px !important;
    }
    .m__body-title {
        font-size: 18px !important;
    }
    .m__footer-txt {
        font-weight: normal !important;
        color: #666 !important;
        font-size: 12px !important;
    }
    }
    </style>
    


    Все классы именуются с двойным подчеркиванием. Так мы решаем известную проблему в Yahoo, который поддерживает CSS-классы, но не поддерживает Media queries. Он применяет классы для мобильной версии в веб, что нам совсем не нужно. Yahoo переписывает исходные названия классов на свои. Например: m__btn на m_btn, то есть он по ошибке заменяет двойное нижнее подчеркивание на одно. Таким образом, названия классов в теге style не соответствует названиям в атрибутах class.

    Progressive disclosure для мобильных устройств


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



    <style>
    .hidden,
    .more:hover {
        display: none;
    }
    .more:hover + .hidden { /* IOS */
        display: block;
    }
    #show:target .hidden { /* ANDROID */
        display: block;
    }
    #show:target .more {
        display: none;
    }
    </style>
    <td id="show">
        <imgsrc="photo">
        <imgsrc="photo">
        <imgsrc="photo">
        <imgsrc="photo">
        <a href="#show" class="more">...</a>
        <span class="hidden">
            <imgsrc="photo">
            <imgsrc="photo">
            <imgsrc="photo">
        </span>
    </td>
    


    Резиновый блок с тенью




    Очень часто дизайнеры используют блок, обрамлённый тенью. Но сделать такой блок в письме, да еще и резиновый, становится проблематично. У нас в таком блоке находится фотография пользователя, которая имеет разные ширину и высоту. Для него мы используем четыре картинки углов и четыре картинки сторон. Горизонтальные стороны имеют ширина 100%, а вертикальным подставляется значение высоты фотографии:

    <style>
    .m__hidden {
        display: none !important; /* скрываем картинки, чтобы они не распирали блок */
    }
    .m__photo{ /* тянем картинку в зависимости от родителя */
        width: 100%;
        height: auto !important;
    }
    /* заменяем картинки на фоновые изображения */
    .m__photo-brd_l {
        background: url(center-left.png);
    }
    .m__photo-brd_r {
        background: url(center-right.png);
    }
    </style>
    <table cellpadding="0" cellspacing="0" border="0" style="direction: ltr; line-height: 0;">
    <tr>
        <td><img src="top-left.png" width="10" height="10" border="0"></td>
        <td><img src="top-center.png" width="100%" height="10" border="0"></td>
        <td><img src="top-right.png" width="10" height="10" border="0"></td>
    </tr>
    <tr>
        <td class="m__photo-brd_l"><img src="center-left.png" class="m__hidden" width="10" height="{{height}}" border="0"></td>
        <td style="background: #ffffff;"><img src="photo.png" class="m__photo" height="{{height}}" border="0"></td>
        <td class="m__photo-brd_r"><img src="center-right.png" class="m__hidden" width="10" height="{{height}}" border="0"></td>
    </tr>
    <tr>
        <td><img src="bottom-left.png" width="10" height="10" border="0"></td>
        <td><img src="bottom-center.png" width="100%" height="10" border="0"></td>
        <td><img src="bottom-right.png" width="10" height="10" border="0"></td>
    </tr>
    </table>
    


    Фоновые изображения в Outlook 2007/2010


    Интересно, что Outlook 2007/2010 сильно уступает по поддержке HTML и CSS своему предшественнику Outlook 2003. Например, в них не поддерживаются фоновые изображения. Исключением является использование свойства background на body:

    <body background="картинка">
    ...
    </body>
    

    Но как же быть с другими элементами в письме? Решение есть, мы можем воспользоваться VML:

    <!--[if gte mso 10]>
    <v:rect style="width: значение; height: значение;" strokecolor="none">
        <v:fill type="tile" src="картинка"></v:fill>
    </v:rect>
    <v:shape style="position: absolute; width: значение; height: значение;">
    <![endif]-->
        ...
    <!--[if gte mso 10]>
        </v:shape>
    <![endif]-->
    

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

    Посмотреть пример письма можно тут: jsfiddle.net/ELhD9/5

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

    Артем Кунец
    Frontend-разработчик Badoo
Автор: @Reon
Badoo
рейтинг 294,95

Комментарии (26)

  • +3
    Занятно. Но считаю было бы неплохо еще и скриншоты с разных платформ(в том числе и мобильных) приложить, для наглядности.
  • +7
    Открыл только из-за девушки. (:
    • 0
      Я не заметил девушку. С таким холодильником, можно в гости ждать не хуже девушку :)
    • +1
      Баду, в завлечении девушками, знают толк)
  • 0
    … корректное отображение писем на мобильных устройствах. Сейчас около 23% писем Badoo открывается именно на них, и это число постоянно увеличивается. А возможно, кто-то прямо сейчас читает наше письмо на своем интернет-холодильнике.

    [joke]кажется я отстал от жизни. Где можно купить мобильный холодильник как на фото?[/joke]
    • 0
      LG GR-G267A Если я не ошибаюсь, имеет доступ к инету. Но он не такой красивый, но точно можно купить. Предполагаю в будущем, будет приходить спам — «увеличь объём холодильника!», «В твоём холодильнике не хватает майонеза, и такое лицо Пореченкова»

      Ошибся, загуглил, там только телек.
      • 0
        Господа, в Ваших ответах намеренно выкинута такая важная характеристика как «мобильность»?
    • 0
      См. холодильники с электронным управлением. Яндекс подсказывает:
      Как правило, при таком варианте у холодильника имеется электронная панель управления с цифровым дисплеем.
  • 0
    Простите, Артём, может мой вопрос покажется бестактным, но всё же:
    В чём вы верстаете сие чудо?
    • +2
      notepad ++
  • –1
    Спасибо, поностальгировал. Книжку Дубакова вспомнил, свои первые шаги в вёрстке…
  • –2
    А вариант рассылать нормальные текстовые письма баз вы… нов?
    • 0
      Это не круто.
    • +2
      Объясните маркетологам, почему они должны отказаться от самых действенных фишек: фотографий и разноцветной палитры.
      • 0
        Объяснять что-то маркетологам, конечно, дело неблагодарное.
        Но я всё же постарался бы показать им, как эти письма выглядят у меня и большинства моих знакомых — разноцветный винегред с вкраплениями чёрных прямоугольников, в которых надписи «показ картинок запрещён».
        • 0
          Не вижу проблемы, любой нормальный человек просто нажмёт кнопку «показать изображения».
          • 0
            Где нормальных людей в нашем мире найти?
            Когда лично мне приходит простое текстовое письмо с лаконичным текстом, я его прочту.
            Когда приходит рекламная книжка раскраска, я, обычно, не нажимаю «показать изображения», я нажимаю «спам».
            • 0
              Вы не показатель. В вашем случае настроенная почтовая программа вообще должна показывать текстовую версию письма. В обсуждаемых письмах она прилагается. А у вас ни то, ни сё — сам себе злобный буратино.
  • 0
    Артем, у меня вопрос, стоит ли возня c VML своей выделки? Будет ли это работать в ископаемых theBat!'ах, которые по прежнему пользуются спросом? Почему бы просто не отказаться от фоновых изображений? За последние два года плотной работы с письмами мне практически не встречалось писем, где бы нельзя было реализовать дизайн используя графику лишь через IMG тег.

    За топик отдельное спасибо. С мобильной почтовой версткой все будет похлеще, нежели мои разглагольствования про кроссмейлерный результат.
    • 0
      Стоит, потому что доля Outlook существенна. В отличие от доли The Bat!..
    • 0
      Конечно лучше использовать тег img, но не всегда можно реализовать задумку дизайнера одними картинками. Например кнопка с градиентом, которую мы используем во многих письмах, невозможно сверстать без фоновых изображений. VML тоже не всегда подойдет, так как нужно указывать размеры блока с фоном. При этом Outlook 2003, доля, которого около 16%, имеет поддержку фоновых изображений без всякого VML.
      • 0
        В чем проблема сделать кнопку картинкой(img)? Экономия трафика и избавление от подготовки кнопок в графическом редакторе?

        но не всегда можно реализовать задумку дизайнера одними картинками — А вот тут я подхожу с другой стороны. Даю соответствующие указания дизайнеру чтобы его задумка сочеталась с «безфоновой» версткой.
        • +2
          Возьмем одну кнопку, она подставляется в 30 письмах, в каждом письме есть несколько вариантов подстановки в нее текста, и каждый текст нужно перевести на 44 языка. Даже если предположить, что в каждом письме по одному варианту текста, нам нужно будет нарезать в редакторе 1320 кнопок. Зачем же жертвовать дизайном, если поддержка фоновых изображений веб, десктопными и мобильными клиентами достаточно высока?
          • 0
            Аргумент. Возражений не имею.
  • +1
    Судя по графику «Trend Email Client Platform» доля вебпочты падает, а доля десктоп растет. Это с учетом того, что вебклиенты последние годы очень «выросли». Странная статистика. А есть более подробные данные? Очень интересно было бы взглянуть(учитывая ваш огромный размер аудитории)
    • 0
      Вы задали правильный вопрос :) Инструмент, который мы используем для подсчёта доли различных почтовых клиентов неправильно причисляет пользователей недавно открывшегося outlook.com к декстопным. Поставщику инструмента багу мы зарепортили, но на графике она всё-таки видна в районе марта-апреля.

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

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

Самое читаемое Разработка