Pull to refresh

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

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

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

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

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

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

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

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

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

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

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

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

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

Заголовок



* Можно использовать изображения
* Можно и нужно использовать таблицы в дизайне.

Таблицы

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

Инструменты

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

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

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

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

Оригинал статьи
Перевод
Tags:
Hubs:
+5
Comments 4
Comments Comments 4

Articles