Как правильно верстать почтовые рассылки
Essence: рассылки верстаются таблицами, максимально просто и без изысков. Поменьше фоновых картинок, inline-стили, и всё с вашей рассылкой будет в порядке.
Когда я только пришёл в Иннову, мне приходилось верстать почтовые рассылки для наших многочисленных игр. До этого я опасался вёрстки под почтовые клиенты, но оказалось, ничего страшного в этом нет. Если верстать так, как верстали 10 лет назад.
Все наблюдения, описанные ниже, были проверены в веб-клиентах (Gmail, Mail.ru, Яндекс.Почта, Yahoo и Hotmail) и в десктопных программах (Outlook Express, Outlook 2010, The Bat!). На удивление, Outlook 2010 капризней, чем Express, и совершенно неудивительно, что Hotmail ведёт себя самым непотребным образом.
Раскладка
Письмо - это обычная страница с произвольным доктайпом. Почтовики вырезают всё, кроме body.
Основа раскладки: растянутая на 100% по ширине таблица с одним tr и одной ячейкой. Нужно обнулить cellpadding, cellspacing и border (атрибутами) и задать border-collapse:collapse; в инлайн-стиле.
Внутрь лейаутной таблицы вкладывается табличка, внутри которой находится само письмо.
Если нужно центрировать табличку, то удобней всего обернуть её в и задавать выключку влево там, где это нужно для текста.
Margin и padding работают, но не везде. Я не задавался целью провести доскональное тестирование. Будьте готовы к тому, что почтовик попробует добавить свои стили (особенно этим грешит Hotmail), поэтому делайте свои стили более специфичными. Вместо маргинов и паддингов я использовал распорки из прозрачной картинки с заданными width и height, но такая распорка видна при отключённых картинках (по умолчанию в любом почтовике).
Абсолютное позиционирование, флоаты, прочие штучки - всё это использовать нельзя.
Допустимые элементы
Я обычно использую только h1-h2, div, span, p и элементы таблицы. В принципе каких-то ограничений нет (кроме наверное HTML5-элементов), но у почтовиков свой взгляд на то, какие стили задавать семантичным элементам, поэтому вам придётся сражаться за специфичность. Нужно быть готовым к тому, что ваши стили могут быть бесцеремонно затёрты.
Font, о котором пишут в статьях, мне использовать не приходилось: прекрасно работает и задание свойств шрифта в онлайн-элементах.
Картинки, вставленные как img, никаких проблем не доставляют, надо только размеры задавать. Мейл.ру не загружает тяжёлые картинки. Например, 70 Кб для него уже перебор - лучше не использовать прогрессивный джипег :) Большие иллюстрации стоит резать на части, чтобы они загружались отдельно.
Стилизация
Отдельные от HTML таблицы стилей и тем более каскад использовать нельзя. Вся стилизация только в инлайн-стилях. Hotmail и Yahoo воспринимают таблицу стилей в head, но рассчитывать на это нельзя. Есть исключение: для Hotmail необходимы 2 правила в таблице стилей, иначе он не будет растягивать письмо на весь экран.
Фоновые цвета и картинки
Почти все рекомендуют отказаться от использования картинок и тем более фона. Не стоит воспринимать эти рекомендации слишком категорично. С картинками никаких проблем нет: их нужно класть на какой-нибудь не сильно лагающий публичный сервер.
Фоновый цвет надо задавать одновременно для body и лейаутной таблицы, а фоновую картинку - только для таблицы. Яндекс.Почта, например, игнорирует фон, заданный для одного только body (или вырезает его). Можно использовать повторяющиеся паттерны. Но всегда стоит быть готовым к тому, что ваш фон не отобразится (Outlook 2010 этим грешит), либо пользователь вообще не увидит никаких картинок, т.к. не обнаружит кнопку «показать картинки».
Если нужны фоновые картинки не только для всей страницы, то background-image нужно задавать внутренним ячейкам таблицы.
Почтовые клиенты
Gmail
Никаких аномалий не замечено.
Яндекс.Почта
Раскрашивает красным ссылки при наведении мышки, в остальном всё хорошо.
Mail.ru
Не загружает тяжёлые картинки, больше 50-70 Кб.
Outlook Express и Outlook 2010
Старый Express из Windows XP работает отлично, в нём движок от IE7, кажется. Outlook 2010 не загружает фоновые картинки.
Yahoo
Ничего особенного не заметил
Hotmail
С ним больше всего проблем.
Когда я только пришёл в Иннову, мне приходилось верстать почтовые рассылки для наших многочисленных игр. До этого я опасался вёрстки под почтовые клиенты, но оказалось, ничего страшного в этом нет. Если верстать так, как верстали 10 лет назад.
Все наблюдения, описанные ниже, были проверены в веб-клиентах (Gmail, Mail.ru, Яндекс.Почта, Yahoo и Hotmail) и в десктопных программах (Outlook Express, Outlook 2010, The Bat!). На удивление, Outlook 2010 капризней, чем Express, и совершенно неудивительно, что Hotmail ведёт себя самым непотребным образом.
Раскладка
Письмо - это обычная страница с произвольным доктайпом. Почтовики вырезают всё, кроме body.
Основа раскладки: растянутая на 100% по ширине таблица с одним tr и одной ячейкой. Нужно обнулить cellpadding, cellspacing и border (атрибутами) и задать border-collapse:collapse; в инлайн-стиле.
Внутрь лейаутной таблицы вкладывается табличка, внутри которой находится само письмо.
Если нужно центрировать табличку, то удобней всего обернуть её в и задавать выключку влево там, где это нужно для текста.
Margin и padding работают, но не везде. Я не задавался целью провести доскональное тестирование. Будьте готовы к тому, что почтовик попробует добавить свои стили (особенно этим грешит Hotmail), поэтому делайте свои стили более специфичными. Вместо маргинов и паддингов я использовал распорки из прозрачной картинки с заданными width и height, но такая распорка видна при отключённых картинках (по умолчанию в любом почтовике).
Абсолютное позиционирование, флоаты, прочие штучки - всё это использовать нельзя.
Допустимые элементы
Я обычно использую только h1-h2, div, span, p и элементы таблицы. В принципе каких-то ограничений нет (кроме наверное HTML5-элементов), но у почтовиков свой взгляд на то, какие стили задавать семантичным элементам, поэтому вам придётся сражаться за специфичность. Нужно быть готовым к тому, что ваши стили могут быть бесцеремонно затёрты.
Font, о котором пишут в статьях, мне использовать не приходилось: прекрасно работает и задание свойств шрифта в онлайн-элементах.
Картинки, вставленные как img, никаких проблем не доставляют, надо только размеры задавать. Мейл.ру не загружает тяжёлые картинки. Например, 70 Кб для него уже перебор - лучше не использовать прогрессивный джипег :) Большие иллюстрации стоит резать на части, чтобы они загружались отдельно.
Стилизация
Отдельные от HTML таблицы стилей и тем более каскад использовать нельзя. Вся стилизация только в инлайн-стилях. Hotmail и Yahoo воспринимают таблицу стилей в head, но рассчитывать на это нельзя. Есть исключение: для Hotmail необходимы 2 правила в таблице стилей, иначе он не будет растягивать письмо на весь экран.
Фоновые цвета и картинки
Почти все рекомендуют отказаться от использования картинок и тем более фона. Не стоит воспринимать эти рекомендации слишком категорично. С картинками никаких проблем нет: их нужно класть на какой-нибудь не сильно лагающий публичный сервер.
Фоновый цвет надо задавать одновременно для body и лейаутной таблицы, а фоновую картинку - только для таблицы. Яндекс.Почта, например, игнорирует фон, заданный для одного только body (или вырезает его). Можно использовать повторяющиеся паттерны. Но всегда стоит быть готовым к тому, что ваш фон не отобразится (Outlook 2010 этим грешит), либо пользователь вообще не увидит никаких картинок, т.к. не обнаружит кнопку «показать картинки».
Если нужны фоновые картинки не только для всей страницы, то background-image нужно задавать внутренним ячейкам таблицы.
Почтовые клиенты
Gmail
Никаких аномалий не замечено.
Яндекс.Почта
Раскрашивает красным ссылки при наведении мышки, в остальном всё хорошо.
Mail.ru
Не загружает тяжёлые картинки, больше 50-70 Кб.
Outlook Express и Outlook 2010
Старый Express из Windows XP работает отлично, в нём движок от IE7, кажется. Outlook 2010 не загружает фоновые картинки.
Yahoo
Ничего особенного не заметил
Hotmail
С ним больше всего проблем.
- Чтобы растянуть body письма на весь экран, надо задать width:100% классам .ReadMsgBody и .ExternalClass в head. Обязательно сделать это 2 правилами, иначе не сработает.
- Не факт, но записано в старых конспектах: body почему-то не растягивается без правила body { margin: 0; padding: 0; }
- Хотмейл добавляет свои маргины. Например, правило margin: 10px 0; для абзаца будет перезаписано. Но если задавать отдельной каждый из маргинов, эту фигню можно победить.
- Не показываются фоновые картинки.