,

Простое решение для создания адаптивного html шаблона письма

адаптивный шаблон письма

Если Вы предпочитаете использовать универсальный html шаблон письма, оптимизированный для просмотра на любых устройствах и интересуетесь различными вариантами адаптивной верстки, то этот материал может быть вам очень полезен.Наши коллеги из компании EmailonAcid поделились опытом создания адаптивных html рассылок, а мы с удовольствием хотели бы рассказать об этом вам!
Существует несколько подходов к адаптивному дизайну. Шаблон, предлагаемый вашему вниманию, содержит 3 возможных варианта адаптации макета для экранов различной ширины. По умолчанию он поддерживает 1-3 колонки и благодаря использованию соответствующего медиа-запроса, может отображать все содержимое в одной колонке – для чтения на мобильных устройствах.

Описание шаблона.
Специалисты EmailonAcid на основе проведенного исследования распространенных размеров экранов выделили 3 целевых категории разрешений экранов перед подготовкой макета:
1. 480 пкс и менее – у iPhone и смартфонов с небольшой шириной экрана
2. 481-640 пкс – у устройств среднего размера на платформе Android
3. 580 пкс – у планшетов, а также при отображении в почтовых онлайн-сервисах и основных почтовых клиентах.

Интересный факт, что максимально возможная ширина макета для устройств среднего размера на платформе Android больше, чем реальная ширина, которую будет иметь ваша рассылка при отображении во многих почтовых программах и онлайн-сервисах. По этой причине за базовую ширину макета была взята ширина 580 пкс. Эта ширина меньше, чем та, которая будет использована в медиа-запросе для устройств среднего размера.
13_09_13_Responsive_layout
Создание шаблона
1) Mедиа-запросы
Вот такой блок стилей был использован в шаблоне. Для экранов с шириной 480-640 пкс, задана ширина письма 440 пкс, а для экранов менее 480 пкс -280 пкс. Данные параметры прописаны как свойства body:

16_09_13_Adaptive1

2) Далее класс deviceWidth был присвоен всем необходимым таблицам и имиджам в макете, чтобы адаптировать ширину этих элементов под экран устройства.
3) «Плавающие» элементы
Следующий шаг – это создание «плавающих» элементов, которые свободно перетекают ниже на экранах мобильных устройств. Так как многие почтовые клиенты не поддерживают свойство “float”, единственное решение -поместить все «плавающие» элементы в таблицы и использовать атрибут align.Например,таблицу, содержащую картинку, выровнить по левому краю, а таблицу с текстом, ее описывающим – по правому ( см. рисунок):
16_09_13_Adaptive2
Для того чтобы в Outlook 2007, 2010, 2013 не было проблем с автоматическим добавлением лишних отступов между таблицами, рекомендуется:
1) Добавить в стили свойство border-collapse для таблиц:
16_09_13_Adaptive3
2) Обязательно прописать для основных (“неплавающих”) таблиц border, cellspacing, cellpadding, равный 0.
table border="0" cellpadding="0" cellspacing="0"
3) Для вложенных “плавающих” таблиц с атрибутом align:
1. Пропишите фон (bgcolor) для каждого td в выравниваемых таблицах, соответствующий вашему макету.
2. Добавьте рамку ( border) шириной 1 пкс для всех выравниваемых таблиц и уменьшите их ширину (width) на 2пкс
2. Оберните контент первого td в тег “p” и пропишите стиль: “mso-table-lspace:0;mso-table-rspace:0”
16_09_13_Adaptive_last
Скачать готовый html шаблон можно здесь. Для просмотра оригинала статьи перейдите по этой ссылке.
Если все-таки для оптимального отображения вы предпочитаете создавать различные версии письма для различных устройств, то обязательно познакомьтесь с возможностью создания мультиверсионных сообщений в Ofsys.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply