Рассылка html писем - правила вёрстки

Рассылка html писем - правила вёрстки

Добрый день, дорогие друзья, сегодня мы рассмотрим основные правила верстки html писем.

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

Содержание статьи:

Начало начал

Если хотите добиться хорошего результата, верстайте так, как вы верстали в 1998 году. Заменяйте большинство CSS-стилей html-атрибутами. Например, вместо style="width: 190px" ставьте width="190" и так далее. Почтовики - это не браузеры, они много чего не понимают и много чего боятся.

Если вам необходим CSS-код, поместите его в HTML с помощью атрибута style="style: somestyle;". Помните: если вы попытаетесь прикрепить к письму файл CSS, вас поймёт только mail.ru, остальные просто проигнорируют стили.

Как вы уже поняли, прикреплять JavaScript-файлы или пытаться подключить их другим способом - бесполезно.

По возможности избегайте дивов, используйте только таблицы. Особенно для вёрстки каркаса вашей html рассылки. При этом не забудьте указать ширину ячеек. Например width="300".

Изображения и ссылки

Изображения лучше прикреплять к письму. Если вы указываете адрес изображения с вашего сервера, надо сверстать так, чтобы и без него было нормально. Ведь такое изображение почтовый клиент может не отобразить. Не будет лишним указать высоту и ширину изображения, а также alt и title.

Если вы используете ссылки, их надо помещать внутрь тэгов span, причём, лучше указывать одинаковые стили для ссылок и для объемлющих элементов span.

Ну и конечно нужно проверить рассылку html писем всеми почтовиками и всеми браузерами, которые вам доступны. Заведите кругом ящики, и вперёд… раз, да ещё раз, да ещё много-много раз.

Поведение почтовиков при html рассылке

На первом месте по вменяемости твёрдо стоит mail.ru. Эта почтовая система понимает практически любой html, а также присоединённые CSS-файлы. Кроме того, не возникает проблем с кодировкой.

Также неплохо справляется Yandex. Что касается Google mail, то он спрашивает, загружать ли картинки с внешнего сервера, и если пользователь отвечает “нет”, то письмо так и остаётся без картинок. Кстати, Gmail обводит ссылки-картинки синей рамкой, как в старые добрые времена. Но с этим легко бороться стилями.

Полной копией Google mail является bigmir.net. При рассылке html писем они ведут себя одинаково. А вот Rambler уже не так лоялен к html письмам. По умолчанию у него стоит настройка “не показывать изображения с внешних серверов”. Будет ли пользователь изменять эту настройку ради вашей рассылки - думаю, ответ очевиден: нет.

Заключение


В этой статье мы рассмотрели основные правила верстки html писем. Если статья была Вам полезна - делитесь ей с друзьями в социальных сетях.