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

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

10 минут на чтение
2208
0

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

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

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

Ряд параметров письма зависит от почтовых клиентов: отображение шрифта, вертикальное выравнивание элементов, подчёркивание ссылок. Для 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-изображения — отличный элемент для email-рассылки. Они живо иллюстрируют вашу идею, делают письмо динамичным и привлекают внимание. Гифку можно использовать в качестве картинки или в качестве фона. Вес gif-изображения точно так же, как и обычную картинку, рекомендуется уменьшить.

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

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

Заключение

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

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

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


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

ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку