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

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

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

{{ title }}

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, иначе придется гадать, почему у вас вместо кнопки простой текст.

Button

HTML на выходе:

Button

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

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

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

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

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

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

Описанный прием в свое время использовали дизайнеры Starbucks - попробуйте открыть это письмо в браузере и «поиграть» размерами окна.

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

Дефицит экранного места на мобильных устройствах требует вдумчивого использования изображений в почтовых рассылках. При этом хорошая поддержка CSS в некоторых мобильных клиентах (вроде Mail для iPhone) предоставляют дизайнерам определенный простор для творчества.

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

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

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

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

@media only screen and (max-device-width: 480px) { td { background-image: url(images/header-325.png); width: 325px !important; height: 115px !important; } td img { display: none; } }

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

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

Плюс этой техники заключается в том, что она позволяет сократить длину письма с помощью использования более «коротких» картинок. Как известно, в «мобайле» чем короче, тем лучше .

Ресайз изображений для «жидких» шаблонов

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

Очевидным решением кажется использование в нашей описанной выше media query опции background-size: 100% . Но есть и вариант получше - :

@media only screen and (max-device-width: 480px) { td { background-image: url(images/header-480.png) !important; background-size: cover; } td img { display: none; } }

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

@media only screen and (max-device-width: 480px) { td img { height:auto !important; width:100% !important; } }

Отображение high-res изображений для Retina-дисплеев

Здесь весь трюк заключается в создании изображений, которые в два раза больше чем те, что планируется реально использовать - это позволяет добиться кристальной четкости на дисплеях iPhone и iPad. Например, можно создать изображение размером 650px X 230px, а затем урезать его в два раза для мобильных устройств. Сделать это можно с помощью такого кода media query:

@media only screen and (max-device-width: 480px) { td { background-image: url(images/[email protected]) !important; background-size: 325px 115px; width: 325px !important; height: 115px !important; } td img { display: none; } } }

Для того, чтобы работать с дисплеями Retina с помощью конкретной таблицы стилей, можно объявить CSS таким образом:

@media all and (min-device-pixel-ratio: 1.5) { ... }

С этим методом тоже не все идеально. Все почтовые клиенты, которые поддерживают media query, будут вынуждены загружать большие hi-res картинки - а значит, в папке «Входящие» письмо тоже будет открываться дольше. Поэтому использовать описанный подход следует с осторожностью и только тогда, когда плюсы от отображения картинок высокой четкости перевешивают сопутствующие минусы.

Оптимизация форм подписки

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

Смартфоны на iOS и Android позволяют пользователям довольно легко взаимодействовать с формами, но есть несколько способов, которые дизайнеры и разработчики могут использовать, чтобы еще облегчить этот процесс. Оптимизация форм нужна для того, чтобы их было легче заполнять с мобильного устройства. Для бизнеса «легкое заполнение» выливается в повышение конверсии и новых подписчиков.

Приведем несколько советов по работе с формами и рассмотрим небольшой пример, который пригодится начинающим:

• Выравнивание по верхнему краю . В случае мобильных устройств часто возникает ситуация, при которой пользователь выбирает поле формы, и не видит его название. К примеру, при первоначальном уровне зума выровненная по левому краю надпись «Введите ваш email» может быть видимой, но после того как пользователь тапнет по полю ввода, произойдет «наезд» на него, в результате чего надпись исчезнет из поля зрения. Выхода из положения может быть два - использовать выравнивание по верхнему краю или добавлять описание формы в качестве ее же текстового значения. В последнем случае потребуется меньше места на экране, но может иногда раздражать пользователей - никому не нравится, когда поле, которое вы только что начали заполнять вдруг скрывается за выехавшей телефонной клавиатурой.
• Используйте input type=”email” . При использовании параметра input type=”email” в формах для ввода почтового адреса, на телефонах под iOS будет появляться специальная клавиатура, включающая символы вроде @.
• Лучше делать формы более узкими . Использование media queries и CSS может значительно улучшить юзабилити форм. Однако ничто так не раздражает пользователей, как ситуации, при которых значительная часть полей для ввода на экране загораживается другими элементами или просто в него не влезает после начала набора текста. Если делать длину поля ввода, скажем, не более 80% от ширины экрана, это может значительно улучшить юзабилити форм.
• Следует делать формы с несколькими вариантов ответа более лаконичными . Весь контент на мобильном устройстве лучше расположить в один столбец - особенно это касается чекбоксов. Часто выпадающие списки будут удобнее радиокнопок и позволят избавиться от необходимости скроллинга для работы с формой.
• Практический совет по масштабированию . Описанное выше больше относится к дизайну в целом, а не только к формам. Теперь один практический совет, относящийся исключительно к формам. Использование viewport-метатега поможет предотвратить непреднамеренный зум формы - и, как следствие, потерю из вида большей части ее содержимого. Вот как такой метатег может выглядеть в заголовке HTML-страницы: Подробная информация по этой теме представлена, к примеру, в документации Apple.

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

