Пользователь
0,0
рейтинг
21 августа 2013 в 11:39

Разработка → Адаптивные email'ы tutorial

image


Сегодня пользователи все чаще читают электронные письма на мобильных устройствах. Каково бывает просмотр большого HTML-email'а на телефоне? Приходится много масштабировать и скроллить, в целом читать становится очень неудобно. Поэтому и письма электронной почты следует делать адаптивными.

Подготовка


Прежде всего определим основные особенности адаптивных email'ов:

  • Чистый и лаконичный контент: на маленьких экранах гораздо важнее эффективно использовать полезное пространство.
  • Одна колонка: очевидно, что на экране телефона контент не должен разбиваться на несколько колонок.
  • Краткая тема письма: письма с короткими заголовками выделяются среди множества других в inbox'е.
  • Большие «call to action» кнопки: Apple iOS Human Interface Guidelines рекомендует делать кнопку не менее 44×44 px.
  • Правильный шрифт: текст должен быть удобочитаем на любом устройстве.
  • Pre-header: начальный текст письма должен максимально отражать содержание.
  • Выравнивание текста по левому краю: Большинство пользователей уделяют больше внимания левой части экрана. Кроме того, некоторые ОС могут не полностью отображать письмо, поэтому контент должен выравниваться по левому краю.
  • Вертикальная иерархия: наиболее важная информация, в том числе кнопки «call to action», должна располагаться в верхней части письма.
  • Минимум изображений: пользователь не ожидает увидеть в письмах большие картинки. К тому же, у многих отключено отображение изображений.

Начало


HTML-письма своей структурой немного отличаются от обычных простых HTML-страниц. К примеру, CSS-стили должны быть прописаны непосредственно в разметке, кроме того, некоторые почтовые клиенты вовсе игнорируют любые CSS-стили внутри тега head. Для удобства можно использовать специальные шаблоны с грамотной разметкой HTML-письма. Например HTML Email Boilerplate.

Doctype


Hotmail и Gmail принудительно добавляет в код XHTML 1.0 doctype.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Viewport и Media Queries


Для корректного отображения на мобильных устройствах, следует использовать метатег viewport. К сожалению, он не работает на Blackberry:

image

Также желательно определить content-type тег title. Многие почтовые клиенты это будут игнорировать, но не стоит забывать о «версии для браузера» письма. Еще можно добавить немного CSS, чтобы самим задать некоторые параметры отображения.

<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Email subject or title</title>
<style type="text/css">
.ExternalClass {width:100%;}
img {display: block;}
</style>

При добавлении Media Queries скрываем элементы с классом hide с помощью display:none, если ширина экрана меньше 600 px:

@media only screen and (max-width: 600px) {
    table[class="hide"], img[class="hide"], td[class="hide"] {
      display:none!important;
    }
  }

Это стандартный подход при верстке адаптивных email'ов: перезапись CSS в head с помощью !important. При этом GMail будет игнорировать стили в head. Поэтому необходимо следить за тем, чтобы контент везде корректно отображался. С помощью Media Queries можно также ограничить ширину блока с контентом:

@media only screen and (max-width: 600px) {
    table[class="content_block"] {
    width: 92%!important;
    }
}

Кнопки


После прочтения письма пользователь, в идеале, должен совершить какое-то действие. Поэтому роль «call to action» элементов очень важна. Кнопки должны быть крупны, заметны и располагаться, по возможности, в верхней части письма.

image

К сожалению, не существует единого кроссплатформенного решения для кнопок в письмах. Один из вариантов:

@media only screen and (max-width:600) {
a[class="button"]{
      display: block;
      padding: 7px 8px 6px 8px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      color: #fff!important;
      background: #f46f62;
      text-align: center;
      text-decoration: none!important;
}
}

Ну совсем простой способ — обычная ссылка. Однако при этом страдает юзабилити на устройствах с тач-скрином:

<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

Скачать пример, описанный в статье.

«Резиновые» письма


