Пропустить навигацию

Использование CSS в HTML Email

27.12.2007 , ,

Отправка писем в HTML формате всегда было спорным вопросом. От себя могу только сказать, что если действительно письмо должно выглядеть достойно, имея оригинальный дизайн, то почему бы отформатировать его соответственно. Создать письма в формате HTML только потому, что все так делают, думаю не стоит. Если вы все-таки решили создать именно такое письмо, существует пять золотых правил создания писем в HTML формате.

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

Сначала Email затем дизайн

Напишите сначала письмо обычным текстом. Что это дает, во-первых, письмо которое можно прочитать, поскольку в любом случае вы должны предоставить текстовый эквивалент данного письма, во-вторых это облегчит дальнейший дизайн, создаст более четкую картину и понимание того, каким образом вы будете "разукрашивать". Отправка писем в формате HTML и plain-text одновременно называется Multipart/Alternative email format или MIME. Большинство почтовых программ поддерживают его.

Пара замечание по созданию plain-text email: Ограничьте длину строки до 60 символов и используйте только полные URL'ы.

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

Чтобы создать единый дизайн будет проще перечислить то, что делать нельзя.

Что нельзя делать

  • В секцию <head> нельзя вставлять таблицу стилей. Gmail и Hotmail Точно не поддерживают.
  • Добавлять ссылку на внешнюю таблицу стилей. Не все клиенты поддерживают внешний стиль. О нем лучше забыть вообще.
  • Добавлять Background-image / Background-position. Gmail Не поддерживает.
  • Clear floats. Опять Gmail.
  • Задавать границы. В большей части CSS позиционирование не работает вообще.
  • Добавлять любые стили шрифтов. Есть вероятность того, что Eudora проигнорирует их.

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

Что можно делать

Можно использовать только inline стили, т.е. можно задать стиль непосредственно в тэгах.

<h3 style="color: #1c70db;">Заголовок</h3>
  • Можно использовать изображения
  • Можно и нужно использовать таблицы в дизайне.

Таблицы

Загляните в код любого HTML письма — большая часть из них создана с помощью таблиц. Таблицы это идеальный вариант создать дизайн письма, одинаково работающий во всех почтовых программах. Ширина окна для просмотра письма сильно отличается от программы к программе. Лучше всего создать таблицу с 100%-й шириной и выравниваем по центру, в которую вложить еще одну таблицу фиксированной ширины. Во внешней таблице существует возможность дополнительно задать цвет фона. Об использовании контейнеров (блоков) для центрирования с границами auto лучше забыть.

Инструменты

Если вам лень разбираться со стилями, существуют готовые инструменты по созданию email. Из бесплатных — это Premailer, онлайновый сервис, который из готовой HTML страницы создает письмо. Платный — MailChimp

Кроме этого в сети огромное количество ресурсов по данной тематике. Начать можно с данного материала Designing, Coding, and Delivering HTML Email: A Beginner's Survival Guide

Несколько полезных советов

  • Используйте только полные пути к изображениям (например, http://www.yourserver.com/email/images/logo.gif), не относительные
  • Перед рассылкой тысячи писем убедитесь, что ваш провайдер не заблокирует вашу рассылку
  • Тестируйте, тестируйте и еще раз тестируйте ваши письма в различных почтовых программах.
  • Ограничьте ширину письма до 600px. Идеально — это 440px
  • Добавляя стили, обязательно проверяйте полученный дизайн с отключенными стилями, при этом письмо должно выглядеть доступным, понятным и читаемым
  • Не создавайте письма, аналогичные рекламе виагры, просто не делайте спамодобные идиотские шутки.
  • Используйте футер по назначению, вкладывая в него всю вспомогательную информацию, как то телефоны, отписки, адреса и пр.
  • Всегда уважайте закон. Помните о существовании CAN-SPAM act, обязывающий соблюдать множество правил, занимаясь коммерческой email рассылкой. Вы обязаны указывать почтовый адрес в письмах и работающую ссылку на отписку.

Оригинал статьи

Статьи по теме:

  • Ensuring your HTML emails look great and get delivered
  • Email Standards Project
  • Web Standards in Email Clients
  • A Guide to CSS Support in Email

Комментарии

  1. Весьма полезно. Почитал с удовольствием.

    — Максим Покровский Dec 28, 12:06 PM #