Создание простого адаптивного HTML-шаблона электронного письма. Основные принципы адаптивной верстки

Верстка писем ,

Разработка под e-commerce

• Перевод

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

Зачем нужно адаптировать письма для мобильных устройств

Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. Во время исследования Campaign Monitor от 2011 года выяснилось, что почти 20% открытий писем происходили на смартфонах и планшетах - в 2009 году эта цифра находилась на уровне всего в 4%. Почти 90% от этих открытий осуществлялись на устройствах под iOS. Сейчас цифры еще выше.

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

Техники дизайна

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

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

Ниже представлено то же письмо, но открытое в приложении Mail для iPhone. Явно видна разница двух шаблонов. Мобильная версия уже, в ней меньше необязательных визуальных элементов, но читать её также удобно, как и десктоп-версию. Разница во внешнем виде двух мобильных вариантов заключается в использовании CSS.

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

Что учитывать при создании шаблонов

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

• На мобильных устройствах лучше работают одноколоночные шаблоны не шире 500-600 пикселей. Их проще читать, и даже если в них есть какие-то недоработки, все «косяки» в любом случае выглядят лучше.
• Согласно гайдлайнам Apple, минимальная целевая область кнопок и ссылок должна составлять 44 x 44 пикселя. Нет ничего более «неюзабельного», чем куча мелких ссылок, в которые сложно попасть на небольшом экране мобильного устройства.
• Минимальный отображаемый на iPhone шрифт составляет 13 пикселей. Необходимо учитывать этот факт при создании текста письма - если текст в шаблоне набран меньшим шрифтом, то он будет автоматически увеличен, что может сломать всю вёрстку.
• Письмо должно быть лаконичным, а всю важную информацию следует располагать в его верхней части. Скроллить на тачкскринах пальцем сложнее, чем на десктопе мышкой.
• Если возможно, стоит использовать свойство display:none; для скрытия необязательных элементов шаблона. Кнопки «шаринга» в соцсети уместны на десктопе, но ими не всегда удобно пользоваться на смартфоне.

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

Теперь, после того, как мы рассмотрели некоторые важные вопросы дизайна почтовых рассылок для мобильных платформ, можно перейти непосредственно к различным аспектам их вёрстки.

Верстаем мобильные письма

Когда речь идет о мобильных стилях, чаще всего подразумевается не отдельный файл стилей, а media queries. Вот так они выглядят:

Давайте повнимательнее разберемся с тем, как происходит объявление @media . Прежде всего, чтобы создать «мобильный» CSS нужно реализовать какой-то критерий, помощью которого почтовый клиент будет определять какие стили использовать.

Для этого используется оператор @media only screen - он показывает, что почтовый клиент должен быть отображен на экране (вместо того, чтобы, к примеру, быть напечатанным на принтере). После этого в примере кода выше мы задали максимальную ширину экрана устройства в 480 пикселей. Это важно, поскольку у многих (но не у всех) мобильных устройств область отображения данных на экране составляет 480 пикселей или меньше.

Поэтому часто используют max-device-width: 480px (это также ширина дисплея предыдущих моделей iPhone в ландшафтном режиме), но можно и расширить описание, чтобы охватить другие размеры экрана:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }
Вернемся к рассмотренному выше мобильному шаблону письма. Вот как он выглядит в Apple Mail:

В этом примере использован к HTML-таблицам, содержащим текст и изображения, применен класс contenttable . Вот образец кода:

Этот класс играет интересную роль - когда письмо открывают на устройстве с экраном в 480 пикселей или шире, он ни на что не влияет. Однако, когда экран 480 или меньше, то он сужает ширину таблиц до 320 пикселей. Для того, чтобы избежать необычного глюка в почте Yahoo, использованы селекторы атрибутов . В противном случае используется «обычный» CSS. Кроме того, можно включить и такие объявления:

