Главная » Оформление пенсии » Гид по верстке адаптивных писем. Что вы получите? Простой двублочный шаблон «Tubor» для email рассылки

Гид по верстке адаптивных писем. Что вы получите? Простой двублочный шаблон «Tubor» для email рассылки

Обновили материал 20.06.2018

Вёрстка писем отличается от привычной веб-вёрстки из-за особенностей интерпретирования в различных веб-интерфейсах и почтовых клиентах.

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

Как выглядит общий шаблон адаптивного письма:

Чтобы решить проблему с автомасштабированием писем в iOS 10 и iOS 11, мы добавили:

Пример ошибки автомасштабирования

Следующий хак:

Webkit-text-size-adjust:none; -ms-text-size-adjust: none;

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

Перейдём к телу письма - раздел body. Цвет фона веб-интерфейса может быть различным, поэтому необходимо всё обернуть в таблицу с желаемым цветом фона, даже если он белый, как в данном случае:

…

Из-за ограниченной поддержки стилевых свойств, например max-width, почтовыми клиентами Outlook 2007–2016, а также IE-подобными почтовыми клиентами Outlook 2003 и Lotus Mail в условных комментариях необходимо построить вспомогательную табличную структуру, которая ограничит ширину письма в этих почтовых клиентах:

После этого следует основная контентная таблица с шириной 100% и ограничением максимальной ширины в 600 px.

Что нужно помнить при емейл-вёрстке:

Используйте максимально простую структуру таблиц. Сложные таблицы не всегда верно воспроизводит Outlook.
Старайтесь избегать объединения ячеек (colspan, rowspan). Вместо этого используйте вложенные таблицы.
Значения атрибутов cellpadding, cellspacing и border у таблицы следует обнулять.
Указывайте в явном виде выравнивание внутри ячеек, как горизонтальное, так и вертикальное (align, valign), так как значения по умолчанию могут отличаться. Это негативно сказывается на отображении письма.
В Outlook (2007/2010) могут появляться «разрывы» страниц, которые выглядят как пространство, разрывающее таблицу или изображение. Они возникают, если высота таблицы превышает 1800 px. Чтобы избавиться от этой проблемы, закройте все таблицы (включая родительскую) и откройте заново, чтобы высота каждой из таблиц не превышала 1800 px.
Код должен легко читаться. Большое число таблиц часто затрудняет ориентирование в структуре.
Отбивка вложенных элементов должна присутствовать, но при этом не стоит ей злоупотреблять, как и переносом строк и растягиванием блока в высоту. Логический блок в идеальном варианте должен целиком помещаться на экран.
Используйте комментарии с обозначением назначений блока и его начала/конца.
Размер html-кода письма не должен превышать 100 КБ, иначе он будет обрезан в некоторых веб-интерфейсах и почтовых клиентах, в частности, в Gmail. После того как письмо свёрстано и настроено, проверяйте размер получившегося html-файла. Для сокращения размера письма можно исключить все символы табуляции, переноса строк и все комментарии (кроме условных).
Используйте медиазапросы аккуратно и помните о тех подписчиках, чьи почтовые клиенты их не воспринимают.

Основные элементы письма

Отступы

Платформы по-разному работают с вертикальными и горизонтальными отступами.

Например, в начале 2013 года оutlook.com начал вырезать отступы margin из кода емейлов. В результате для создания в емейле необходимых интервалов по горизонтали приходится использовать свойство отступов padding. Осложняет ситуацию то, что почтовый клиент Outlook не поддерживает отступы padding для div, а отступы margin - поддерживает. В связи с этим лучше отказаться от использования как padding, так и margin.

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

Outlook 2013 имеет ещё одну интересную особенность: при создании ячейки меньше 19 пикселей в высоту она растянется до 19 пикселей. Чтобы этого избежать, вы можете добавить стилевое свойство line-height при описании стиля ячейки.

Текст

При оформлении текста также есть ряд особенностей. Используйте теги, не имеющие специфического оформления по умолчанию, - span. От использования p, h1–h6 и т. д. следует отказаться.

Для родительской ячейки или блока следует указать line-height. Так как в различных веб-интерфейсах и почтовых клиентах отображение по умолчанию для текста может отличаться, необходимо в явном виде прописывать следующие стилевые свойства:

