20 советов по созданию html email рассылки
Разработка HTML шаблона письма – один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.
Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет как такового, так как фильтры и триггеры могут заблокировать письмо.
Поэтому сегодня хочу дать вам 20 советов как избежать наиболее частых ошибок при создании email шаблонов. Данные советы не претендуют на звание HTML справочника для email маркетологов, но, думаю, вам пригодятся.
Я не буду расписывать зачем использовать тот или иной пункт, если это очевидно. Если у вас возникнут вопросы – пишите в комментариях.
- Создавайте письма вручную.
- Избегайте вложенных таблиц
- Не используйте фоновых рисунков, практически во всех email клиентах они не отображаются
- Располагайте картинки на своем сервере, вместо включения их в письмо
- Избегайте использования картинок 1х1 пикселей (для подгона размера элементов таблиц).
- Не используйте CSS
- Не делайте ширину сообщений более 650 пикселей в ширину
- Размер сообщения должен быть не более 100 кб
- Проверяйте HTML код на корректность. Для этого существует масса всевозможных отдельных утилит, встроенные чекеры в программах для работы с HTML и, естественно, W3C Validator.
- Не используйте скрипты в письмах.
- Вставляйте в письмо ссылку на Web версию сообщения
- Используйте alt теги для изображений.
- Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
- Используйте горизонтальное расположение текста, не используйте вертикальное
- Объедините в письме текст и HTML, лучше использовать цвета и стили вместо картинок.
- Вставляйте большое количество ссылок на информацию на вашем сайте.
- Навигация по вашему email сообщению должна совпадать с типом навигации на вашем сайте.
- Вставляйте функциональность вроде «Отправить другу» с осторожностью
- Добавьте возможность управления подпиской в письмо
- Аналогично с изображениями, аудио файлы, флеш и видео лучше хранить на вашем сервере и не прикреплять к письму.
ФОРМАТИРОВАНИЕ
Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные «WYSIWYG» (What You See Is What You Get) редакторы полны недостатков. Практически все из них вставляют лишний html код (особенно FrontPage), который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.
Некоторые имейл фильтры блокируют письма с вложенными рисунками. Также размер письма может быть значительным, поэтому оно может быть заблокировано сервером. При получении пользователем письма с сервера, оно может долго приниматься его почтовой программой, что, несомненно, может повлиять на его восприятие. Поэтому располагайте изображения на своем хостинге, а в письмо вставляйте ссылку на изображение.
CSS значительно упрощает работу со стилями для вебсайтов, но в случае HTMLписем это может повлиять на корректное отображение письма. Не используйте стили из отдельно прикрепленного файла. Наилучший вариант включить стили в headerчасть письма.
В некоторых почтовых программах пользователям придется использовать горизонтальный скроллинг для чтения письма.
USABILITY
Письма могут быть заблокированы фильтрами.
В случае, если у пользователя не откроется ваше сообщение в корректном виде, дайте ему возможность прочитать его на вашем сервере. Для этого разместите ссылку на «Веб версию».
В случае, если у пользователя будет заблокировано отображение изображений в письмах, то он увидит альтернативный текст, который вы можете указать по своему усмотрению.
ФУНКЦИОНАЛЬНОСТЬ
Многие email программы могут некорректно отображать формы. Лучше использоваться ссылку на страницу вашего сайта, где находится форма «Отправить другу».
Об этом я уже неоднократно писала.
Многие получатели могуn не иметm соответствующего ПО, поддерживающего данные форматы
Для создания и отправки email рассылки рекомендую использовать ePochta Mailer, который обладает собственным WYSIWYG редактором, возможностью ручного редактирования HTML кода и просмотра полученного результата с помощью встроенного браузера.
(+17 бал, 25 голосов)
Спасибо за статью, очень вовремя пришлась
Всегда пожалуйста!
Оль, ты уже не обижаешься если тебя Спаммершой называют?
Юра, а за что обижаться, если люди не разбираются в имейл маркетинге и всё называют одним словом – спам. тут не обижаться надо, а разъяснять и объяснять…
Не согласна насчёт дизайнерских программ. Работала и работаю в очень крупных и известных компаниях,
используют dreamweawer без проблем.
В идеале рассылка не должна весить больше 40кб.
Не стоит использовать javascript.
Cтарайтесь использовать местоимения «вы», а не «я» или «мы».
Если вы что-то продаёте, то стоит прибегнуть к формуле «early bird»
Ещё можно добавить, что рассылки лучше рассылать по вторникам и четвергам до полудня. Избегать отправления по пятницам и по понедельникам.
Плюс, всегда должна быть ссылка для «отписания»
) от рассылки.
Куча всего ещё…
Вообще, про рассылки целые книги написаны….
Парижанке
В моей компании тоже используют Dreamweaver, он довольно удобный. Но при этом у него есть свои недостатки, которые часто всплывают при постоянном его использовании. Последняя версия у меня на 100% грузит процессор когда в ней долго работаю.
Если хочешь, то могу уточнить моменты, когда Dreamweaver не эффективно формирует HTML для письма?
Да, советов в интеренете можно найти уйму, кто книги пишет…, а мы программы для рассылок разрабатываем
Поэтому в этой теме считаю себя хорошим специалистом.
Оля, а кто сказал, что ты плохой спец ?
Кстати, советы в рунете, имхо, в большинстве своём основаны на собственном опыте, базированном на методе тыка. Т.е. большинство «писателей» – любители, а не профессионалы. Ведь качественного образования в сфере e-business’a у нас пока нет, на что есть объективные причины.
Уточни на счёт dream машины, читателям будет интересно.
Я dream’ом напрямую не занимаюсь, т.к. у нас это работа веб-мастера. Маркетолог лишь решает информационную часть и расположение блоков, стратегические решения…Но жалоб со стороны веб-мастера на dream фигню не слышала.
Респект за проделанную работу…пару моментов пришлись весьма к месту…
ПО поводу DreamWeaver’a пообщалась с людьми, уточнила вопрос.
В общем из минусов именно форматирования:
1. В случае, если размер столбцов таблицы менять путем перетягивания краев столбцов, то при этом исчезает процентное соотношение столбцов и появляется фиксированная длина/ширина, что потом очень негативно сказывается на внешний вид, так как при разном разрешении экрана могут появляться пустые зоны.
2. К примеру, когда текст хочется сделать красным цветом, то по умолчанию при выделении текста и задании его цвета DreamWeaver создает отдельный стиль в header style1 и в текст появляется <span class=»style1″>…, вместо того, чтобы например сделать <font color=»#ff0000″>…
Конечно, со временем к подобным его приколам привыкаешь и сразу эту исправляешь вручную, но когда человек начинает работать с ним впервый раз, то бывает наламывает кучу дров…
Спасибо за статью! Кстати я делаю ее проще. Белый фон и хороший шрифт текста. И все, никто не жалуется.
MiranS, перестань спамить короткими и бессмысленными сообщениями, иначе буду вынуждена их удалить
kompozer – хороший редактор и кода лишнего не вставляет.
2 Ольга Иванова
Напишите плиз заметку про спам и емеил маркетинг =) Такую чтоб сравнение с анализом и выводами.
Сам на работе создаю клиентскую рассылку =) ШЛю партнёрам и клиентом) Мной движут позитивные позывы =) Про пеарить контору =)))
НО я на 100% понимаю, что занимаюсь спамом. Ибо любое письмо… которое я не жду… Письмо от левых отправителей, не целевое и проч является спамом.
спасибо
Грамотные советы, молодец!
Ольга Иванова, проше использовать для написания статей в блог Widows Live Writer – он все нормально форматирует и постит сразу в блог.
Ольга Иванова
Не нравятся, так уделяй – кто тебя держит.
MiranS, не надо ставить самоцелью попадание в список самых активных. Лучше писать редко, но метко! Тогда люди оценят ход мыслей и обязательно посетят твой блог
Цитата: «Располагайте картинки на своем сервере, вместо включения их в письмо».
Да, включать картинки в письмо это грубейшая ошибка. Но и размещать их у себя, тоже не правильно. Подумайте о дополнительном трафике и пожалейте свой сервер. У меня мейл-лист около 500 тысяч «живых» адресов. Картинка в 20 кб. это уже дикая туча трафика. Сервер сдохнет сразу.
Картинки лучше размещайте на бесплатных архивах. По опыту могу рекомендовать Flickr. Идеальный сервис, прямые ссылки, 100% надёжно и главное бесплатно.
Или попробовать BlogJet – http://www.codingrobots.com/blogjet/ – говорят, неплохая вещь, но сам не пробовал
Траффик сейчас стоит копейки! Не надо его считать!
А если есть 500 000 реально живых получателей, то стоить ожидать что у вас есть несколько своих серверов, вставлять картинки можно случаным образом и так сбалансировать нагрузку.
а Flickr вякие… хз… Конечно, он вроде Гуглу уже принадлежит,так что uptime нормальный должен быть. Но не за закроют ли они акк, если снаружи будет 500 000 загрузок картинки!
BlogJet пошустрее и поудобнее чем Windows Writer, но он платный (хотя конечно мелочь 500р) и у меня он почему то глючил при отправке cообщений в блог.
«Не делайте ширину сообщений более 650 пикселей в длину». Ольга, вы хотели сказать в ширину? Надо заметить статья хорошая и гости мяса добавляют. Думаю не надо париться на счет html-редакторов. Если кто специалист, тот и в блокноте напишет. Я сайты делаю в PHP Expert Editor и мне нравится. Вообще я здесь в первой.. ..Блондинка в маркетинге – это заводит!
Евгений, спасибо за замечание, вы абсолютно правы!
Я только собираюсь открыть свою рассылку. Читаю и парюсь, сколько разных мнений. Видимо, придётся разбираться самому!
За статью спасибо, полезные, проверенные советы всегда пригодятся. только самому их проверить надо.
И поздравляю автора и всех комментаторов с наступивщим старым Новым годом, повод уж очень хороший.
Желаю больше удач и меньше проблем. А уж если будут проблемы, пусть они решаются быстро и легко!
хех) недавно сам похожую инструкцию для веб-мастеров составил) какой же это гемор был сначала – верстать рассылку, не зная всех этих особенностей
Привет спамерам
Статья гуд
[...] Удостоверьтесь, что письмо выглядит и составлено профессионально. Советы по форматированию html письма. [...]
И как в конце элегантно ввернула про еПочту! ))
Хочу всем разъяснить. Если в вашей компании веб-мастера используют дремвивер и работают на нем так, как описано выше (перетаскивают мышкой размеры таблицы), то таким веб-мастерам и программистам руки бы оторвать. Ни один уважающий себя веб-мастер, веб-программист или верстальщик не будет так извращаться, а будет писать руками (а дримвивер в этом случае нужен, чтобы это убыстрить – он выдает список тегов и правил, или чтобы без грамматических ошибок это все писать).
Далее, кто сказал по поводу того, что дремвивер добавляет стиль в хедер, вместо того, чтобы написать тег font. Так вот, тег font давно и безнадежно устарел, и его ни в коем случае нельзя использовать. Его активно использую (я в том числе) в рассылках. Т.к. мейл, например, не воспринимает стили вообще, как таковые (те, которые ты сам пишешь в рассылке). Но об этом уже сказали выше.
Алексей, по поводу ручной верстки – довольно сомнительно. Думаю не так много маркетологов имеют опыт подобной верстки.
[...] в клиентов при создании рассылок, воспользуйтесь советами по созданию html email рассылки от Ольги [...]
[...] Как создать html email рассылку [...]
Форматировать внешний вид HTML письма будет удобнее в оутлуке, а вот по поводу размера – это в точку. Не шлите вы письмом вордовские документы массой 5мб – хотябы заархивируйте и прикрепите.
Спасибо за советы.
Неплохи было бы пару примеров для наглядности.
Присоединяюсь к Александру
Хотелось бы посмотреть на примеры грамотно оформленного HTML письма.
И самое главное, давайте людям то, что они хотят!
А еще стоит избегать шаблонных описаний при составлении рассылок. В этом случае у спам фильтров будет меньше подозрений к сообщению.
100 кб – это очень много. Не все живут в Москве.
Управление подпиской, это дельная вещь.
Оля! Вы отважная женщина! Представляю как Вам было трудно в самом начале . Наверное не раз встречали снисходительное отношение, типа: ну-ну, давай посмотрим, что тут может блондинка умного написать. Я рада, что совершенно случайно наткнулась на очень полезный для себя блог. Подписалась на рассылку, поставила в закладки – буду у Вас учиться. С уважением, Ольга Хасанова.
Ольга, благодарю Вас за слова поддержки! Очень приятно видеть таких людей в числе своих подписчиков!
mad, вы про то что рассылать трудно 100кб письма? (ну это просто не так) Или что многие не принимают такие большие письма?
А если рисунок это очень важная часть письма и его обязательно нужно вставить, как быть в таких случаях….????
Пока не дошел до рассылки, но спасибо за советы и инструкции
«7, Не делайте ширину сообщений более 650 пикселей в ширину»
Тафталогия=))))
Хорошие советы. Учту, права 7 пункт не очень
спасибо очень познавательная статья
Ольга, спасибо, использовал при создании корпоративного html-письма, очень помогло.
Оля Спасибо за статью очень полезная информация . Обязательно воспользуюсь.
Главное в письме содержание, а не оформление
Само собой, но если содержание качественно оформить, то можно получить двойную отдачу. В таком деле важна каждая деталь.
Хорошие рекомендации по составлению письма! Исправил пару ньюансов у себя!
Спасибо. Дельные советы. Хотелось бы, конечно, парочку наглядных примеров.
ещё раз благодарю. Добавил в закладки…перечитаю
Парочку советов добавил себе в заметки! Будем и дальше исправлять старые ошибки…..
Спасибо очень толковые советы.
Очень вовремя, пригодилась статья
Спасибо за статью, очень вовремя нашел её.
Я только собираюсь открыть свою рассылку. Читаю и парюсь, сколько разных мнений. Видимо, придётся разбираться самому!
За статью спасибо, полезные, проверенные советы всегда пригодятся. только самому их проверить надо.
Уважающий себя веб-мастер, веб-программист или верстальщик не будет так извращаться, а будет писать руками.
Спасибо за хорошую статью!
С Новым годом!
В целом перечисленные пункты знакомы,но всё же кое что новенькое для себя почерпнул
Тоже собираюсь открыть свою рассылку, и нашла очень много полезного для себя. Сэнкс!
вот все вроде подходит ,но вложится в 100 кб лично для меня проблемно иногда.
У меня рассылка на смартреспондере, сделал html версию письма, а мне все пишут что у меня письма кривые. Потом понял, что у них картинки не отображаются, косяк….
Получается ни как не отправить красивое письмо подписчикам….
Пример кросспочтовой вёрстки html письма
http://divhack.com/node/46
[...] 11. Разместите ссылки на свою продукцию в рассылке других людей. Получить обратные ссылки в массовых рассылках других людей или специальных сервисов — очень хороший шаг, так как привлекаются именно заинтересованные люди. Чтобы увеличить конверсию посетителей в клиентов при создании рассылок, воспользуйтесь советами по созданию html email рассылки. [...]