Правила верстки email-рассылки

Несмотря на прекрасный онлайн-редактор, который мы последовательно улучшаем и дополняем на DashaMail, некоторые наши клиенты предпочитают использовать собственные html-макеты. Иногда это связано с жесткими правилами бренд-бука, иногда – с наследством, оставшимся от предыдущих маркетологов. Мы, безусловно, уважаем это право и прилагаем усилия, чтобы помочь клиентам обеспечить корректное отображение адаптивных email‑рассылок в разных почтовых клиентах и браузерах. Ведь, как известно, существует множество почтовых клиентов и программ, а верстка email писем требует учета особенностей каждого из них:

веб-версии почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.);
десктопные программа и приложения (Outlook, Mail, Mozilla Thunderbird и даже Bat);
мобильные почтовые сервисы (Iphone, Ipad, различные версии Android итд.).

К большому сожалению, разработчики всех этих приложений действовали вразнобой в лучших традициях умножения стандартов. Часть из этих клиентов поддерживает CSS3, часть – нет, какие-то атрибуты и стили поддерживаются мобильными клиентами и не поддерживаются десктопными. Более того, поддержка HTML и CSS может скакать от версии к версии вроде бы одной и той же программы. Веб-версии иногда просто обрезают код или добавляют свой собственный. Для того, чтобы минимизировать последствия этого разнобоя, мы выработали 5 правил, которыми следует руководствоваться при верстке email-рассылок и создании собственного html-макета.

1. Верстка таблицами

Если вы хотите простого и надежного решения, то таблицы – это самый очевидный выбор. Он однозначно убережет вас от проблем со старыми почтовыми клиентами. Не стоит забывать и о браузерах, которыми открывают веб-версии почтовиков, некоторые из них могут оказаться IE7 или даже, боже упаси, IE6. Именно поэтому табличная верстка рассылок до сих пор остается актуальным подходом. Преимущества табличной верстки для email-рассылок:

стабильное отображение в большинстве почтовых клиентов;
минимальное количество ошибок при адаптации;
простая структура для редактирования;
хорошая совместимость со старыми версиями Outlook и браузеров;
удобство при создании многоколоночных писем.

2. Проверять универсальность поддержки атрибутов у HTML-тегов и CSS-свойств

Мы подготовили специальную таблицу, которая позволит вам быстро и просто проверять поддержку различных атрибутов и свойств в 10-ти самых популярных почтовых клиентах. Если вы не уверены в чем-то, то не стесняйтесь, загляните в нее и проверьте свои предположении о корректности вашей верстки. Это особенно важно, если вы только изучаете, как сверстать письмо корректно для всех устройств и клиентов.

3. Забудьте про блочные CSS

Использование CSS рекомендуется строго inline. Конечно, это может вызывать мучения при ручном формировании html-кода, поэтому DashaMail предлагает использовать данный инструмент автоматически – сразу после загрузки html-кода на 2-м шаге создания рассылки. Такой подход значительно упрощает верстку email писем и помогает избежать множества ошибок. А еще это можно сделать бесплатно, используя встроенные возможности сервиса.

4. Ширина письма в 600 пикселей

Многие десктопные почтовые клиенты имеют максимальную область просмотра письма примерно равную 600px, что позволяет нам поместить письмо, оставив небольшие поля. 600 также кратно 1-2-3-4-5-6, что позволит вам реализовать нормальную адаптивную мультиколоночную структуру. Такой подход особенно полезен тем, кто ищет, как сверстать письмо с удобной адаптивной структурой.

5. Media-query не очень круто

Поддержка media queries в большинстве почтовых клиентов ограничена, например, она отключена в почтовых клиентах Gmail, как в браузере, так и в мобильных приложениях. Достигнуть адаптивности без использования этого компонента CSS можно, но непросто.

Что поможет сделать адаптивное письмо без media queries:

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

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