Цвет (color) . Цвет необходимо прописывать у каждого текстового элемента, при этом, как упоминалось ранее, он должен быть задан в виде шестнадцатеричного кода, например #4676a9.
Размер шрифта (font-size) . Размер обычно указывается в px или pt. Предпочтительней использовать первый вариант.
Гарнитура (font-family) . В письмах следует использовать только стандартные шрифты. Обычно под стандартными подразумевают предустановленные шрифты в ОС Windows XP. Существует два семейства шрифтов - с засечками (serif) и без засечек (sans-serif). Чаще всего используются: Courier, Georgia, Times, Times New Roman, Arial, Verdana, Tahoma, Trebuchet MS.

Пример текста

Высота строки (line-height) . В различных веб-интерфейсах и почтовых клиентах значение высоты строки может сильно отличаться, в связи с чем текст может оказаться не выровненным с другими элементами или вовсе не поместиться в блок, нарушая общую структуру и дизайн.
Спецсимволы . Все спецсимволы (параграфы, сердечки, элементы псевдографики и т. д.) в письме следует заменить на соответствующие html-сущности. Их можно легко найти, например на сайте html5book . Говоря о спецсимволах, стоит также упомянуть о борьбе с «висячими» союзами и предлогами. Их наличие некорректно с точки зрения типографики и не поощряется с точки зрения вёрстки, поэтому следует использовать символ неразрывного пробела, чтобы исключить их.Реже бывает и обратная ситуация, когда встречаются очень длинные слова, которые могут не поместиться на экран мобильного телефона. Чтобы обеспечить корректное отображение и грамотный перенос, можно воспользоваться символом «мягкого переноса»

Ссылки

Оформление ссылок аналогично оформлению обычного текста, соответственно, используется тег «a» и появляется атрибут href. А также для ссылок в письмах необходимо указывать атрибут target со значением _blank для открытия их в новом окне.

Цвет ссылок следует задать в явном виде и прописать стилевое свойство text-decoration с желаемым значением, так как во многих почтовых клиентах и веб-интерфейсах данное свойство имеет значение по умолчанию underline у ссылок.

Пример текста

Изображения и фон

Работа с изображениями в письмах также имеет ряд особенностей. Помимо обязательных атрибутов (src и alt), здесь необходимо в явном виде указывать размеры (width и height) изображения, а также для исключения нежелательных отступов прописывать стилевое свойство display со значением block:

Если в ячейке содержится только одно изображение, которое в высоту не превышает 19 px, то у этой ячейки следует прописать стилевое свойство line-height с указанием необходимой высоты - для исключения проблем отображения в Outlook 2013.

В большинстве почтовых клиентов и в некоторых веб-интерфейсах (outlook.com, в некоторых случаях yahoo и в некоторых случаях gmail) изображения по умолчанию не загружаются, поэтому необходимо обеспечить приемлемое отображение без картинок, для этого используйте альтернативный текст (alt), стилизованный под дизайн письма, фоновые цвета и т. д.

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

При вставке изображений в адаптивное письмо не всегда можно указать размеры width и height в пикселах, иногда приходится указывать в процентах: часто у креативов прописывается ширина 100%. При этом большинство веб-интерфейсов и почтовых клиентов растянут данное изображение на 100% ширины родительского блока, однако Outlook 2007–2016 отобразит изображение в масштабе 1:1. Поэтому ширина такой картинки должна совпадать с выводимой шириной.

Фоновые изображения

Outlook 2007–2016 не поддерживает фоновые изображения. Исключением является фоновое изображение, прописанное в body. Однако применение данного приёма сильно повышает риск попадания письма в спам, так что использовать его не рекомендуется.

Данное ограничение можно обойти, используя VML. Для удобного его применения можете воспользоваться нашим .

Товарная сетка

Базовым подходом при адаптации писем является «резиновая» вёрстка. Для обеспечения удобного взаимодействия с письмом на небольшом экране мобильного устройства и на экране стационарного компьютера или ноутбука часто применяется приём блочного перестроения.

Он основан на применении инлайновых блоков. При уменьшении экрана, когда блоки перестают помещаться, они перестраиваются один под другой:

Так как Outlook 2007–2016 не поддерживает плавающие блоки, то специально для них строится вспомогательная структура в условных комментариях:

Блок1

Блок2

Код, заключённый между:

будет проигнорирован всеми почтовыми клиентами, кроме Оutlook 2007–2016 и IЕ-подобными почтовыми клиентами.

А каждый из блоков будет иметь следующую структуру:

Блок

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

Блок 2

Блок 1

Прочие элементы и приёмы

Невидимый прехедер

Практически все веб-интерфейсы выводят рядом с темой письма также и первый текст:

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

Для этого следует добавить в самое начало html-тела письма код со следующей структурой:

4 варианта майских праздников от Localway. Сидеть дома в майские праздники - грех.

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

Видео в письмах

Стандартный почтовый клиент Mail вновь стал воспроизводить html5-видео, однако - прямая ссылка на youtube-видео, поставленная на изображение.

При такой реализации видео отобразится на слое в веб-интерфейсах Mail.ru (около 55%) и Gmail (около 14%). При этом на большинстве мобильных устройств видео будет открыто в приложении Youtube, без открытия браузера.

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

Тестирование

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

Для ускорения процесса тестирования можно воспользоваться сервисами Litmus и EmailOnAcid, однако это не отменяет необходимости проверки отображения каждого отдельного письма вручную.

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

Инструменты и сервисы:
Email buttons - генератор кнопочек с использованием VML.
- вставка фоновых изображений в письма с использованием VML.
Litmus - тестирование отображения писем.
Email On Acid - альтернатива Litmus: тестирование отображения писем.

Полезные материалы:
Блог Litmus - лидер рынка емейл-тестирования. Интересные кейсы и последние новости из мира емейл-маркетинга и вёрстки емейл-писем.
Блог Email On Acid - интересные кейсы и последние новости из мира емейл-маркетинга и вёрстки емейл-писем.
- первый блог о емейл-маркетинге, рассказывает о том, как сделать письма эффективными.
Tod’s blog - интересные кейсы и полезные материалы о вёрстке и разработке.

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

Разработка под 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 представлен весь

Что такое адаптивный дизайн в email-писем? Адаптивный шаблон сообщений способен определять размер экрана устройства или размеры окон браузера при помощи @media query , и позволяет предоставить посетителю максимально оптимизированный вариант дизайна сайта. Самой популярной точкой преломления (или breakpoint) считается 480 пикселей (спецификация iPhone), однако технология позволяет вам выставить любые точки преломления, адаптировав ваш сайт под различные размеры экранов, включая мобильные устройства, планшеты или настольные ПК.

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

В то время как масштабируемый дизайн гораздо легче разработать, его работу на различных устройствах сложно называть «работой», так как от этого сильно страдает юзабилити, и структура дизайна может преломляться. Масштабируемые дизайны лучше подходят текстовым email’ам без использования графики (которые, кстати говоря, не очень эффективно работают в торговой индустрии). Адаптивный дизайн не требует разработки под настольные ПК, а вместо этого предлагает возможность предоставить пользователям мобильных устройств наиболее подходящий опыт взаимодействия, в то время, как и пользователи стационарных компьютеров смогут увидеть сообщение во всей красе.

К сожалению, адаптивный дизайн – не панацея от глупости . Некоторые почтовые клиенты вроде Gmail или Outlook «вырезают» все CSS-стили и не поддерживают @media query. Есть информация о том, что большинство пользователей предпочитают использовать не нативные почтовые клиенты через синхронизацию, которые поддерживают @media и позволяют правильно генерировать адаптивный дизайн.

Однако вам следует подумать о запасном варианте в форме гибкой верстки или шаблона с фиксированной шириной на HTML.

Адаптивный шаблон и верстка письма.

1. Используйте подход «в первую очередь для мобильных устройств». В целом, гораздо легче начинать разработку под мобильные устройства, а уже потом подгонять ее под настольные ПК, нежели пытаться втиснуть контент с полноценного сайта в маленький экран. Кстати говоря, контент этих двух версий не обязательно должен в точности повторяться, так что не нужно смущаться по поводу того, что по итогу дизайн и содержимое настольной версии не будет дублировать то, что видят пользователи мобильных устройств.

2. Упростите навигацию. Наберитесь смелости для того, чтобы откинуть идею использовать меню в шаблоне вашего email. Пользователи не расценивают электронную почту как сайты, они просто сканируют контент и решают, стоит ли нажимать по каким-нибудь ссылкам. Зачастую менюшки просто лишние. Проведите небольшую аналитику ваших писем. Какой процент кликов приходится на меню? Вот именно.

Также постарайтесь убрать все не очень важные ссылки вроде кнопок шэйринга в социальные сети в шапке и подвале.

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

Стиль электронных рассылок

4. Используйте читабельный шрифт. Здесь имеется не просто шрифт без засечек. Размер шрифта должен составлять минимум 13 пикселей (минимальный размер шрифта в iPhone), так как меньшие по размеру шрифты автоматически увеличиваются устройствами, что может навредить общему виду шаблона.

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

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

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

Контент

