Почтовые программы Outlook, TheBat!, Thunderbird и др., а также онлайн-сервисы Mail.ru, Яндекс.Почта, Gmail и т. д. по-разному отобразят одно и то же сообщение, поскольку различным образом обрабатывают HTML-разметку и CSS-стили.
Для того чтобы свести к минимуму различия в отображении сообщений для ваших получателей, необходимо придерживаться определенных правил при составлении текста рассылки.
Таблицы вместо блоков
Для формирования структуры страницы лучше использовать таблицы. Если вы привыкли верстать блоками с помощью тегов <div>, придется отказаться от такого подхода ввиду некорректной поддержки блочных элементов почтовыми клиентами.
Для задания фона стоит использовать таблицу с шириной 100%, указанием цвета фона и выравниванием по центру, в которую необходимо вложить другую таблицу с основным содержимым письма.
Избегайте слишком большого уровня вложенности таблиц, т. к. структура письма может быть искажена почтовыми программами.
HTML-теги
Не используйте теги для вставки видео- или аудио-содержимого, а также JavaScript — почтовые клиенты обычно игнорируют такое содержимое.
Изображения
Для всех изображений желательно указать атрибут alt с альтернативным текстом. Многие почтовые клиенты по умолчанию не показывают встроенные в текст изображения, позволяя получателю при желании включить их отображение. Даже при отключенных картинках получатель, благодаря заполненным атрибутам alt, будет знать, что на них изображено.
Не стоит формировать письмо только из изображений — если в почтовом клиенте адресата по умолчанию отключен показ изображений, он может получить набор пустых рамок вместо красивого содержимого. Письмо должно быть читаемым при любых условиях — даже если получатель переключился в текстовый режим (text/plain).
Если вам необходимо добавить в сообщение большое изображение, а область его размещения ограничена по ширине, полезно указать для элемента img этого изображения CSS-правило max-width: 100%; — в этом случае изображение не будет выходить по ширине за границы основного содержимого письма.
Стили
Большинство почтовых программ удаляют подключаемые стили, подключенные с помощью тега <link>, и блоки стилей, заключенные внутри тегов <style></style>. Поэтому для правильного отображения письма используйте только inline-стили для HTML-тегов:
<p style="font-size:10pt; font-style:italic; color:#006699;">текст абзаца</p>
Не рекомендуется использовать сокращенные формы стилей:
border: solid 1px grey;
Для правильного отображения письма указывайте все свойства отдельно:
border-style:solid; border-width:1px; border-color:grey;
Поддержка CSS-свойств почтовыми клиентами ограничена по сравнению с современными интернет-браузерами, поэтому, чтобы письмо выглядело правильно у всех получателей, используйте только следующий набор широко поддерживаемых стилей:
background-color border-... color font-... letter-spacing line-height margin-... padding-... text-align text-decoration text-transform
Ссылки
Адреса ссылок должны быть абсолютными. При использовании относительных адресов ссылки окажутся нерабочими.
Текст ссылки не должен превышать 65 символов. Слишком длинный текст ссылки может не поместиться на одной строке, в результате чего ссылка окажется нерабочей.
Перенос слов
Проверьте, есть ли в вашем сообщении фрагменты текста, которые могут выглядеть невыгодно, если разные части или фрагменты слов в этих фрагментах окажутся перенесены на новую строку в почтовой программе клиента. Для отмены переноса на новую строку заключайте такие фрагменты в HTML-элементы с CSS-правилом white-space: nowrap;.
Предпочтения в выборе дизайна письма
Учтите, что многие получатели сначала увидят ваше сообщение в маленькой панели предварительного просмотра, прежде чем решить, стоит ли открывать письмо полностью. Проверьте, насколько верхняя левая часть письма позволяет читателю оценить необходимость его прочтения. Эта часть сообщения должна передавать основной смысл вашего послания и быть хорошо читаемой.
Если у вас есть возможность выбрать между простым и сложным дизайном HTML-письма, выбирайте простой — в этом случае шансы некорректного отображения минимальны.
Проверяйте сообщения перед рассылкой
После составления письма проверьте его отображение в основных браузерах и в наиболее часто используемых почтовых клиентах, прежде чем отправить адресатам.
2 комментария
admin@dixiteshop.ru
Чем дальше тем интереснее :(
Теперь техподдержка вообще посылает подальше, на форум!
А зачем тогда раздел "Запросы в техподдержку"?
А, ПОНЯТНО, теперь Вы конкретно занимаетесь сбором денег,
а не помощью пользователям.
Т.е. сменили техподдержку на бухгалтерию,
а название сменить, как всегда забыли.
Ваш стиль, ничего не доделывать до конца.
Чувствуется профессиональный подход:)