Почтовые программы Outlook, TheBat!, Thunderbird и др., а также онлайн-сервисы Mail.ru, Яндекс.Почта, Gmail и т. д. по-разному отобразят одно и то же сообщение, поскольку различным образом обрабатывают HTML-разметку и CSS-стили.
Для того чтобы свести к минимуму различия в отображении сообщений для ваших получателей, необходимо придерживаться определенных правил при составлении текста рассылки.
Конечно, эти рекомендации относятся только к случаям, когда вы формируете текст email-сообщения с использованием HTML. На отображение простых текстовых сообщений вы повлиять не сможете, однако выразительность таких сообщений ниже, чем у тех, где используется HTML-форматирование.
Таблицы вместо блоков
Для формирования структуры страницы лучше использовать таблицы. Если вы привыкли верстать блоками с помощью тегов <div>, лучше отказаться от такого подхода ввиду неполной поддержки блочных элементов почтовыми клиентами.
Для задания фона стоит использовать таблицу с шириной 100%, указанием цвета фона и выравниванием по центру, в которую можно вложить другую таблицу с основным содержимым письма.
Избегайте слишком большого уровня вложенности таблиц, т. к. структура письма может быть искажена почтовыми программами.
HTML-теги
Не используйте теги для вставки видео- или аудио-содержимого, а также JavaScript — почтовые клиенты обычно игнорируют такое содержимое.
Изображения
Для всех изображений желательно указать атрибут alt с альтернативным текстом. Многие почтовые клиенты по умолчанию не показывают встроенные в текст изображения, позволяя получателю при желании включить их отображение. Даже при отключенных картинках получатель, благодаря заполненным атрибутам <code>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-письма, выбирайте простой — в этом случае шансы некорректного отображения минимальны.
Проверяйте сообщения перед рассылкой
После составления письма проверьте его отображение в основных браузерах и в наиболее часто используемых почтовых клиентах, прежде чем отправить адресатам. Для этого используйте функцию тестовой отправки в приложении «Рассылки».
0 комментариев
No comments yet.