company_banner

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
    Badoo 254,10
    Big Dating
    Поделиться публикацией
    Похожие публикации

    Вакансии компании Badoo

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

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

              Ошибся, загуглил, там только телек.
              • 0
                Господа, в Ваших ответах намеренно выкинута такая важная характеристика как «мобильность»?
              • 0
                См. холодильники с электронным управлением. Яндекс подсказывает:
                Как правило, при таком варианте у холодильника имеется электронная панель управления с цифровым дисплеем.
              • 0
                Простите, Артём, может мой вопрос покажется бестактным, но всё же:
                В чём вы верстаете сие чудо?
              • –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 кнопок. Зачем же жертвовать дизайном, если поддержка фоновых изображений веб, десктопными и мобильными клиентами достаточно высока?
                      • +1
                        Судя по графику «Trend Email Client Platform» доля вебпочты падает, а доля десктоп растет. Это с учетом того, что вебклиенты последние годы очень «выросли». Странная статистика. А есть более подробные данные? Очень интересно было бы взглянуть(учитывая ваш огромный размер аудитории)
                        • 0
                          Вы задали правильный вопрос :) Инструмент, который мы используем для подсчёта доли различных почтовых клиентов неправильно причисляет пользователей недавно открывшегося outlook.com к декстопным. Поставщику инструмента багу мы зарепортили, но на графике она всё-таки видна в районе марта-апреля.

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

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

                        Самое читаемое