Основы HTML в емейл сообщениях — основные понятия, лучшие практики, советы и рекомендации

Хотите самостоятельно создавать код для HTML сообщений рассылки? Вы, возможно уже нагуглили или наяндексили бесчисленные описания того, что работает, а что нет в HTML емейлах. Чаще всего вы наверное встречали описание того, что происходит с CSS, что почтовые приложения никогда не показывают HTML корректно, и что нельзя с помощью Outlook или TheBat отправить рассылку правильно. Прежде чем сосредоточиться на деталях, давайте рассмотрим основы.

Предпосылки

Одна вещь мы хотели бы подчеркнуть, чтобы самостоятельно создать емейл сообщение в формате HTML, вам действительно необходимо знать основы HTML. Вы должны быть в состоянии верстать веб-страницы «с нуля» без помощи каких-либо визуальных редакторов. Если вы с этим хорошо знакомы, то уже не нужно беспокоиться о сотнях мелких правил (как работает CSS в этом почтовом клиенте в отличии от другого). А понимание основ сэкономит вам много времени и спасет от разочарования.

Вы не эксперт в HTML? Не беспокойтесь. FEEDGEE предоставит вам визуальный редактор, который можно использовать для создания шаблонов и емейл сообщений даже не зная основ HTML.

HTML сообщения в двух словах

HTML емейл – ничего более, чем веб-страница. Вот и все. Надеемся вы не разочарованы, если думали иначе. Так что, если вы можете создавать веб-страницы, то и создание своего собственного шаблона HTML емейла тоже осилите. Но есть одна тонкость надо писать HTML как в 90-х (детали позже).

Доставка HTML сообщений с применением Multipart/Alternative MIME

HTML емейл делает таким сложным для большинства не дизайн и не верстка. А та часть, которая обеспечивает его правильную доставку. Вы не можете просто приатачить HTML файл и изображения к емейлу и отправить его. Когда получатели откроют файл HTML, все изображения будут отражены поврежденными (потому что программы электронной почты сохранят их в временную папку где-то на вашем жестком диске и путь к картинкам, указанный в коде окажется неверным).

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

Как же все-таки правильно отправить письмо HTML вместе с текстом? Это просто. Вы отправляете его в «Multipart / Alternative MIME» формате. Если вы программист, то вероятно творческий процесс уже пошел. Двигайтесь вперед и создайте закладку на эту страницу, чтобы потом могли вернуться к ней позже. Теперь, вперед на Google «multipart alternative», чтобы выяснить, как отправить такие сообщения с вашего сервера. Вы наверняка там сможете найти для этого PHP или ASP скрипты и даже сможете разыскать способы настройки Outlook для отправки multipart сообщений. Не останавливаемся на достигнутом – разбираемся, устанавливаем, программируем, настраиваем и наконец-то понеслись сообщения на свободу. Ура! Затем, когда ваш провайдер заблокирует ваш доступ в интернет, акаунт хостинга или сервер из-за отправки большого количества писем или, когда вы столкнетесь с необходимостью обрабатывать сообщения с причинами недоставки и с отказами от рассылки, понадобится отслеживать кто открывает сообщения и кликает по ссылкам и когда читают сообщения активнее и ощутите, что здесь гига-еще-сколько много работы, или еще попадете в черный список из-за неверных настроек вашего сервера, возвращайтесь к этой странице.

Снова с нами? Welcome back! Теперь вы узнали, что доставка HTML-рассылок довольно сложная и трудоемкая задача, и создание с нуля технологий для ее решения совсем не то ради чего вас пригласили на работу или вы создавали свой бизнес. А это задача, для решения которой вы хотите нанять провайдера услуг электронной почты – ‘ESP’ (такого, как FEEDGEE). Хорошие ESP работают в партнерстве с интернет-провайдерами и анти-спам сообществами и поддерживают конфигурацию своих серверов и ПО такой, которая обеспечивает доставку.

Ок. Здесь все понятно. Хватит о доставке. Давайте перейдем к самому интересному…

Основы кодирования HTML сообщений

Как писал ранее, кодирование HTML сообщений мало чем отличается от создания веб-страниц. Только вы должны делать это «по старинке». Помнте еще в 90-х, когда не было еще веб-редакторов нужно было весь код писать вручную? Да, это были времена войн Internet Explorer против Netscape И как надо было тестировать созданный HTML снова и снова? Создание HTML емейл сообщений сегодня очень похоже то, каким оно было еще во времена зарождения веба. Причиной этому является различие стандартов каждого производителя программного обеспечения почтовых клиентов в обработке HTML для представления сообщения получателю.

1. Самое главное правило, которое поможет сохранить ваш рассудок — это простота. Сосредоточьтесь на сообщении, а не хитростях кодирования.