Как создать текстовый email для мобильной среды

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

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

В мобильной среде все не так просто. Иногда в том же iPhone Mail строка в 65 символов выглядит хуже, чем если бы она была гораздо длиннее.

Кейс: рассылка Twitter

Рассмотрев немало теории, настало время перейти к практике. И рассмотреть не просто какую-то там рассылку, а такую рассылку, письма которой получают миллионы людей.

Несколько лет назад email-нотификации Twitter были «не очень» при просмотре с мобильных устройств. Проблема заключалась в мелком тексте и широком шаблоне - необходимость постоянного зума и прокрутки убивала все желание читать такое сообщение на маленьком экране. Для улучшения ситуации потребовалось не так уж и много усилий.

Разбираемся с маленьким текстом

Прежде всего следовало разобраться с отображением текста. Причина его столь малого размера заключалась в использовании шаблона шириной 710px - для того, чтобы показать его во всей ширине почтовый клиент сильно «отъезжать» при просмотре. Помогло использование специальной media query:

@media only screen and (max-width: 480px) { ... }

Подобные объявления располагаются между тегов

Hello!

Я расположила главную таблицу контента по центру с помощью класса "content".

Обратите внимание

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

Важно: Когда вы используете CSS в заголовке вашего документа, вы обязаны в конце разработки использовать инструменты для их преобразования во встроенные. Если вы используете сервисы, наподобии MailChimp или Campaign Monitor , они автоматически предложат вам преобразовать эти стили во встроенные, когда вы импортируете вашу разметку. Вы обязаны это делать, потому что некоторые почтовые клиенты, такие как Gmail, проигнорируют или вырежут содержание вашего тэга

Создание заголовка

Создаем первую строку таблицы - заголовок. Добавляем нижеуказанное для стилизации строки, которую мы создали:

Hello!

И затем в своих CSS стилях, задаем подложку для нашего заголовка.

Header {padding: 40px 30px 20px 30px;}

Создание первой адаптивной строки

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

Левая колонка

Заменим наше маленькое привествие тем, что приведено ниже.

Создаем таблицу в 70px и также добавляем небольшую подложку, которая будет смотреться, как зазор между нашими двумя колонками. Подложка снизу добавит вертикального просвета, когда наши колонки нагромоздяться друг на друга на смартфоне.

Правая колонка

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

Если вы будете оставлять в запасе по-крайней мере 25px, ваши таблицы будут такими, как вы ожидаете.

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

style="width: 100%; max-width: 425px;">

Как вы можете увидеть, что я создала класс, названный "col425", для этой таблицы и задала ширину 425px для него. Я поместила таблицу, которая будет содержать в себе другую таблицу в 425px шириной, в код условия. Затем мы добавляем наш класс также и в медиа-запрос, который мы создали для Apple Mail.

Col425 {width: 425px!important;}

Сейчас внутри нашей ячейки добавим стилизированный заголовок.

CREATING

Responsive Email Magic

Subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;} .h1 {font-size: 33px; line-height: 38px; font-weight: bold;} .h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

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

