Новый инструмент для e-mail маркетинга
118,06
рейтинг
11 июня 2013 в 14:43

Разработка → 5 правил верстки email-писем от Печкина


Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:
  • веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
  • десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
  • мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)


К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?

1. Табличная верстка.

Верстая олдскульными таблицами и забыв про блочную верстку, вы однозначно убережете себя от проблем со старыми почтовыми клиентами. Также, не стоит забывать, что веб-версии у почтовых провайдерах могут открываться в самых разнообразных браузерах, вполне возможно, даже в IE 6.0. Таблицы помогут вам быть аккуратными и красивыми везде одинаково.

2. Использовать универсально-поддерживаемые аттрибуты у HTML-тегов.



3. Использовать универсально-поддерживаемые CSS-свойства



4. Использование CSS строго Inline.

Забудьте про блочные css в начале документа. Только inline-стили. Конечно, это может вызвать геморрой при ручном приведении html-документа в порядок, но устранения подобных проблем Печкин предлагает автоматический CSS-inliner, в рамках проекта Печкин.Лаборатория. Этот инструмент также по-умолчанию стоит на 2-м шаге создания рассылок в нашем сервисе.

5. Желательно использовать ширину всего документа в 600px.

Задайте максимальную ширину в 600 пикселей и обезопасьте себя от гневных отзывов о горизонтальной прокрутке в почтовых клиентах ваших подписчиков.

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

В данном материале использованы сервисы Печкин.Лаборатории, в которой вы можете найти инструменты для автоматизации верстки, создания текстовых версий письма и других вещей, которые мы используем в сервисе email-маркетинга Печкин-mail.ru.
Автор: @dsosnin
Pechkin.com
рейтинг 118,06
Новый инструмент для e-mail маркетинга

Комментарии (24)

  • 0
    автоматический CSS-inliner


    Где взять консольный вариант?
    • 0
      Его нет. Доступа по API к внутренним сервисам Печкина мы не планируем. Для дизайнеров и верстальщиков достаточно и такого инструмента.
    • 0
      www.pelagodesign.com/sidecar/emogrifier/ как вариант, можно допилить под себя
  • +5
    6. Убедитесь что ваше письмо читается с отключенными картинками.
    Как минимум в Gmail отображение картинок в письме по-умолчания отключены
    • +1
      <img src="...base64ofPng...."> — но только небольшого размера, спасают от отключенных картинок в письмах
      • +1
        data-URI вырезаются, как минимум, в GMail. Работают content-id, указывающие на attachment (встраивал, используя PHPMailer).
    • 0
      о, про это можно написать целую статью. некоторые умельцы могут делать аналог ASCII-art так, что при отключенных картинках рассылка иногда смотрится даже лучше, чем при них.
  • 0
    Если озаботиться поддежкой всякого безобразия вроде Outlook XP или 2003, то придется верстать таблицами и вспомнить про spacer.gif. Хорошо, что есть онлайн-сервисы вроде Litmus, которые показывают, как ваше письмо будет выглядить в разных клиентах. Оно стоит каких-то денег, но обычно достаточно сделать нормальные шаблоны, а потом уже новые письма делать по ним. И дальше вполне достаточно проверять для верности в Outlook.com и не тратить денег. Там микрософтовцы постарались часть косяков своих десктоп-продуктов воспроизвести, за что им спасибо. Не знаю, насколько это было сложно, но наверняка не тривиально.
    • 0
      Litmus, PreviewMyEmail, есть много продуктов. Печкин на базе Litmus предоставляет сервис для всех платных тарифах посмотреть как выглядит ваша рассылка перед отправкой. Но, если честно, мы не рекомендуем извращаться и поддерживать все-все-все, это просто не стоит тех усилий, особенно с Outlook 2003.
      • 0
        Какие проблемы с 2003 аутлуком, которые тяжело решить? Нет, я серьезно.
        • 0
          Вот если бы сказали об Office 365, то тут — да. Проблемы есть, и не малые.
  • 0
    Вот по всем этим правилам сверстали заказчикам подпись совсем недавно.
    Но и это не уберегло.
    Нашёлся таки клиент, пользующейся какой-то своей веб-почтой с TinyMCE в качестве текстового редактора
    И этот TinyMCE взял и почистил стили, которые посчитал лишними и растянул таблицу на 100%

    Так что, на всякий случай, следует ещё обращать внимание на то как будет выглядеть подпись, если удалить css весь или частично
    Ну а про отключенные картинки, уже упомянули выше
    • 0
      Очевидно потому, что правила неправильные, вот и появляются проблемы. Не нужно юзать тег font. Меняем его на span, пишем инлайн стили и счастливы.
  • 0
    Прошу простить за нескромный вопрос, но скажите: дизайн вашего сайта точно не взят у Mailchimp с рядом своих корректив, в том числе и не самых лучших корректив (таких, как кнопка «Зарегистрироваться», перемещённая вверх и выглядящая по стилю иначе, чем меню сайта)? А то уж как-то слишком похоже.
    • +3
      Да, мы — клон Mailchimp.
      • 0
        За честность — спасибо! ;)
  • 0
    Для тех кому интересна эта тема не будет лишним также ознакомится с таблицей поддерживаемых стилей в 10 наиболие популярных емайл-клиентах — www.campaignmonitor.com/css/
  • 0
    Это очень здорово, что вы нарисовали пару табличек и разбавили это небольшим текстом. Но полезной информации, помимо того, что у вас есть инлайнер, я не вижу. Уже указали ссылку на кампейн монитор. В которой полезностей больше, чем в топике. Я понимаю, что нужно попиарить сервис, но доносите чуточку больше познавательного. На фоне этого топика, я уже написал over9000 правил, ничего не пиаря. Ну почти ничего.
    • 0
      Это наш корпоративный блог, поэтому и пиарим ;-)

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

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

Самое читаемое Разработка