2. Картинки должны быть размещены на общедоступном веб-сервере. В html-коде используйте абсолютные пути к месту расположения картинок. Приатаченные файлы часто сохранятся почтовыми программами со случайными именами во временных папках кэша и не могут после быть нормально отображены в сообщении. Атачменты также существенно отбирают пропускную способность канала интернет (как при отправке, так и при получении ответных сообщений со статусами доставки – отказы или ‘bounce’), поэтому использование атачментов не лучшая практика: Одной из распространенных ошибок является размещение файлов картинок на локальном компьютере, в интранет или на интернет-сервере защищенном паролем, защищенном https сервере (https обеспечивает крайне медленный доступ к файлам) или бесплатном хостинге (откуда изображения не всегда могут быть показаны из-за ограничений пропускной способности такого хостинга). Храните файлы картинок на быстром веб-сервере в общедоступной директории.

3. Table и прозрачные gif (SHIM.GIF) ваши друзья. Пусть код всегда будет простой, потому что почтовые программы используют различные методы обработки и представления HTML. Некоторые используют обработчик Internet Explorer, Firefox, или в случае Outlook 2007, Microsoft Word (реальная головная боль!). Некоторые используют свои собственные средства представления HTML.

4. Не делайте емейл-сообщение слишком широким. Многие смотрят сообщения через узкие по ширине панели предварительного просмотра до того как открыть их полностью. Не спрашивайте, для какой ширины экранов кодировать сообщения 1024×768 или 800×600. Решайте сами. Бывают панели просмотра менее 200 пикселей. Всегда думайте о наименьших ращмерах. Мы создаем шаблоны не более 600 пикселей в ширину, или «тянущиеся» – не фиксированной ширины.

5. Тестируйте, как выглядит HTML в разных почтовых клиентах и веб-сервисах. Ваше емейл сообщение будет отображаться по-разному во разных программах и сервисах электронной почты. Такое тестирование является обязательным. Речь не про разницу представления HTML-кода в разных браузерах IE, Firefox, Opera и Safari. Мы говорим про Outlook, Outlook 2007, Outlook 2003, Outlook Express, The Bat, Apple Mail, Lotus, Gmail, Mail.ru, Yandex.Mail, ukr.net, Rambler, Yahoo Mail, AOL, AOL Web, Hotmail, MSN, и так далее. Как справиться? Только если HTML код будет простым. Table, 600 пикселей в ширину максимально.

6. Веб-сервисы электронной почты работают по разному. Веб-сервисы электронной почты , которые позволяют открывать емейл ящик в браузере, такие как Gmail, Mail.ru, Ukr.net, Yandex Mail, Yahoo Mail, Hotmail и т.д., будут вырезать ваши DOCTYPE, BODY и HEAD теги. Причина проста – они не желают, чтобы ваш код потенциально переопределил вывод HTML их страниц. Все, что вы обычно добавляете внутрь тегов (bgcolors, embeded CSS, JavaScript, файлы фоновой музыки и т.д.) будут также удалены из кода.

7. Думайте, как спам-фильтр. Вы должны учитывать наличие спам-фильтров и спам-фаерволов на пути код вашего HTML-сообщения. Это довольно очевидно, что спам слова, как «Виагра», «V14GR4″ или «емейл получен из открытых источников» поможет сообщению стать жертовй спам-фильтров. Но спам-фильтры также оценивают код по большому количеству других признаков, например, если ли у вас в сообщении слишком много картинок и совсем мало текста, то сообщение может оказаться в папке спам. Или просто неряшливо оформленный HTML-код может быть принят как дело рук спамера.

8. 99% что CSS не будет работать (особенно в веб-сервисах электронной почты, таких как Gmail, Mail.ru, Ukr.net, Yandex Mail, Yahoo Mail, и т.д.). Это означает НЕТ CSS-отступам, div и т.д. Просто помните об этом и выиграете реально много времени: Когда ваш HTML-емейл открыт например в Gmail, CSS в вашего HTML потенциально может переопределить CSS всей страницы с интефрейсом Gmail. Именно поэтому блокируется вывод большого количества элементов кода. Inline CSS является более безопасным, и обычно срабатывают старые теги оформления шрифтов (помните про кодировать, как в 90-х?).

Как отслеживать открытия и клики

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

Чтобы отслеживать открытия HTML-сообщений, нужно в сообщение вставлять прозрачный GIF размером 1х1 пикселей. Некоторые называют его «трекером» или «веб-маяком». Когда получатель открывает ваш емейл, изображение трекера загружается с сервера (и вы можете учесть открытие). Вот почему большинство скажут вам, что вы не сможете отслеживать открытия, если это не HTML-сообщение. Это верно лишь отчасти.

Это правда, что только HTML-емейл может иметь встроенный для отслеживания открытий gif. Но вы можете отслеживать «открытие» и текстовых версий емейл сообщений. FEEDGEE автоматически готовит текстовые сообщения таким образом (или, если получатель решил не загружать картинки при просмотре HTML), что когда кто-то кликает на ссылку мы можем отследить «открытые».

