Блог Верстка
9 минут на чтение
471
0

Ключевые принципы дизайна и вёрстки электронного письма

9 минут на чтение
471
0

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

Особенности дизайна и вёрстки писем

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

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

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

Не все CSS и HTML-теги работают в имейлах. Набор дизайнерских инструментов для рассылок существенно отличается от инструментов для дизайна сайта. В этом смысле письма практически «застряли в двухтысячных». Хотя с каждым годом появляется чуть больше возможностей для креатива — в Outlook приходится верстать по классике.

Структура письма

Общепринятая структура имейл-письма состоит из четырёх блоков:

  1. Прехедер;
  2. Шапка;
  3. Тело письма;
  4. Футер (подвал).

От письма к письму шапка и подвал, как правило, не меняются. В прехедере специалисту нужно только поменять описание. Вся основная работа ведётся в теле письма.

Где и как создать письмо

Собрать рассылку проще всего в блочном редакторе. Письмо в таком сервисе собирается как лендинг в конструкторе сайтов — блоками. Можно ещё больше упростить себе задачу и выбрать уже готовый шаблон.

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

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

Размер письма

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

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

Иначе часть контента не поместиться на экране и письмо придётся прокручивать по горизонтали.

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

Табличная вёрстка

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

Посмотрите на код: всё письмо представляет собой таблицу, а внутренняя структура строится из более мелких ячеек.

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

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

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

А ещё вёрстка с этим макетом гибче.

Если у вас есть задача скрыть какой-то элемент для десктопа, то можно добавить стиль mso-hide:all;

Универсальные HTML-теги

В самом начале мы говорили о том, что не можем применять в рассылке все элементы HTML-кода. Это происходит из-за особенностей почтовых программ: какие-то почтовики не распознают тег <button>, а в Outlook и Mail.ru, например, не сработают теги <header> и <footer>.

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

Вот полный список универсальных тегов и атрибутов.

Что нельзя использовать

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

Не добавляйте Flash-анимацию и Java Script в рассылки. Они считаются потенциально опасными объектами: с их помощью спамеры могут рассылать вирусы. В рассылках мы также не пользуемся CSS-анимацией.

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

Не рекомендуется использовать и полный URL ссылки в тексте. Оформите её в гиперссылку или добавьте к картинке.

А что точно можно использовать

1. Картинки в форматах JPEG, PNG, BMP.

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

Изображение можно сжать в Photoshop или в специально созданных для этого сервисах (tinypng, iloveimg). А можно использовать и оба варианта. Картинка будет быстро подгружаться и не потеряет в качестве.

2. Безопасные шрифты.

Arial, Courier, Courier New, Georgia, Tahoma, Times New Roman, Verdana.

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

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

3. Gif-изображения — отличный элемент для имейл-рассылки. Они живо иллюстрируют вашу идею, делают письмо динамичным и привлекают внимание. Гифку можно использовать в качестве картинки или в качестве фона. Вес gif-изображения, точно так же, как и обычную картинку, рекомендуется уменьшить.

Самое важное про дизайн и вёрстку писем

  1. Классическая структура письма: прехедер, шапка, тело и футер.
  2. Ширина письма — не более 600 пикселей.
  3. Письмо верстается таблицей и строится модулями.
  4. Не используйте в письма JavaScript, Flash-анимацию, укороченные ссылки и редирект.
  5. Не создавайте письма, состоящие полностью из изображений.
  6. Уменьшайте вес изображений.
  7. Если вы хорошо знаете языки программирования, то лучше создать письмо вручную.
  8. Для экономии времени и несложных макетов собирайте письмо из готового шаблона.

Заключение

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

Экспериментируйте, тестируйте гипотезы и улучшайте свои рассылки.

Автор текста: Варвара Графова