7. Скройте необязательное содержимое шапки и подвала. Если вас не обязывают какие-либо соглашения по брендированию, то постарайтесь исключить все графические элементы и текст, которые смещают важную информацию вниз. В первую очередь, избавьтесь от ссылки «Мобильная версия», так как вы уже перешли на адаптивный дизайн.

8. Хорошо продумайте мерчандайзинг. Если ваши email-сообщения укомплектованы различными предложениями товаров, то постарайтесь адаптировать ассортимент под мобильных пользователей. Всегда помните о том, что ваш ассортимент для пользователей настольных ПК не всегда должен совпадать с ассортиментом продукции для мобильных пользователей.

9. Используйте текстовый контент. Используйте текст вместо изображений, — это позволит вам «ухватить» клиентов, у которых отключено отображение картинок.

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

10. В первую очередь разрабатывайте дизайн под клиентов с выключенными картинками. Иначе вы рискуете рассылать вашим потенциальным клиентам «белый экран смерти».

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

12. Оптимизируйте размер изображение. Скорость загрузки страниц сегодня имеет большое значение, а особенно если большинство ваших пользователей используют мобильные устройства и бесплатный wi-fi во всех кафешках.

13. Повысьте резкость картинок. Экраны с высоким разрешением Retina требуют от вас изображений в высоком качестве и с повышенной резкостью.

14. Замените анимированные Gif-изображения на статичные. Учитывайте, что GIF хоть и может придать вашим письмам динамики, они все равно не будут работать на мобильных устройствах, поэтому выберите лучший кадр из изображения, который вам понравится.

Призыв к действию (Call to Action)

15. Используйте крупные кнопки. Научитесь правильно разрабатывать под touch-экраны. Для начала следует запомнить, что ссылки и кнопки должны составлять минимум 44х44 пикселей в размере, — таковы правила компании Apple.

16. Подружитесь с белым пространством. Белое пространство – ваш соратник. Самая главная ошибка, которую можно встретить в мобильном дизайне, — это слишком тесное размещение ссылок.

17. Сделайте кнопки еще больше! Да-да, это правило следует повторить!

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

19. Кнопки должны быть расположены проксимально контенту. Каждая ссылка – это, по сути, призыв к действию. Ссылки на товары должны быть расположены максимально близко к изображениям, которые их представляют, — таким образом, получатели будут знать, на что они кликают. Учитывайте это правило с каждой ссылкой/кнопкой в вашем сообщении.

20. Пусть ссылки выглядят как ссылки. Звучит так, как будто мы в детском саду, не правда ли? Однако актуальные реалии заключаются в том, что современные дизайнеры предпочитают оформлять ссылки просто другим цветом, полностью забывая про подчеркивание.

21. Оптимизируйте CTA под клиентов с отключенными изображениями. Кнопки – это тоже изображения… зачастую.

22. Используйте функционал совершения звонка только там, где это уместно. Все, что меньше 480 пикселей в ширину – это мобильное устройство. Поэтому было бы уместно использовать возможность позвонить прямо по указанному в сообщении номеру.

23. Ссылайтесь на оптимизированные . Не переводите получателей напрямую на ваш сайт.

24. Копируйте промо-коды. Автоматическое принятие кода ссылки для тех, кто перешел на сайт из email’а – это очень эффективная практика.

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

Стоит ли это ваших усилий?

Разработка адаптивного дизайна для электронных писем требует больше временных затрат, усилий и ресурсов, нежели альтернативные варианты, но так как email-рассылки по мобильным пользователям показывают статистику открытия до 40%, не стоит разочаровывать ваших подписчиков не очень удобным интерфейсом. К тому же, к отдельной email-кампании применить адаптивный дизайн гораздо проще, нежели ко всему сайту. Если вы планируете использовать адаптивный дизайн на собственном сайте, то для начала будет полезно запустить адаптивную email-кампанию.

Материал из Email Маркетинг Вики

Адаптивная вёрстка email – это вёрстка, которая обеспечивает корректное отображение письма на большинстве устройств. По данным компании campaignmonitor 41% email открываются на мобильных устройствах. Однако при первом открытии на мобильном устройстве, по ссылкам кликают только 78% подписчиков. Часто повторные открытия и клики происходят на десктопных устройствах .

Таким образом, адаптивная вёрстка может существенно повлиять на эффектиность email-кампании .

Основные правила вёрстки адаптивных email-сообщений

Помимо основных правил вёрстки для email, нужно помнить об особенностях экранов мобильных устройств.

