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

Опубликовано: 2015-11-20

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

На конференции по дизайну электронной почты Дэн Денни из Code School прекрасно сформулировал проблему:

Самая большая проблема в создании электронной почты - это не Gmail… пора.

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

Итак, что вы можете сделать, чтобы оптимизировать свой рабочий процесс? Одно слово: фрагменты .

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

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

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

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

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

Dreamweaver

В Dreamweaver вы можете добавлять или редактировать фрагменты, перейдя в: Windows → Snippets → New / Edit. Вы даже можете сохранять свои фрагменты в группах (например, фрагменты, связанные с таблицами, фрагменты, связанные с изображениями и т. Д.) Для облегчения поиска.

Dreamweaver-snippets1

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

Лакмус Builder

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

лакмусовая бумажка

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

Builder-snippets

Возвышенный текст

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

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

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet>
возвышенные фрагменты

Атом

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

Подобно Sublime Text, фрагменты в Atom работают с помощью триггера сочетания клавиш. Вы также можете добавить точки редактирования внутри фрагмента, используя знаки доллара в последовательном порядке ( 1 доллар, 2 доллара и т. Д.).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """
фрагменты атома

Coda

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

coda-snippets1

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

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

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

Doctype

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

HTML5

 <!doctype html>

XHTML

Второй тип документа - XHTML:

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

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

Метатег

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

UTF-8

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

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

Область просмотра

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

 <meta name="viewport" content="width=device-width, initial-scale=1" />

телефон с операционной системой Виндоус

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

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Таблицы

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

Стол 1 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

Стол 2 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Стол 3 × 1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Стол 2 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Стол 2 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Стол 3 × 2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Стол 3 × 3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Пуленепробиваемые кнопки

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

Кнопка VML

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

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

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

Кнопка на основе заполнения

Второй метод - это живой текст с кнопкой на основе отступов:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

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

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

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

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

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

Отступ + кнопка с рамкой

Последний метод включает комбинацию кнопок заполнения и границы:

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Этот прием используется, чтобы избежать проблем с отрисовкой отступов в Outlook.

Изображений

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

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

Ссылки

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

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

 <a href="#">{style}</a>

Удалить синие ссылки на 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; }

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

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

Вот фрагмент:

 <div> {preheader text} </div>

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

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

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

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

 @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 Query

 @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 Query

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

iPhone 6 Plus (стандартный вид) Media Query

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

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

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

Рендеринг Microsoft Word

 <!--[if mso]> {content} <![endif]-->

Прогноз на 2000-2013 гг.

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

Дополнительные условные комментарии к Outlook:

  • Outlook 2000
  • Перспективы на 2000-2002 гг.
  • Прогноз на 2000-2003 гг.
  • Прогноз на 2000-2007 гг.
  • Перспективы на 2000-2010 гг.
  • Outlook 2002
  • Прогноз на 2002-2013 гг.
  • Outlook 2003
  • Outlook 2003-2013
  • Outlook 2007-2013
  • Outlook 2010
  • Прогноз на 2010-2013 гг.
  • Outlook 2013

WebKit

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

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

Gmail

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

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

 * [lang~="{name}"] { {style} }

Yahoo

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

 @media yahoo { {style} }

Android

Джеймс Уайт недавно опубликовал в Litmus Community хакерство для центрирования электронной почты на Android 4.4.

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

Фрагменты в сообществе

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

Сортируйте существующие фрагменты по почтовому клиенту, для которого он был создан, или по типу фрагмента (например, взлом, изображение, ссылка и т. Д.). Вы можете добавить свою собственную и создать библиотеку сниппетов из избранных. И вы можете сэкономить еще больше времени, импортируя фрагменты из сообщества прямо в Builder. В сочетании с Instant Previews Builder кодирование с помощью сниппетов может быть самым быстрым способом создания потрясающих почтовых кампаний.

Посмотреть фрагменты в Сообществе →