Как правильно сделать вёрстку e-mail

504

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

В интернете существует очень много разных практик, которые показывают, как сверстать письмо так, чтобы клиент мог его открыть на любом устройстве, но очень много практик или не проверенных или же попросту не протестированных на всех возможных e-mail клиентах.

Есть несколько вещей, которые следует учитывать при разработке шаблона письма.

Письма должны быть максимальной ширины 600-800 пикселей. Это заставит их вести себя лучше в пределах области предварительного просмотра, предоставляемой многими e-mail клиентами.
Блочный (сеточный) дизайн. Используйте дизайн на основе сетки и избегайте сложных элементов. Для лучшей наглядности представляйте письмо в виде некой структуры, например:

Не создавайте письмо, которое по сути является одним большим, нарезанным изображением. Хотя эти виды писем выглядят красиво, они работают плохо.
Используйте базовые кросс-платформенные шрифты, такие как Arial, Verdana, Georgia и Times New Roman.
Избегайте элементов, требующих Flash или JavaScript. Если вам нужна анимация в письме, лучше всего использовать .gif.
Код всей структуры должен быть сделан при помощи тега <table>
Используйте атрибуты элементов (например, cellpadding, valign и width) для установки размеров таблицы.
Пишите ваш CSS простым стилем. Избегайте деклараций составного стиля (IE: «font: # 000 12px Arial, Helvetica, sans-serif;»), сокращенный код (IE: # 000 вместо # 000000), свойства макета CSS (IE: position, clear, visibility и т. д.), сложные селекторы (IE: потомок потомка, дочерние элементы и псевдоэлементы)
Используйте только абсолютные ссылки для изображений и размещайте эти изображения на надежном сервере.
Тест, тест, тест. Создавайте учетные записи электронной почты через различные службы и отправляйте электронные письма себе.

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

Scalable
Fluid
Responsive

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

Scalable (масштабируемый) email дизайн

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

Fluid email дизайн

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

Responsive email дизайн

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

Responsive схемы используют запросы CSS-мультимедиа (media css) для создания двух разных копий, которые зависят от размера экрана вашего пользователя. Медиа запросы автоматически настраивают макет, содержание и размер копии электронной почты на экране устройства пользователя. Однако стоит помнить, что данный подход, к сожалению, поддерживается не всеми клиентами. Вот таблица поддержки медиазапросов разных клиентов на разных устройствах:

Поддержка на мобильных устройствах

Поддержка на десктопных клиентах

Поддержка веб клиентов

Собрав воедино весь полученный опыт, можно сделать небольшие выводы касательно верстки e-mail писем:

Соблюдайте ширину макета (600-800 пикселей, лучше 600 даже)
Для верстки используйте таблицу (тег table)
Избегайте довольно сложных элементов дизайна (тени, размытие, текстовые эффекты)
Используйте читаемые шрифты
Не спешите за технологиями, дизайн в стиле responsive еще слабо поддерживается, лучше используйте fluid подход

Верстайте письма и делайте их уникальными!