[Перевод] How-to: Правила вёрстки email-писем
Электронная почта — отличный инструмент коммуникации, который позволяет компаниям доставлять аудитории контент удобным для нее способом. При этом читать письма в формате plain text не всегда удобно, поэтому в современных новостных рассылках используются различные графические элементы.
Вёрстка HTML для электронной почты — интересная и довольно сложная задача. Письма должны одинаково хорошо отображаться на старых устройствах и версиях программных клиентов.
В сегодняшней статье мы поговорим о том, как создавать email-письма, которые хорошо выглядят на любых устройствах, а также рассмотрим способы адаптации HTML-кода уже существующих рассылок для их отображения на телефонах и планшетах.
Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.
Основы HTML для электронной почтыГлавной проблемой при вёрстке email-писем является тот факт, что существует огромное количество софта для чтения подобных сообщений — от десктоп-продуктов вроде Eudora Outlook, AOL, Thunderbird и Lotus Notes до веб-сервисов вроде Yahoo!, Gmail, Mail.ru и до мобильных почтовых приложений.От того, как программное обеспечение используется каждым из таких инструментов для рендеринга HTML и будет зависеть, какой HTML и СSS-код будет работать, а какой нет.
Обеспечить кроссбраузерное отображение веб-сайта — непростое дело, но когда речь идет о email, все еще сложнее. Каждая из существующих программ для работы с почтой может отобразить одно и то же письмо совершенно по-разному. И даже если добиться более менее одинакового отображения в разных клиентских программах, то радоваться рано, ведь то, как письмо будет в конечном итоге выглядеть, зависит еще и от ширины экрана пользователя.
Если вы собираетесь верстать письма вручную или использовать готовый шаблон, стоит придерживаться двух основных правил создания HTML для электронной почты:
Необходимо использовать таблицы HTML для большего контроля над шаблоном письма. Даже если вы привыкли полагаться на CSS в вебе — не переносите эту привычку в мир email, потому что это не сработает при том разнообразии клиентского софта. Используйте встроенный CSS (inline) для получения большего контроля над другими элементами письма (шрифты, цвет фона и т.п.) — вот отличная версия CSS Inliner от «Печкина». Самый простой способ увидеть, как HTML-таблицы и встроенный CSS могут использоваться в шаблонах email-писем — это скачать некоторые такие шаблоны с сайтов компаний Campaign Monitor и MailChimp (прим. пер: вот здесь собраны примеры дизайна email-рассылок клиентов сервиса Pechkin-mail).При изучении этих шаблонов будут заметны несколько вещей, которые мы подробнее обсудим далее:
Объявления стилей CSS располагаются после тега
, а не между тегов ; Не используются сокращения CSS: вместо сокращенного правила для стиля font: 12 px/16 px Arial, Helvetica, следует создать отдельные сущности для каждого шрифта, с прописыванием им значений font-family, font-size и line-height; span и div используются редко и для реализации конкретных эффектов, основную же работу по описыванию шаблона письма берут на себя таблицы HTML; Стили CSS также используются на базовом уровне, без применения каких-либо CSS-файлов. Шаг 1: Использование таблиц HTML для верстки шаблонов Да, таблицы вернулись. Да, веб уже далеко ушел вперед, но мы-то не в вебе! Из всего многоорбазия email-клиентов найти такой, который бы обладал широкой и качественно поддержкой CSS — та еще задача. Это значит, что мы просто вынуждены использовать таблицы, если хотим, чтобы создаваемые письма рассылок консистентно отображались у каждого читателя.Так что придется отложить в сторону лучшие практики соответствия веб-стандартам и засучить рукава, разбираясь в вёрстке.Первым шагом на пути к созданию HTML-версии письма является выбор шаблона — для новостных рассылок лучше всего работают одноколоночный и двухколоночный шаблоны, поскольку они помогают свести к минимуму хаос, который часто возникает при попытке запихнуть в такой маленький «контейнер», как email, большой объём информации. Письма, сверстанные в одну колонку также лучше отображаются на смартфонах и планшетах.
Одноколоночный шаблон, как правило, состоит из:
Заголовка, содержащего логотип и какое-то количество навигационных ссылок на родительский сайт — с целью брендинга и ознакомления читателей письма с дизайном самого сайта. Внутренних ссылок, которые ведут на какие-то участки конкретно этого письма. Подвал (футер) в нижней части email-сообщения, который чаще всего содержат ссылки, дублирующие навигацию из заголовка плюс инструкции по тому, как отписаться от рассылки. В двухколоночных письмах также есть заголовок и футер. Как и в случае двухколоночной веб-страницы, в подобных сообщениях одна колонка узкой — в ней помещаются ссылки для получения дополнительной информации и прочие навигационные элементы, а второй, более широкий столбец, содержит, собственно, контент сообщения. Чтобы заставить такие письма хорошо отображаться на смартфонах и планшетах приходится приложить немало усилий по вёрстке.Сообщения, в которых продвигаются товары или услуги, создаются по похожей схеме, но содержат меньше контента, чем информационные письма. Часто они включают одно два ключевых предложения и иногда содержат большую картинку, на которой расположен поясняющий текст и несколько ссылок под изображением.
Все вышеописанные свойства могут быть закодированы с помощью HTML таблицами, благодаря которым осуществляется разделение пространства на столбцы и строки. Только с помощью табличной вёрстки можно создать шаблоны, которые будут качественно отображаться на любых устройствах и в любых почтовых программах.
Вне зависимости от предполагаемого дизайна письма, необходимо помнить о том, что самую важную информацию следует размещать как можно ближе к его верхней части — это позволит пользователю сразу ее увидеть, после открытия сообщения. Верхний левый угол письма — первая точка, куда смотрит читатель.
Вот какой подход можно использовать при создании HTML-писем:
Для двухколоночных шаблонов создается одна таблица для заголовка, вторая — для центральных столбцов с контентом и третья — для футера. Эти таблицы «оборачиваются» в еще одну общую таблицу («контейнер»). Этот же подход можно использовать для одноколоночных шаблонов, просто таблица с контентом должна состоять из одного столбца. Этот подход особенно хорош, если письмо содержит множество изображений, разбитых по разным ячейкам. Простая таблица со строками
Шаг 2: Добавляем стили CSS Выше мы говорили о том, что многие email-клиенты не сильны в поддержке CSS. Однако это не значит, что вы не должны использовать стили в своих письмах, сверстанных с помощью таблиц. Нужно лишь учитывать несколько моментов.Прежде всего, следует использовать встроенные стили, чтобы хранить в них всю нужную информацию, как показано ниже:
Таким же образом можно использовать
| , |