Использование таблиц HTML для верстки шаблонов

           

Напомню, что в SendExpert, для вашего удобства, созданы шаблоны, которыми вы может воспользоваться для создания рассылки. Так же вы можете создать свою рассылку в программе Word, и просто загрузить ее в систему. Но если вы предпочитаете именно HTML верстку, то эта статья для вас

Первым шагом на пути к созданию HTML-версии письма является выбор шаблона — для новостных рассылок лучше всего работают одноколоночный и двухколоночный шаблоны, поскольку они помогают свести к минимуму хаос, который часто возникает при попытке запихнуть в такой маленький «контейнер», как email, большой объём информации. Письма, сверстанные в одну колонку также лучше отображаются на смартфонах и планшетах.

Одноколоночный шаблон, как правило, состоит из:

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

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

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

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

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

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

Вот какой подход можно использовать при создании HTML-писем:

Для двухколоночных шаблонов создается одна таблица для заголовка, вторая — для центральных столбцов с контентом и третья — для футера. Эти таблицы «оборачиваются» в еще одну общую таблицу («контейнер»). Этот же подход можно использовать для одноколоночных шаблонов, просто таблица с контентом должна состоять из одного столбца. Этот подход особенно хорош, если письмо содержит множество изображений, разбитых по разным ячейкам. Простая таблица со строками для заголовка (с colspan=»2» в случае двухколоночного дизайна), контента и футера будет хорошо отображаться на всем почтовом софте (кроме Lotus Notes).
Внутри таблиц и тегов можно использовать атрибуты, помогающие контролировать отображение таблицы. К примеру, установка border=«0», valign=«top», align=«left» (или center, если это будет хорошо выглядеть в конкретном варианте оформления), cellpadding=«0», cellspacing=«0» и т.д. Главным образом это помогает старым почтовым программам отображать письмо в более или менее приемлемом виде.
Даже если дизайн письма не предполагает отображение границы таблицы, во время разработки бывает полезно установить величину border=»1» — это помогает при отладке и поиске проблем, которые могут возникнуть с выравниванием контента внутри тегов и . При запуске рассылки в «продакшн», границу можно установить обратно на border=»0».

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

---

Теги: SendExpert шаблоны HTML таблицы