@media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ table { width: 325px !important; } img { width: 325px !important; } p { display: none !important; } }
Далее мы рассмотрим более сложные техники адаптации мобильных писем для мобильных устройств.

Создание адаптивных шаблонов с колонками «от двух к одной»

Использование одноколоночных шаблонов - хороший выход при оптимизации рассылки для мобильных устройств. При этом существуют способы по созданию адаптивных двухколоночных шаблонов, без необходимости использования длинных CSS в media queries.

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

Золотое правило вёрстки писем гласит: «Везде, где только можно, используйте HTML вместо CSS». Степень поддержки CSS различными почтовыми клиентами может значительно различаться, но все они одинаково работают с HTML. Например, атрибуты вроде align=”left” и cellpadding=”10” - гораздо более надежный инструмент, нежели их аналоги в CSS float: left; и padding: 10px; . Именно эти атрибуты будут использоваться при создании писем в формате «от двух к одной колонке».

Вот так подобное письмо может выглядеть в Outlook 2007:

В пример выше использована таблица-контейнер шириной 640px, которая содержит две таблицы 320px, формирующие колонки. У этих столбцов cellpadding=”20“ - это сделано для того, чтобы контент не прижимался к границам.

При вёрстке для веба обычно используют float:left; , чтобы выровнять столбцы. Однако вместо этого можно использовать align=”left” . Поскольку ширина таблицы-контейнера равняется или больше совокупной ширины двух вложенных таблиц, то использование HTML хорошо сработает. Ниже представлен упрощенный код подобного двухколоночного шаблона:

Column Left Content Column Right Content

Результат выглядит так:

Таблица-контейнер шириной 640 пикселей, так что шаблон будет двухколоночным. Но в том случае, если ширина экране меньше этого, то контент правой колонки будет «завернут» под левую. Если сделать ширину вложенных таблиц равной 320 пикселям, то при отображении на мобильном устройстве будет получаться одноколоночное письмо, которое совсем не нужно «зумить». Добиться такого эффекта можно с помощью добавления одной строки media query в HTML-код:

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

Добавление «прогрессивного раскрытия» (как в «Википедии»)

Многие сайты используют для конвертации длинного веб-контента в короткий мобильный технику под названием «прогрессивное раскрытие» (progressive disclosure). Она заключается в сокрытии контента за интерактивным элементом вроде кнопки или ссылки, а затем показа этого контента по клику (или тапу). Эту технику использует «Википедия» и множество других проектов - ее можно применять и для вёрстки писем под мобильные устройства (для скрытия и показа контента используется CSS).

К примеру, возможна такая ситуация, при котором в новостной рассылке перечисляютсяя различные статьи. В веб-версии для каждой статьи должно отображаться название и текст:

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

Для того, чтобы добиться такого эффекта сначала нужно создать «рыбу» статьи с ее заголовком и описанием с помощью HTML. Также следует добавить пару классов для отображения кнопок разворачивания/скрытия только на мобильных устройств. Ниже представлена упрощенная версия такого кода:

Основные действия будут осуществляться с помощью классов mobilehide , mobileshow и article . С помощью display:none; кнопка для разворачивания/скрытия контента будет скрываться на десктопе:

A, a { display: none !important; }
Чтобы убедиться в том, что эта кнопка отображается только на мобильных устройствах, придется прибегнуть к media query. Ниже представлен код для этого (включая ранее использовавшиеся сниппеты mobileshow и mobilehide , а также некоторые стили для webkit):