Если говорить про отслеживание кликов, то вы, наверное, уже поняли как это работает из описания выше. Просто используйте «редиректы». FEEDGEE автоматически преобразует все ссылки на вашем емейл-сообщении, чтобы указать их на перенаправляющие скрипты. Когда получатели кликают по вашей ссылке, они автоматически перенаправляются с нашего сервера на исходный URL указанный вами (в мгновение ока) и мы получаем возможность отслеживать клики. Это позволяет нам создать очень полезную аналитику рассылки, которая помогает вам следить за уровнем интереса получателей к информации по ссылкам в сообщении рассылки.

Правильное управление списками

Недостаточно только знать как создавать HTML код и обеспечить доставку рассылок не применяя знания про управление списками рассылки. Если вы сделали все описанное выше сами, то вероятно относитесь к группе умельцев «Сделай сам», кто может самостоятельно справиться с задачей хранения списков на сервере баз данных. Верно? Это замечательно, но если не обеспечить должное постоянное управление списком рассылки по результатам каждой отправленной рассылки, вы можете легко оказаться в черном списке интернет-провайдеров и списках сервисов обеспечивающих защиту от спама.

Главное, что нужно знать про управление списками рассылки:

• Прежде всего, не отправлять рассылки тем, кто не дал вам согласие на получение ваших рассылок оговоренной тематики.
• После отправки рассылки вы станете получать ответные сообщения (англ. bounce) с отказами в доставке сообщений некоторым подписчикам, которые не смогли получить вашу рассылку. Отказы бывают двух типов. «Мягкие отказы» (soft bounce) означают «временную недоступность» получателя (переполнен ящик, временно не работает почтовый сервер и т.д.). «Жесткие отказы» (hard bounce) означают, что емейл не может быть доставлен, например по причине блокировки емейла получателя, если указанного емейла не существует и т.д.
• Емейл адреса с которых в ответ приходят «жесткие отказы» следует сразу отписывать от получения рассылки, потому как если настойчиво продолжать слать на такие адреса рассылки почтовые сервера могут начать блокировать ваши сообщения и сообщать другим почтовым серверам о том, что найден подозрительный источник рассылок и стоит заблокировать получение сообщений из него.
• Если после 3 рассылок подряд с одних и тех же адресов в ответ вы получили «Мягкие отказы» говорят, что хорошей практикой будет отписать их. На практике оказывается, что если вы шлете рассылки каждый день, следуя этой рекомендации вы реально теряете МНОГО подписчиков, примером может быть отпуск на несколько дней, в течении которого многие стараются отдохнуть и не проверяют емейл. Даже, если Ваш список огромный и можно позволить себе потерять несколько подписчиков, вас возможно после достанут вопросами «почему я не получаю вашу рассылку?»
• Отказы от рассылки должны обрабатываться моментально
• Для получения большей информации про управление списками рассылки посетите MAPS

Ко всему выше сказанному вы можете создавать списки на FEEDGEE и мы будем управлять списками для вас ( в том числе автоматически обеспечив удалением по «Жестким отказам», обработку отказов от рассылки и т.д.). Вы также можете использовать готовые формы подписки для списков рассылки или использовать API для сохранения данных подписчиков в списках рассылки прямо со страниц вашего сайта.

Будущее HTML емейлов

Мы постоянно наблюдаем за появлением технологий, которые «положат конец существованию HTML емейлов». Черные списки, антивирусные-программы, которые блокируют «трекеры» открытий, агрессивно настроенные спам-фильтры, почтовые программы, которые по умолчанию не показывают картинки в сообщениях, Outlook 2007 и т.д. Но HTML емейлы все равно будут широко использоваться и будущем. Вместо детального изучения особенностей почтовых программ, применения изощренных приемов кодирования и CSS-хаков и попыток обеспечения совместимости Flash, старайтесь создавать несложный и понятный дизайн и уделять больше внимания самому сообщению.
Большое количество новинок, за появлением которых следует проследить, ждет нас уже в ближайшем будущем.

Все больше людей переходит от использования почтовых программ на локальных компьютерах к веб-сервисам электронной почты как Gmail, Mail.ru, Yandex Mail, Yahoo и т.д. и веб-интерфейсам для доступа к почте в корпоративных сетях.

Веб-сервисы электронной почты используют AJAX и другие классные технологии, чтобы создавать интерфейсы как у почтовых программ или даже удобнее. И почему бы не переложить обязанности своего компьютера по защите от спама на ресурсы постоянного развивающегося веб-сервиса, верно? Такие веб-сервисы по разному поддерживают представление HTML и CSS. И они тоже хотят зарабатывать. Подумайте о цене управления миллионами или миллиардами емейл адресов, о том какие для этого нужны каналы интернет и ресурсы для хранения информации. Их спам-фильтры будут становиться все более и более агрессивными.

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