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

Содержание

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

Требования

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

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

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

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

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

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

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

     

  • для удаления отступов в ячейках таблицы используется:
    <table border="0" cellpadding="0" cellspacing="0">

     

  • в разметке писем не рекомендуется использовать блочные элементы, такие как<div><p><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 Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике
-webkit-device-pixel-ratio: 1 Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике
-webkit-device-pixel-ratio: 1.5 Responsive Email Design, или Как прочитать письмо на холодильнике
-webkit-device-pixel-ratio: 2 Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике Responsive Email Design, или Как прочитать письмо на холодильнике

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

Шаблон

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

Responsive Email Design

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

Responsive Email Design

<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 для мобильных устройств

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

Responsive Email Design

<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>

 

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

Responsive Email Design

Очень часто дизайнеры используют блок, обрамлённый тенью. Но сделать такой блок в письме, да еще и резиновый, становится проблематично. У нас в таком блоке находится фотография пользователя, которая имеет разные ширину и высоту. Для него мы используем четыре картинки углов и четыре картинки сторон. Горизонтальные стороны имеют ширина 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