@media only screen and (max-device-width: 480px) { a, a { display: block !important; color: #fff !important; background-color: #aaa; border-radius: 20px; padding: 0 8px; text-decoration: none; font-weight: bold; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; position: absolute; top: 25px; right: 10px; text-align: center; width: 40px; } div { display: none; } a.mobileshow:hover { visibility: hidden; } .mobileshow:hover + .article, .article:hover { display: inline !important; } }
В результате на iPhone будут отображаться кнопки для сворачивания и разворачивания контент. На GitHub представлен весь

Представим ситуацию: Сергей - выпускник «Нетологии», начинающий маркетолог. Он работает в небольшом интернет-магазине, одна из его задач - запустить рассылку по клиентской базе. Стратегия, план и тексты для писем готовы. Что делать с дизайном и адаптивной версткой? Бюджет на исходе, поэтому у Сергея серьезный выбор: сэкономить и сделать все самому, в редакторе сервиса рассылки. Либо нанять фрилансера.

Наш совет: Сергей должен определиться, какие письма ему нужны. Если он не гонится за креативностью, то справится с дизайном и версткой сам. Рассказываем, как сделать это правильно, без помощи сторонних специалистов. Результат будет отличаться, но в ситуации, когда бюджет на исходе и надо сделать более-менее качественно - это выход.

Выбираем встроенный редактор или услуги верстальщика

У крупных сервисов рассылки есть встроенный блочный редактор. В нем собирают простые адаптивные письма и это входит в стоимость подписки. Оформить сложное креативное письмо в редакторе не получится - это работа дизайнера и верстальщика. Для начала разберемся, какое письмо отнести к категории сложных, а какое - к простым.

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

Дизайнер и верстальщик предлагают индивидуальные решения, редактор - типовые. Учитывайте, что, собирая письмо в редакторе, вы в любом случае ограничены, например, набором шрифтов и их размерами. Дизайнер сделает так, как вы хотели. Верстальщик продумает, как переставить блоки на мобильных устройствах - так, как вы и планировали. Работая в блочном редакторе, вы полагаетесь на решения, предложенные разработчиками.

Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.

Если вы проработали структуру, написали текст и подобрали картинки, то на создание письма уйдет от тридцати минут до двух часов. Напомним, что вы не платите за верстку, работа с редактором включена в стоимость аккаунта.

Команда из дизайнера и верстальщика на фрилансе сделают письмо за два-три дня, стоить это будет от 5 000 до 15 000 рублей. Если заказываете в агентстве - в разы дороже. Помните историю из вступления? Для Сергея выбор очевиден: он будет собирать письмо сам, в его ситуации это дешевле и быстрее.

Простое адаптивное письмо лучше собрать во встроенном редакторе. Если хотите нестандартных решений - отдавайте на аутсорс.

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

Тем, кто собирает письмо в редакторе, знать код не обязательно. Единственное, что нужно - продумать структуру письма, подобрать картинки и написать текст. Никакой «ручной» верстки - вы соберете письмо из блоков, как в конструкторе посадочных страниц.

Шаг 1. Схема или прототип письма

Начните с черновика, начертите на бумаге схему будущего письма: где будет заголовок, где картинка, где кнопка и т. д. Если есть время, соберите полноценный прототип в Balsamiq или NinjaMock . Такой прототип не стыдно показать директору и передать в работу дизайнеру.

Шаг 2. Верстка письма в редакторе

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

Перетаскиваете нужные элементы в тело письма

Обычно во встроенных редакторах действует принцип Drag-and-drop. Если в вашем не так, посмотрите статьи из Базы знаний - принципы работы в редакторе описаны там.

Настраивайте содержимое элементов: отступы, интервалы, выравнивание и начертание

Здесь же вписываете нужный текст, добавляете фотографию или иллюстрацию, с ссылками или без. Не забывайте, что вы можете добавить анимированную картинку, большинство редакторов поддерживает формат GIF.

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

Не забудьте настроить кнопки и добавить к ним ссылки для перехода.

Шаг 3. Проверка адаптивности во встроенном редакторе

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

В 90% случаев все будет в порядке, блоки «перестроятся» автоматически. Если верстка все-таки «слетает» или результат вас не устраивает - проверьте значения отступов в блоках, они должны быть одинаковыми. Если один один блок отступает на 10 пунктов, а другой на 30, в мобильной версии они могут перестроиться некорректно. Если оба блока отступают на 10 пунктов, скорее всего, все будет в порядке.

Шаг 4. Проверка адаптивности на сторонних сервисах

Проверьте результат через Litmus или Email on Acid . Эти сервисы покажут, как письмо отобразится на разных устройствах, в разных браузерах и разных почтовых клиентах.

В некоторых редакторах проверка через Litmus интегрирована по умолчанию. Если в вашем редакторе такой возможности нет, отправляйте тестовую копию письма на специальный e-mail, который дадут после регистрации в Litmus.

Услуга платная, месячная подписка в Litmus начинается от 79 $, в Email on Acid - от 45 $. Если вы отправляете по одному письму раз в месяц, выходит дороговато. В крайней случае, попробуйте Browser Shots , он старый и неудобный, зато бесплатный. Помните, что подобные сервисы не дают 100% гарантии. Даже если в Литмусе все хорошо, это не повод сразу же запускать рассылку. Отправьте письмо на личную почту и откройте его там.

Выбирайте редактор, в котором показано, как выглядит письмо на разных устройствах. Идеально, если редактор интегрирован с сервисом Litmus. Если интеграции нет, проверяйте адаптивность вручную через личную почту.

Как оценить результат работы - своей или верстальщика

Если собираете письмо сами, проверьте адаптивность внутри редактора и посмотрите письмо с личной почты - этого достаточно. Хотите проверить адаптивность на многих устройствах, браузерах и почтовых клиентах сразу - тогда покупайте аккаунт в Litmus или Email on Acid, смотрите результат там.

Тем, кто отдавал верстку на аутсорс, покупать аккаунт не обязательно, попросите скриншоты из Litmus у верстальщика. Если он профессионал, то проверяет письма на подобных сервисах, отправить скриншот для него не проблема.

При проверке присмотритесь к почтовым клиентам, в основном, косяки всплывают здесь. Обязательно проверьте, как открывается письмо в Outlook, Gmail, Yandex и Mail.ru - это самые популярные почтовые клиенты в России.

Не стоит тратить время на исправление макета, если он некорректно отображается на третьем айфоне, в седьмой версии Internet Explorer или в почтовом клиенте The Bat. Да, всегда найдутся те, кто пользуется третьим айфоном, но их меньшинство. Стоит ли переделывать макет ради 1-2% от общей базы? Зависит от количества и «качества» базы.

Надеемся, вы ее сегментировали и про своих подписчиков знаете все. Если 1-2% - это 10 000 человек, то заморочиться стоит. Если вы работаете в b2b и эти 1-2% - управляющие компаний, собственники бизнеса и другие вип-клиенты, придется адаптировать письма под них.

Проследите за тем, чтобы письмо адекватно отображалось в Outlook, Gmail, Yandex и Mail.ru - этого достаточно.

Памятка маркетолога

1) Определитесь с форматом письма, каким оно будет: стандартным и простым или сложным и креативным. Письма со сложной структурой отдавайте дизайнеру и верстальщику. Простые письма собирайте в редакторе сервиса рассылки, они адаптируются по умолчанию.

2) Проверяйте результат во встроенном редакторе и, если позволяет бюджет, на сторонних сервисах. Принимая письмо у верстальщика, просите скриншоты, которые подтверждают, что письмо отображается корректно - по крайней мере, в популярных почтовых клиентах и популярных браузерах.

3) Обязательно просмотрите письмо через личную почту, хотя бы в основных почтовых клиентах и с актуальных моделей смартфонов на iOS и Android.

Мультиканальная маркетинговая платформа

Расскажем об особенностях верстки email шаблонов - в чем основные проблемы верстки, как работать с мультимедиа, шрифтами и адаптивностью. И все это с примерами кода.

Самые популярные почтовые платформы

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

First heading Hide Show Pellentesque habitant morbi... Read more...

вместо