Написание электронных HTML писем

29 июня 2011

Разработка HTML письма – один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.

Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет.

Для их создания необходимы навыки в вёрстке и определенный запас терпения.

В этой статье приведены некоторые методы и приемы, благодаря которым можно добиться хороших результатов.

Почтовые клиенты

При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб-интерфейс - Yahoo!, Hotmail, Google Mail и др.
Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры.

Дизайн

Разрабатывая дизайн электронного HTML письма, не забывайте о простоте.
Не слишком фантазируйте с дизайном писем. Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него.
Старайтесь уместить HTML письмо в ширину около 500-600px, ведь окошко просмотра содержимого E-mail у почтовиков меньше ширины окна, причем иногда сильно меньше.
Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
Создавайте письма вручную. Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные редакторы полны недостатков. Практически все из них вставляют лишний html код, который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.

Таблицы

Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб-страниц, но эти принципы плохо работают в почтовых клиентах. Используйте Cellpadding, cellspacing, colspan - все эти сложные вещи, о которых вы уже, наверное, забыли.
Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.

Об изображениях

Все изображения, присутствующие в письме, следует разместить на некотором хостинге и в коде добавить на них внешние ссылки. Также неплохо бы добавить ссылку на просмотр HTML письма непосредственно на вашем сайте в виде страницы, чтобы пользователь с любым почтовым ящиком при желании смог увидеть свёрстанные вами красоты.
Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.

Оформление текста

Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа  «font:»), так как результаты будут неоднозначными.

Cтили CSS

К HTML письмам не стоит прикреплять внешний CSS файл — он просто не будет прочтен. Весь CSS код должен быть включен в сам E-mail. Хотя в идеале лучше вообще обойтись без каскадных таблиц стилей, так как, опять же, разные почтовики имеют разный уровень их поддержки.
Если используете CSS: Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height. CSS-стили  — базовые.
Такой же прием нужно использовать и в тегах таблиц, ячеек, параграфов, ссылок и др.
Прописывайте основную информацию о стилях шрифта в теге ячейки <td> ближе к контенту. Это может привести к повторению стилей в других тегах <td>. Прописывайте стили в тегах заголовков (h1, h2), p или a, когда это необходимо.
В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.

Еще несколько советов:

1. Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.
2. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.
3. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.
4. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.
5. Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2007 не поддерживает атрибут alt.
6. Используйте атрибут target=»_blank» для ссылок, чтобы читатели, которые используют веб-интерфейс, не загружали страницу в том же окне, в которм открыта почта.
7. Попробуйте не использовать одно-пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо — спам.

Тестирование

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:
Outlook 2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird

Тестирование с помощью Mailchimp

Использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:
Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail.
Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol» campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.
На странице design выберите Import -> Paste in code, а затем отметьте пункт Automatic CSS Inliner.
Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.
Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

В заключении

Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты:
1. Правильно ли отображается отправитель письма – имя или почтовый адрес?
2. Корректна ли тема письма?
3. Корректна ли контактная информация, и можно ли ее увидеть сразу?
4. Есть ли текст, вверху письма, «Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.»?
5. Есть ли у вас ссылка для добавления вашего адреса в контакты?
6. Присутствуют ли в вашем письме ссылки на веб-версию письма?
7. Добавьте возможность управления подпиской в письмо.

Очень важно знать, что может пойти не так или какие проблемы могут возникнуть при отображении, попробовать их устранить до того, как письмо будет разослано подписчикам.