Рекомендации по адаптивной верстке рассылок

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

Преднастроенные блоки контента в Creatio по умолчанию адаптивны. В данной статье описаны нюансы, влияющие на корректность отображения у получателя email-сообщений, созданных из пользовательских блоков контента или импортированных в Creatio при помощи элемента HTML.

Основные принципы адаптивной верстки 

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

• Верстка шаблонов email-сообщений производится на основе таблиц. Многие свойства HTML и CSS, которые применяются для верстки сайтов (в том числе, адаптивной), в письмах не работают. В Creatio табличная верстка реализуется при помощи элемента контента “Блок“.
• Рекомендуется создавать шаблоны шириной не более 700 пикселей, так как многие почтовые клиенты ограничивают ширину письма, и у получателя может отобразиться горизонтальная полоса прокрутки.
• В тексте писем рекомендуется использовать стандартные шрифты. Во-первых, они легко читаются при любом разрешении экрана. Во-вторых, если вы использовали нестандартный шрифт, которого нет у получателя, то почтовый клиент автоматически преобразует его в один из стандартных шрифтов, из-за чего может деформироваться верстка.
• Если у вас возникла необходимость использовать заголовки, набранные нестандартными шрифтами, то рекомендуется вставлять их в письмо в виде изображения и дублировать альтернативным текстом для тех случаев, когда почтовый клиент получателя по умолчанию не загружает картинки.
• Текст письма стоит делать не меньше 12–13 пикселей, чтобы получателю не приходилось напрягать зрение. Также некоторые почтовые клиенты мобильных устройств могут автоматически увеличивать шрифт, если в оригинале он меньше 12 пикселей, из-за чего может деформироваться верстка.
• Эффективно используйте пространство экрана: самая важная информация, в том числе кнопки призыва к действию, должна располагаться в верхней части письма, таким образом, чтобы полностью помещаться на экране как компьютера, так и мобильного устройства, без задействования полосы прокрутки.
• Придерживайтесь минималистичного дизайна. Шаблоны, в которых используются 2–3 основных цвета и небольшое количество картинок, быстрее загружаются и лучше адаптируются для мобильных устройств.
• Не рекомендуется использовать фоновые изображения в шаблонах. Они увеличивают время загрузки и могут не отображаться в некоторых почтовых клиентах. Если вы все же используете такое изображение, то добавьте к нему цветной фон, на котором будет хорошо читаться текст, если изображение не загрузится.
• Используйте крупные кнопки, чтобы получателю было удобно ими пользоваться, особенно с мобильных устройств. Рекомендуемый размер кнопки не меньше 44х44 пикселей.

Особенности верстки для пользователей Microsoft Outlook 

Отправляя email клиентам — пользователям Microsoft Outlook, необходимо учитывать, что при просмотре письма в Microsoft Outlook некоторые элементы могут отображаться иначе, чем в предпросмотре шаблона в браузере. Например, у кнопок не отобразятся скругленные углы. Также, в целях безопасности Microsoft Outlook по умолчанию блокирует загрузку изображений в электронных письмах.

Для корректного отображения в Microsoft Outlook стилей, настроенных в шаблоне письма, необходимо в HTML-код для каждой ячейки таблицы добавлять комментарии, определяющие стили для Microsoft Outlook. Например, для подписи сотрудника комментарии для Microsoft Outlook будут выглядеть следующим образом:

<tr>
         <td valign="top" style="vertical-align: middle;"><!--[if (gte mso 9)|(IE)]>

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="vertical-align:top;">

<tr>

<td width="300" valign="top" style="vertical-align: middle; margin: 0; padding:0;">

<![endif]-->
            
            <div style="display: inline-block; vertical-align: middle;max-width: 300px; width:100%; margin: 0; padding:0;">
            
         

Рис. 1 — Пример подписи отправителя в Microsoft Outlook

Блоки контента, также как и все элементы дизайнера контента, которые используются в Creatio, уже оптимизированы для корректного отображения в Microsoft Outlook.

Настройки скругления углов для кнопок призыва к действию будут проигнорированы Microsoft Outlook, и кнопка отобразится с острыми углами, как если бы в поле [Скругление углов, px] было установлено значение “0”.

Рис. 2 — Отображение кнопки в Creatio

Рис. 3 — Отображение кнопки в Microsoft Outlook

Особенности верстки для пользователей мобильных устройств 

Для адаптации пользовательских шаблонов email-сообщений к отображению на мобильных устройствах приняты следующие виды верстки:

• Одноколоночная верстка. Если при верстке шаблона вы не используете колонки в элементе “Блок”, то он будет отображаться одинаково на компьютере и на мобильных устройствах. Обратите внимание, что в большей части блоков контента, содержащихся в библиотеке дизайнера, используется многоколоночная верстка.
• Многоколоночная верстка также известна как верстка в модульной сетке. В этом случае содержимое письма разделяется на несколько колонок и перегруппировывается для отображения на мобильном устройстве.

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

Рис. 4 — Пример верстки для мобильных устройств

Одноколоночная верстка 

Для такого типа верстки рекомендуем использовать шаблоны, состоящие из одной колонки шириной не более 600–700 пикселей. В противном случае сообщение может отображаться некорректно. Например, части таблиц и изображений могут превышать размер экрана мобильного устройства получателя письма, а шрифт уменьшится или увеличится, усложнив восприятие текста, как на рисунке ниже.

Рис. 5 — Пример неадаптивной верстки

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

Рис. 6 — Пример адаптивной верстки в Creatio

Обратите внимание, что предварительный просмотр созданного сообщения в дизайнере контента не гарантирует полного соответствия тому, что отобразится в почтовом сервисе получателя. Это связано с настройками и условиями работы разных почтовых клиентов.

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

Многоколоночная верстка 

Для маркетинговых рассылок чаще рекомендуется использовать многоколоночную верстку. Она подходит для шаблонов, в которых используется разный контент: тексты, изображения, кнопки, HTML-элементы. В многоколоночной верстке рекомендуется использовать 2–4 столбца. Такая структура удобна для адаптации под мобильные устройства — элементы контента перестраиваются в одну колонку, например, как на рисунке ниже.

Рис. 7 — Пример отображения многоколоночной верстки на мобильном устройстве

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