Полное руководство по использованию сниппетов в дизайне email-рассылок

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

На конференции The Email Design Conference Дэн Денни из Code School точно обозначил проблему:

Главная сложность в создании писем — не Gmail… а время.

Когда речь идёт о дизайне email, время играет ключевую роль, и внедрение рабочего процесса разработки становится критически важным. Чтобы успевать за быстро меняющимися требованиями к дизайну писем, всё важнее оптимизировать рабочий процесс.

Так что же можно сделать для оптимизации? Один ответ: **Сниппеты**.

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

## Что такое сниппеты?

Сниппеты — это модули многоразового кода, которые можно использовать в шаблоне письма или в более широкой системе дизайна email. Они идеально подходят для элементов, часто используемых в дизайне писем, таких как doctype, защищённые от ошибок кнопки и ссылки. Вместо того чтобы переписывать код каждый раз при использовании одного из этих элементов, вы можете просто вставить сниппет. Использование сниппетов автоматизирует процесс кодирования и значительно ускоряет разработку.

## Как использовать сниппеты

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

### Dreamweaver

В Dreamweaver вы можете добавлять или редактировать сниппеты, перейдя в: Окно → Сниппеты → Создать/Редактировать. Вы даже можете сохранять сниппеты в группах (например, сниппеты для таблиц, сниппеты для изображений и т.д.) для удобного поиска.

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

### Litmus Builder

В проекте Builder нажмите на значок «Сниппеты» в правом верхнем углу редактора.

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

### Sublime Text

Чтобы просмотреть существующие сниппеты или добавить новые в Sublime Text, перейдите в: Инструменты → Сниппеты/Новый сниппет. Каждый сниппет сохраняется в отдельном файле .sublime-snippet.

Добавляйте сниппеты в код с помощью сочетаний клавиш. Например, в приведённом ниже коде сниппет вызывается при вводе «hello». Также можно добавлять точки редактирования внутри сниппета с помощью знаков доллара в последовательном порядке (**$1**, **$2** и т.д.).

«`

«`

### Atom

Просматривайте, редактируйте или добавляйте сниппеты в Atom, перейдя в: Atom → Открыть ваши сниппеты. Каждый сниппет сохраняется в отдельном файле snippets.cson.

Как и в Sublime Text, сниппеты в Atom работают через сочетания клавиш. Также можно добавлять точки редактирования внутри сниппета с помощью знаков доллара в последовательном порядке (**$1**, **$2** и т.д.).

«`

‘Name’:

‘prefix’: ‘tabtrigger’

‘body’: «»»

/* Вставьте сниппет здесь */

«»»

«`

### Coda

В Coda сниппеты называются «Клипы». Чтобы добавить или отредактировать клип, перейдите в: Боковая панель → Клипы. Клипы можно сохранять в группах, и они работают через сочетания клавиш. Также можно добавлять точки редактирования внутри сниппета, определяя пользовательские заполнители в интерфейсе.

## Библиотека сниппетов

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

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

### Doctype

Doctype сообщает почтовому клиенту, в каком режиме отображать письмо: стандартов или совместимости. Для email рекомендуется использовать две формы doctype. Первая — это doctype HTML5:

#### HTML5

«`

«`

#### XHTML

Вторая — это doctype XHTML:

«`

«`

Campaign Monitor объясняет, какие doctype HTML лучше использовать, а также есть отличное обсуждение на эту тему в сообществе Litmus. Если не указать doctype для письма, почтовые клиенты будут отображать его в «режиме совместимости», что может привести к проблемам с рендерингом.

### Метатеги

Если вы создаёте адаптивное письмо, необходимо включить несколько ключевых метатегов.

#### UTF-8

Первый рекомендуемый метатег устанавливает кодировку символов utf-8, которая является стандартной для писем. При необходимости её можно изменить.

«`

«`

#### Viewport

Второй рекомендуемый метатег настраивает адаптивность письма.

«`

«`

#### Windows Phone

Третий рекомендуемый метатег специально предназначен для адаптивности писем на Windows Phone.

«`

«`

### Таблицы

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

#### Таблица 1×1

«`

{content}

«`

#### Таблица 2×1

«`

{content}

{content}

«`

#### Таблица 3×1

«`

{content}

{content}

{content}

«`

#### Таблица 2×2

«`

{content}	{content}
{content}	{content}

«`

#### Таблица 2×3

«`

{content}	{content}
{content}	{content}
{content}	{content}

«`

#### Таблица 3×2

«`

{content}	{content}	{content}
{content}	{content}	{content}

«`

#### Таблица 3×3

«`

{content}	{content}	{content}
{content}	{content}	{content}
{content}	{content}	{content}

«`

### Защищённые кнопки

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

#### Кнопка на основе VML

Первый метод создания защищённой кнопки был разработан Стигом Мортеном Мире из Campaign Monitor и основан на подходе с использованием VML:

«`

«`

Campaign Monitor также создал buttons.cm — простой инструмент для генерации кода VML-кнопки, приведённого выше.

#### Кнопка на основе отступов

Второй метод — это подход с использованием живого текста и кнопки на основе отступов:

«`

{button text}

«`

Основной недостаток этой кнопки заключается в том, что она не на 100% кликабельна.

#### Кнопка на основе границ

Третий метод создания защищённой кнопки предполагает создание границы вокруг ссылки для увеличения кликабельной области:

«`

{button text}

«`

Основной недостаток этого метода заключается в том, что Outlook 2007-2013 не учитывает ширину границ для тегов ссылок, что приводит к уменьшению искусственных отступов кнопки.

#### Кнопка на основе отступов и границ

Последний метод сочетает в себе подходы с отступами и границами:

«`

{button text}

«`

Этот трюк используется для обхода проблем с рендерингом отступов в Outlook.

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

При использовании изображений в письмах необходимо учитывать множество ключевых факторов. Например, вы должны определить высоту и ширину в HTML-атрибутах, чтобы изображения корректно отображались в Outlook. Также крайне важно использовать ALT-текст не только для целей доступности, но и потому, что 43% пользователей просматривают письма с отключёнными изображениями. Наконец, чтобы предотвратить появление лишних отступов и пробелов вокруг изображений, следует установить для них display:block;.

«`

«`

### Ссылки

#### Базовая ссылка

При использовании ссылки в письме необходимо задать для неё встроенные стили, такие как font-size, font-family и text-decoration. Вот простой сниппет, в котором уже заданы эти встроенные стили:

«`

{style}

«`

#### Удаление синих ссылок на iOS

Существует несколько стратегий удаления синих ссылок на iOS, но вот простой сниппет, который использует одно CSS-объявление для этого:

«`

a[x-apple-data-detectors] {

color: inherit !important;

text-decoration: none !important;

font-size: inherit !important;

font-family: inherit !important;

font-weight: inherit !important;

line-height: inherit !important;

}

«`

### Скрытый прехедер/предпросмотровый текст

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

Вот сниппет:

«`

«`

### Медиазапросы

Медиазапросы — это часть каскадных таблиц стилей (CSS), языка, используемого для стилизации веб-сайтов и email-кампаний. С помощью медиазапросов можно точно настраивать дизайн писем, чтобы они лучше отображались в мобильных, настольных и веб-почтовых клиентах.

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

#### Базовый медиазапрос

«`

@media screen and ({declaration}) {

{content}

}

«`

#### Медиазапрос с максимальной шириной

«`

@media screen and (max-width: {width}) {

{content}

}

«`

#### Медиазапрос с минимальной шириной

«`

@media screen and (min-width: {width}) {

{content}

}

«`

#### Медиазапрос для iPad 1 & 2 + iPad Mini

«`

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

{style}

}

«`

#### Медиазапрос для iPad 3 & 4

«`

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {

{style}

}

«`

#### Медиазапрос для iPhone 2G/3G/3GS

«`

@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {

{style}

}

«`

#### Медиазапрос для iPhone 4/4S/5/iPhone 6 (режим масштабирования)

«`

@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {

{style}

}

«`

#### Медиазапрос для HTC ONE + SAMSUNG GALAXY S4/S5

«`

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {

{style}

}

«`

#### Медиазапрос для iPhone 6 (стандартный вид) + iPhone 6 Plus (режим масштабирования)

«`

@media screen and (max-device-width: 375px) and (max-device-height: 667px) {

{style}

}

«`

#### Медиазапрос для iPhone 6 Plus (стандартный вид)

«`

@media screen and (max-device-width: 414px) and (max-device-height: 776px) {

{style}

}

«`

### Условные комментарии для Outlook

Из-за множества проблем с рендерингом, связанных с необходимостью поддержки Outlook, иногда полезно нацеливаться на Outlook с помощью специфических стилей. Outlook можно нацеливать с помощью условных mso-комментариев для HTML или CSS-контента.

#### Рендеринг Microsoft Word

«`

«`

#### Outlook 2000-2013

«`

«`

Другие условные комментарии для Outlook:

— Outlook 2000

— Outlook 2000-2002

— Outlook 2000-2003

— Outlook 2000-2007

— Outlook 2000-2010

— Outlook 2002

— Outlook 2002-2013

— Outlook 2003

— Outlook 2003-2013

— Outlook 2007-2013

— Outlook 2010

— Outlook 2010-2013

— Outlook 2013

### WebKit

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

«`

@media screen and (-webkit-min-device-pixel-ratio: {value}) {

{style}

}

«`

### Gmail

Gmail не поддерживает классы или id в теге писем, поэтому CSS должен быть встроенным. Однако Джастин Кхо из FreshInbox обнаружил новый трюк, благодаря которому Gmail будет читать CSS в теге писем.

Если использовать атрибут lang или title в качестве селектора атрибутов, значение которого находится в списке значений, разделённых пробелами, одно из которых является точным совпадением, Gmail прочитает этот CSS. Это звучит сложно, поэтому вот сниппет, который поможет:

«`

* [lang~=»{name}»] {

{style}

}

«`

### Yahoo

Yahoo Mail недавно представил свой уникальный медиазапрос, позволяющий легко нацеливаться на определённые стили для веб-почты.

«`

@media yahoo {

{style}

}

«`

### Android

Джеймс Уайт недавно опубликовал в сообществе Litmus трюк для центрирования писем на Android 4.4.

«`

body { margin:0 !important; }

div[style*=»margin: 16px 0″] { margin:0 !important; }

«`

## Сниппеты в сообществе

Хотите ещё больше сниппетов? Есть любимые, которыми хотите поделиться? С помощью энтузиастов email-разработки у нас уже есть десятки полезных сниппетов, например, код для удаления синих ссылок на устройствах iOS, в сообществе Litmus.

Отсортируйте существующие сниппеты по почтовому клиенту, для которого они созданы, или по типу сниппета (например, хак, изображение, ссылка и т.д.). Вы можете добавить свои собственные и создать библиотеку любимых сниппетов. А ещё можно сэкономить время, импортируя сниппеты из сообщества прямо в Builder. В сочетании с мгновенными превью Builder, кодирование с использованием сниппетов может стать самым быстрым способом создания потрясающих email-кампаний.