Вместо адаптивной верстки писем, можно использовать обычную резиновую. Это намного проще, и email будет везде корректно отображаться. Однако в этом случае существует ряд недостатков. В первую очередь, будет сильно страдать юзабилити из-за того, что элементы письма нельзя перемещать в зависимости от ширины экрана устройства. Поэтому резиновая верстка — это не наш способ!

Примеры адаптивных email'ов


Вот пара хороших примеров того, как адаптивные письма должны отображаться на большом и мобильном экранах:

image
image

Заключение


По причине того, что существует большое количество видом платформ, устройств и экранов, очень сложно создать универсальное решение при верстке адаптивных email'ов. Если подвести итог всего вышесказанного, можно придти к одному простому правилу — «Простота — залог хорошего юзабилити писем».

Статьи по теме и использованный материал

@grokru
карма
406,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

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

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

  • +6
    grokru стал read-only???
    • +1
      Я тоже испугался! Только отправил ему письмо в личку, как он стал RO!
      Update: Уже не RO, все в порядке, расходимся.
  • –5
    Если позволите вопрос. Почему для статей про адаптивный дизайн практически всегда используются картинки девайсов от Apple, если их главная страница сайта не поддерживает адаптивный дизайн?
    • 0
      Ибо очень велик процент использующих эти девайсы и под них нужно делать адаптивный дизайн.
      • –3
        Т.е. компания Apple считает, что для их устройств, их главный сайт не должен поддерживать адаптивный дизайн. А все остальные считают, что для девайсов Apple надо делать адаптивный дизайн. Я вас правильно понял?
        • +1
          Что считает компания Apple никто не знает.
          А вот все остальные — да, считают, ибо это их бизнес и они не хотят терять клиентов.
          • +1
            Спасибо за разъяснение.
  • +1
    Статья про адаптивные email-ы — а как их заверстать — ни слова. Не говоря уже о том, что «кроссбраузерная» (хотя правильно было бы кросс-клиентская, так как отображением по сути больше занимается email-клиент, а не браузер) кнопка — в yahoo — не будет иметь скругленных краев.

    В общем, «Статьи по теме и использованный материал» — это обязательный к прочтению материал для понимания сути тем, кто занимается версткой email-ов.
    • 0
      Посмотри htmlemailboilerplate.com/#f1 — там распечатка стилей с комментариями и где то на 120 строке кода начинается сам пример письма
      • 0
        Как верстать имейлы я в курсе, меня возмутило, что в статье не последовало конкретных примеров того, что написано в заголовке.
    • –1
      >>> Не говоря уже о том, что «кроссбраузерная» кнопка — в yahoo — не будет иметь скругленных краев.
      Это зависит от браузера?
      • 0
        Нет. Email-клиенты рендерят твой код так, как им хочется.
  • –1
    Не понимаю, почему ДО СИХ ПОР почтовикам нужно отдавать таблички с инлайновыми стилями?
    Неужели за всё это время их нельзя было научить нормальной разметке?
  • 0
    Я один не понял, почему используются регулярки
    table[class="hide"]
    вместо
    table.hide
    ?
    • 0
      потому что яху буду применять table.hide всегда и повсеместно, а прятать нужно только для мобильных

      тонкости верстки для email :(
      • –1
        Я прекрасно понимаю что оно делает, я не понимаю почему используется регулярка?!
        И чтобы «яху» не применял повсеместно заложено же media query
        @media only screen and (max-width: 600px) {
        или это игнорируется?
  • 0
    да, яху игнорирует media only screen and (max-width: 600px) { и применяет все описанные там классы, чтоб этого не было, используют и media only screen and (max-width: 600px) { и table[class=«hide»]
    • 0
      Ну тогда стоило бы об этом упомянуть в статье, а то получилось как с совой.
      А многие бы и не стали использовать регулярку, со словами: «нах** она тут?»
      А с учетом того, что статья всё же и для «новичков», то они вообще не поймут как это работает.
      Регулярки сами по себе целое искусство. А регулярки в CSS при этом и мало известный зверек.

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