Основные требования к адаптивной вёрстке:

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

Отображение письма на экранах разного размера

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

@media only screen and (max-device-width: 480px) { /* сюда пишутся стили для мобильных платформ */ } /* сюда пишется CSS для десктопа */

Чаще всего используется оператор @media only screen , для того чтобы почтовый клиент понимал, какие стили нужно использовать для данного экрана. Далее прописывается максимальный размер экрана: max-device-width: 480px .

Для экранов менее 480рх дополнительно можно использовать класс contenttable :

@media only screen and (max-device-width: 480px) { /* мобильные css-стили записываются здесь */ table { width: 320px !important; } } /* место для десктопных css-стилей*/ table.contenttable { width: 640px; }

Этот класс никак не влияет на отображение письма на экранах в 480px и больше, но, если экран меньше, класс contenttable сужает его.

Одноколоночная верстка для мобильных с применением медиа-запросов

Двух-трехколоночные шаблоны писем лучше читаются на десктопных устройствах. Так информация выглядит читабельнее. Однако применение такой вёрстки на мобильных устройствах затрудняется чтение письма – текст становится слишком мелким. Для мобильных устройств лучше применять одноколоночную вёрстку. Чтобы превратить двухколоночную вёрстку в одноколоночну, для начала нужно создать таблицу-контейнер для десктопной версии размером 640px и вложенные таблицы размером 320px. Вложенные таблицы будут играть роль колонок. Так как это не веб-вёрстка, то использовать лучше атрибуты HTML вёрстки, а не их CSS-аналоги. Например, для выравнивания текста используют атрибуты align=”left” и cellpadding=”10” вместо float: left; и padding: 10px; .

Код для двухколоночного шаблона, в самом простом виде будет выглядеть так :

First heading

Hide Show

Pellentesque habitant morbi...

Заголовок статьи
Применение медиа-запросов спасает не всегда. Во-первых, многие почтовые клиенты на Android и iOS не поддерживаю медиа-запросы. Во-вторых, такие почтовые службы, как gmail и Yahoo, не поддерживают медиа-запросы в принципе.
Вот еще несколько проблем, которы могут возникнуть при использовании медиа-запросов:

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

Использование тегов , расположенных столбцом, не всегда помогает в создании адаптивного шаблона письма, так как работает не везде.

Метод aligned table не позволяет нормально выровнять таблицы в мобильных приложениях без поддержки медиа-запросов.

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

Tutorial

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

Верстка адаптивных писем с Foundation for Emails

При верстке email письма обычно используется табличная верстка и весьма ограниченный набор css свойств . Табличная верстка подразумевает достаточно большую вложенность, и редактирование уже готового шаблона может стать настоящей головной болью. После принятия решения о переходе на адаптивные письма возник вопрос, как делать эти самые письма. Наш выбор пал на довольно популярный фреймворк Foundation , вернее на его недооцененного младшего брата Foundation for Emails .

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

Gulp: автоматизации процесса разработки
Inky шаблонизатор: конвертирует собственную разметку в HTML код
Sass: CSS препроцессор
Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
Inliner: переводит из таблиц стилей в инлайн стили
BrowserSync: перезагрузка страницы после изменения исходных файлов
Image Compression: сжатие изображений в процессе компиляции

Установка достаточно проста и состоит всего из нескольких шагов:

1. Устанавливаем foundation-cli , возможно понадобится использовать sudo

Npm install --global foundation-cli
2. Переходим в директорию проекта и выполняем команду

Foundation new --framework emails
CLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду npm start , после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения.

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

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

Пример кода с использованием Inky:

Put content in me!

HTML на выходе:

Put content in me!

Но не стоит увлекаться слишком большой вложенностью, т.к. вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)

Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».

Более подробно с документацией Foundation for Email можно ознакомиться .

1. Реализация адаптивности в письмах - довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.

Foundation for Emails в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x» , но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})
2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials .

Ваш шаблон будет выглядеть примерно так:

Definitely STILL an Email! {{> header}} {{> body}} {{> footer}}
В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.

3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head ,
дублируются, помимо этого дублировались теги head и body , как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data . Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

Title: Page Title description: Lorem ipsum. ---

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

Stuff on top

Stuff on bottom

HTML на выходе:

Stuff on top

Stuff on bottom

6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс.show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс.hide-for-large . Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

HTML на выходе:

Button

8. Не все почтовые клиенты поддерживают background-image , но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.

9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation .

В нашем примере уголок сделан с помощью псевдоэлемента:before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

Просмотров