Создание одноколоночной строки текста

Для создания одной строки текста, просто напросто добавим новую строку в нашу таблицу с классом ".content". Этой строке добавим класс ".innerpadding" с многократно используемыми значениями подложки. Также добавим класс "borderbottom", чтобы создать рамку для каждой строки.

Welcome to our responsive email!

CSS этой секции:

Innerpadding {padding: 30px 30px 30px 30px;} .borderbottom {border-bottom: 1px solid #f2eeed;} .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;} .bodycopy {font-size: 16px; line-height: 22px;}

Создание двухколоночной статьи

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Claim yours!

Мы добавили кнопку с классом "buttonwrapper". Она содержит ячейку-распорку с цветовой заливкой фона и также текстовую ссылку внутри себя. Я предпочитаю использовать этот способ, потому что он позволяет использовать кнопки с плавающей шириной, что очень полезно при создании многократно используемых шаблонов, где ширина каждой кнопки может быть различной. Если же ширина вашей кнопки фиксирована, вы можете предпочесть использоватьBulletproof Button Generator .

Стили для нашей кнопки:

Button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;} .button a {color: #ffffff; text-decoration: none;}

Также установим ширину для нового класса "col380", и добавим наш размер в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

@media only screen and (min-device-width: 601px) { .content {width: 600px !important;} .col425 {width: 425px!important;} .col380 {width: 380px!important;} }

Создание одной колонки для изображения

Это очень простая строка. Просто установим для изображения 100% ширину письма и убедимся, что его высота установлена в auto.

В наших CSS:

Img {height: auto;}

Создание финальной строки обычного текста

Наконец мы добавим строку текста без рамки внизу.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Создание подвала

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

® Someone, somewhere 2013 Unsubscribe from this newsletter instantly

Добавим требуемые стили для подвала в CSS:

Footer {padding: 20px 30px 15px 30px;} .footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;} .footercopy a {color: #ffffff; text-decoration: underline;}

Оптимизация кнопок для мобильных устройств

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

Удалим цвет из тэга td, к которому он был применен и затем добавить его в тэг a с большой подложкой.

Я использую оба свойства max-width и max-device-width в этом медиа-запросе в попытке избежать баг Oulook.com IE9

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) { body .buttonwrapper {background-color: transparent!important;} body .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;} }

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

Дальнейшие усовершенствования с использованием медиа-запросов

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

Unsubscribe from this newsletter instantly

и добавляем соответствующие CSS стили в медиа-запрос:

Body .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} body .hide {display: none!important;}

Вы можете также наметить классы.innerpadding, .header и.footer, чтобы уменьшить влияние подложки для клиентов, которые поддерживает медиа-запросы.

Тестируй и двигайся дальше!

Наконец, как и всегда, убедитесь, что вы прошли валидацию (используя W3C Validator - вы можете иметь только одну ошибку с собственным атрибутом "yahoo" тэга body) и протестируй всё ли в порядке, используя реальные устройства и на Интернет-просмотрищиках, наподобие Litmus или Email on Acid .

Получай удовольствие, создавая адаптивные электронные письма, которые выглядят великолепно в любом почтовом клиенте!

Сегодня пользователи все чаще читают электронные письма на мобильных устройствах. Каково бывает просмотр большого 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.

Viewport и Media Queries

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

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

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

@media only screen and (max-width: 600px) { table, img, td { display:none!important; } }
Это стандартный подход при верстке адаптивных email"ов: перезапись CSS в head с помощью!important. При этом GMail будет игнорировать стили в head. Поэтому необходимо следить за тем, чтобы контент везде корректно отображался. С помощью Media Queries можно также ограничить ширину блока с контентом:

@media only screen and (max-width: 600px) { table { width: 92%!important; } }

Кнопки

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

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

@media only screen and (max-width:600) { a{ 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; } }
Ну совсем простой способ - обычная ссылка. Однако при этом страдает юзабилити на устройствах с тач-скрином:

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

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

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

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

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

Заключение

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