Несмотря на прекрасный онлайн-редактор, который мы последовательно улучшаем и дополняем на ДашаМейл, некоторые наши клиенты предпочитают использовать собственные html-макеты. Иногда это связано с жесткими правилами бренд-бука, иногда – с наследством, оставшимся от предыдущих маркетологов.
В любом случае, это право мы уважаем и стараемся помогать нашим клиентам делать email-рассылки адаптивными и прекрасно выглядящими в различных почтовых клиентах и браузерах. Ведь, как известно, существует множество почтовых клиентов и программ:
десктопные программы (Outlook, Mail, Mozilla Thunderbird и даже Bat)
мобильные почтовые клиенты (Iphone, Ipad, различные версии Android итд)
К большому сожалению, разработчики всех этих приложений действовали в разнобой в лучших традициях умножения стандартов.
Часть из этих клиентов поддерживает CSS3, часть – нет, какие-то аттрибуты и стили поддерживаются мобильными клиентами и не поддерживаются десктопными. Более того, поддержка HTML и CSS может скакать от версии к версии вроде бы одной и той же программы. Веб-версии иногда просто обрезают код или добавляют свой собственный.
Для того, чтобы минимизировать последствия этой вакханалии мы выработали 5 правил, которыми следует руководствоваться при верстке собственного html-макета.
1. Верстка таблицами
Если вы хотите простого и надежного решения, то таблицы – это самый очевидный выбор. Он однозначно убережет вас от проблем со старыми почтовыми клиентами. Не стоит забывать и о браузерах, которыми открывают веб-версии почтовиков, некоторые из них могут оказаться IE7 или даже, боже упаси, IE6.
2. Проверять универсальность поддержки аттрибутов у HTML-тегов и CSS-свойств
Мы подготовили специальную таблицу, которая позволит вам быстро и просто проверять поддержку различных аттрибутов и свойств в 10-ти самых популярных почтовых клиентах. Если вы не уверены в чем-то, то не стесняйтесь, загляните в нее и проверьте свои предположении о корректности вашей верстки.
3. Забудьте про блочные CSS
Использование CSS рекомендуется строго inline. Конечно, это может вызывать мучения при ручном формировании html-кода, поэтому ДашаМейл предлагает использовать данный инструмент автоматически – сразу после загрузки html-кода на 2-м шаге создания рассылки.
4. Ширина письма в 600 пикселей
Многие десктопные почтовые клиенты имеют максимальную область просмотра письма примерно равную 600px, что позволяет нам вместить письмо, оставив небольшие поля. 600 также кратно 1-2-3-4-5-6, что позволит вам реализовать нормальную адаптивную мультиколоночную структуру без использования “говна и палок”. Если 600 разделить на 9, то получится дофига шестерок. Это, в принципе, никак не применимо, но просто прикольно. В общем, как говорится, “не рефлексируйте – распространяйте”.
5. Media-query не очень круто.
Поддержка media queries в большинстве почтовых клиентов ограничена, например, она тупо отключена в почтовых клиентах Gmail, как в браузере, так и в мобильных приложениях. Достигнуть адаптивности без использования этого компонента CSS можно, хоть и немного заморочено. Но я верю в вас, мои юные падаваны.
Использование этих 5-ти правил позволит вам создать корректный html-код, универсально отображаемый во всех почтовых клиентах и браузерах, а это значит, что все ваши подписчики будут испытывать глубочайшее удовлетворения от ее созерцания у себя в почтовом ящике.
Да будет так! С любовью, Даша.
Часть из этих клиентов поддерживает CSS3, часть – нет, какие-то аттрибуты и стили поддерживаются мобильными клиентами и не поддерживаются десктопными. Более того, поддержка HTML и CSS может скакать от версии к версии вроде бы одной и той же программы. Веб-версии иногда просто обрезают код или добавляют свой собственный.
Для того, чтобы минимизировать последствия этой вакханалии мы выработали 5 правил, которыми следует руководствоваться при верстке собственного html-макета.
Загрузка...