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

Особенности создания

Современный человек ежедневно получает в среднем 5-6, а порой и до 10 электронных писем. Это значит, что у вас есть всего менее секунды, чтобы успеть привлечь внимание адресата, до того как он перейдет к прочтению следующей корреспонденции. В противном случае ваша рассылка HTML-писем будет абсолютно неэффективной, и вы просто потратите время зря.

Одним из нюансов, увеличивающих ваши шансы на привлечение внимания потенциальных клиентов или другой целевой аудитории, является создание корреспонденции, которая адаптирована к мобильным устройствам. Ведь большинство тех, кому она адресована для просмотра почты, наверняка используют их намного чаще, чем настольные компютеры и ноутбуки.

С этой целью можно применять, например, «отзывчивый дизайн», легко адаптирующийся к размеру экрана.

Каким должен быть шаблон письма

При верстке документа, предназначенного для отправки корреспондентам, следует придерживаться следующих требований:

• Его следует сделать достаточно узким, т. е. по размерам оно должно не превышать диапазон 500-600 пикселей, что обеспечит корректное отображение текста и другого контента на устройствах любого типа.
• Нужно использовать достаточно крупный шрифт для всей текстовой информации, так как на iOS-устройствах HTML-письмо будет неудобно читать, если размер шрифта менее 13 пикселей.
• Элементы, по которым можно сделать клик, должны быть достаточно крупными и изолированными от ближайших ссылок. В таком случае адресат сможет легко их активировать с первой же попытки.

Подготовка

Прежде чем разработать HTML-письмо, следует создать на одном из дисков новую папку и назвать ее, например, «Рассылки». Кроме того, необходимо скачать и установить программу Dreamweaver CS3. Этот продукт от Adobe является одним из достаточно простых инструментов конструирования веб-сайтов и хорошо подходит для разработки рассылочного письма в формате HTML.

Создание и сохранение документа

Перед тем как написать текстовую часть письма, нужно:

• открыть довольно популярную программу-конструктор HTML-писем Dreamweaver CS3 (DW);
• создать документ, выбрав в качестве типа «Переходный HTML 4.01»;
• сохранить файл с расширением «.html»;
• в верхнем меню найти команду редактирования;
• убирать галочку из чек-бокса «Использовать CSS вместо тегов HTML».

Пошаговая инструкция

Теперь, рассмотрим, как создать HTML-письмо. Для этого:

• Последовательно открывают в меню вкладки «Вставить» и «Таблица» и выставляют нужные параметры таблицы. Например, строки — 2, столбцы — 1, ширина — 700, заголовок — сверху. Границы можно выставлять, а можно обойтись без них, указав 0.
• Формируют заголовок письма. Так как HTML-письмо предназначено для большего числа получателей, поэтому используют оператор , подставляющий нужное имя получателя.
• В нижнем окне «Свойства» выставляют нужные параметры для шрифта, размера и цвета текста заголовка и
• «Выходят» из области заголовка. В нижней части экрана выставляют параметры для курсора «По центру» и «По середине».
• Вставляем готовый текст письма или «пишем» его прямо в программе DW, выбрав нужный тип и а также расположение текста на странице.

Создание гипертекстовых ссылок

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

Как вставить картинки

Обычно письмо в формате HTML завершается контактной информацией, желательно с фото автора или с подходящей тематической картинкой. Ее можно загрузить из интернета или предварительно загрузив в Интернет, так как вам нужен будет URL этого изображения. Лучше всего это сделать посредством одного из бесплатных сервисов.

Для того чтобы оформить такой симпатичный финал:

• вставляют в нижней части письма, внутрь основной таблицы еще одну с 3 столбцами и параметром для границы 0 пикселей;
• выставляют курсор в том месте таблицы, где хотят видеть картинку;
• отмечают в нижнем окне «Посередине» и «По верхнему краю» для каждой секции;
• выбирают в верхнем меню вкладку «Вставка»;
• делаем клик по надписи «Изображение» и в выпавшем меню вставляем скопированный нами адрес;
• нажимаем «Ok» 2 раза.

Просмотр

Теперь, когда вы знаете, как сделать HTML-письмо, следует убедиться, что адресат его увидит в корректном виде. Для этого перед отправкой нужно просмотреть ваше произведение в браузере Dreamweaver CS3. Для этого нужно нажать на иконку с земным шаром в среднем верхнем меню. Если вместо букв на экране появилась абракадабра, то следует выставить в настройках вашего браузера автокодировку.

Кодировка

Из раздела «Проект» и переходят в кодовую часть — «Код». В открывшемся окне выделяют и копируют все, что заключено между тегами и . Сохраняем файл. Далее вставляем HTML-код.

Отправка HTML-письма

• выбирают либо создаем новое письмо, заполнив строки «Имя» и «Адрес отправителя».
• заполняют строку «Тема письма»;
• отмечают в верхнем левом меню HTML-код;
• вставляют код, скопированный в программе DW-код в большое поле «Источник»;
• проверяют корректность отображения посредством инструмента «Предпросмотр»;
• удаляют текстовую версию письма;
• тестируют его на спам, с помощью одноименной кнопки, расположенной рядом с кнопкой «Отправить».

Несколько популярных шаблонов

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

• Cerberus . Этот набор так называемых отзывчивых шаблонов позволяет создавать письма, нормально отображаемые как в мобильном приложении Gmail, так и в Outlook. Он позволяет использовать блоки HTML-кода либо по отдельности, либо объединяя их.
• Ink — это заготовка писем, рассылки которых практически универсальны и совместимы с любыми устройствами и клиентами.
• Really simple HTML email template. Шаблон позволяет создавать рассылочные письма очень просто и быстро. Правда, у них будет крайне простой дизайн в виде одного столбца, в котором заключен призыв к действию.

Как вставить HTML в письмо

Рассмотрим теперь несколько другую задачу. Чтобы вставить код HTML в электронное письмо, например, gmail используя, как в приведенном ниже примере браузер Google Chrome, следует:

• нажать на кнопку «F12» или выбрать соответствующую последовательность команд в меню;
• в открывшемся окне с кодом текущей страницы клиента gmail найти то место, куда должно быть вставлено HTML-письмо, сделать правый клик и выбрать «Edit as HTML».
• вставить скопированный HTML код;
• нажать комбинацию двух клавиш «Ctrl» и «Enter».

Для той же цели можно скачать простую в использовнии программу Mozilla thunderbird. С ее помощью можно создать письмо, а потом сначала выбрать пункт «Вставить», а затем «HTML», и вставить туда код своей рассылки.

Инструменты

Вордпрессовский плагин e-Newsletter позволяет профессионально управлять рассылками и абонентами. Причем и то, и другое делается прямо через панель администратора WordPress. Это обстоятельство обеспечивает полный контроль и совершенно бесплатно, что не может не радовать.

Еще один простой инструмент — Bulletproof background images, представляющий собой простой инструмент, который позволяет получить код для фонового изображения создаваемых писем. С его помощью можно сделать корреспонденцию намного красивее. Для просто следует указать URL понравившегося фонового изображения и его резервный цвет, а также должны ли эти параметры применяться ко всему телу HTML-письма или они предназначены только для одной из ячейки таблицы. В результате будет получен готовый код, который требуется скопировать и вставить в свой шаблон.

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

Добро. Больше чем уверен, Вам понравится эта статья. А точнее понравится то, что лежит в архиве. А точнее в архивах, а если еще точнее то в 10-и архивах. :)) Затянул. Выкладываю я, дорогие подписчики, 10 офигенных адаптивных шаблонов email писем.

Каждое письмо почищено, проверено, упаковано в архивчик и залито для того, чтобы вы нажали кнопочку «Скачать» и сохранили шаблон email письма у себя на компьютере. Это настоящий подарок для того, кто увлекается email рассылками. Мне же интересны эти шаблоны с точки зрения уведомлений посетителям, которые оставили заявку на обратный звонок на сайте или заказали какой-либо товар на одном из моих интернет магазинов. Хотя многие из этих email шаблонов запросто можно использовать как и обычный промо-сайт. Но все таки лучше посмотреть , благо их уже собралось не малое количество.

Верстать email шаблоны дано не каждому, так как там есть свои правила. Но больших отличий email писем от обычных сайтов на html нет. Единственные отличия, это css внутри html и наличие уже устаревшей на сайтах табличной верстки. Поэтому знания html будет достаточно для создания email письма. Для этого не нужно проходить профессиональное обучение web-дизайну. Но ведь гораздо легче скачать варианты, которые ходят в интернете в свободном доступе. И вот один из таких вариантов. Смотрим, радуемся, качаем.

Email шаблон под кодовым названием «Focus»

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

Крутецкий email шаблончик «Summers coming»

Полностью адаптивный резиновый легкий простой email шаблон

Отлично сверстанный шаблон или платформа для email шаблона. Здесь нет картинок, иконок и так далее. Это пример как нужно верстать email шаблоны. Отлично подойдет для уведомлений о регистрации, подтверждение пароля и так далее.

Симпатичный шаблон email письма в синих тонах под названием «Minty»

Смешной и стильный шаблон email письма с несколькими блоками. Наверное, лучше всего подойдет для рассылки статей с новостного портала или блога.

Email шаблон «Nexit» для интернет магазина

Серьезное email письмо. Судя по картинкам - это рассылка интернет магазина женской одежды. Отлично представлены скидки, акции и популярные позиции с ценами. Отличный рекламный email инструмент.

Строгий стильный шаблон для email письма «Simples»

Люблю минимализм. А это, черт возьми, самое ярое воплощение минимализма. Тонкий шрифт, стильные изображения и иконки. Все как надо. Отличный email шаблон для рассылки акционных товаров в интернет магазине техники, преимущественно компьютерной.

Email шаблон «Tempo» на тему туризма

Мини сайт в формате email письма. Здесь есть и меню и мини баннер. Очень хорошо подойдет для рассылки горящих туров (если это туристическая компания) или свежие предложения квартир (риелторская контора или агентство недвижимости)

Простой двублочный шаблон «Tubor» для email рассылки

Простой, не обозначенный тематически, шаблон email письма под названием «Tubor».

Коричневый странный html шаблон email «Underscore»

Шаблон email письма «Wooshi» email рассылки ресторана или кафе

Каждый шаблон имеет адаптивную верстку, поэтому они будут также молодцом держаться на мобильных девайсах. Также, каждое email письмо в этой сборке сделано по всем правилам email письма. Есть ссылки на головной сайт, мобильную версию и ссылка, чтобы отписаться от рассылки. Хороший получился пост. Надеюсь, Вы почерпнули из него нужные вам шаблончики. Рад был помочь, до новых постов. Также вы можете скачать сразу все 10 шаблонов email писем, нажав на кнопка «Скачать», которая ниже.

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

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

К счастью, есть дизайнеры и разработчики, создавшие коллекции редактируемых бесплатных адаптивных шаблонов электронных писем, которые работают во всех клиентах и на любых устройствах.

Блочно-модульные адаптивные шаблоны

Litmus Responsive Email Templates (7 шаблонов)

Litmus выпустил подборку из семи адаптивных шаблонов электронных писем с готовым дизайном. Они поставляются с исходными файлами PSD :

Green Village HTML Templates

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

Responsive Email Template от Email on Acid

Этот блочно-модульный шаблон предлагает три варианта дизайна, которые отображаются в зависимости от ширины экрана. По умолчанию, он поддерживает 1-3 колонки, Он использует медиа-запросы, поэтому на мобильных устройствах преобразуется в одностолбцовый макет:

Basic Responsive Email Template

Simple Responsive HTML Email

Простой блочно-модульный адаптивный шаблон HTML письма для email рассылки использует медиа-запросы и плавающую ширину, чтобы обеспечить максимальную совместимость:

Responsive & Flat Newsletter Template

Responsive Email Template

Шаблоны электронных писем с чистой структурой

Responsive Email Blueprints от MailChimp (6 шаблонов)

MailChimp выпустил подборку из шести адаптивных готовых шаблонов писем для рассылки HTML под названием Email Blueprints . Они включают в себя некоторые элементы специфического языка шаблонов Mailchimp , но их можно легко удалить, если вы не являетесь пользователем MailChimp :

Ink – A Responsive Email Framework (4 шаблона)

Это адаптивный Email-фреймворк от ZURB , который включает в себя сетку из 12 столбцов и простые элементы пользовательского интерфейса для быстрой разработки электронных писем:

Antwort Responsive Email Layout Templates (2 шаблона)

Antwort предлагает надежные адаптивные шаблоны электронных писем HTML с обширной документацией и с настраиваемой шириной в зависимости от размеров экрана. Шаблоны отлично работают в мобильных клиентах, а также во всех основных стационарных клиентах и в Outlook (2000+) :

Salted, A Responsive Email Template

Шаблон разработан на основе кода, используемого Litmus для своих собственных рассылок. Предлагает простую основу для построения адаптивных электронных писем, созданных на HTML :

A Table-Based (but Responsive) Email Template

Этот красивый шаблон HTML письма был разработан на основе E-mail Blueprints от MailChimp и Email Boilerplate от Шона Пауэлла . Это адаптивный табличный шаблон электронных писем, который уже включает в себя теги объединения Mailchimp (их можно удалить, если они не нужны ):

Respmail Responsive Email Template

Улучшенная версия MailChimps Email Blueprints с большим количеством опций, заново определенной структурой и рядом исправлений для Outlook , Yahoo , Hotmail , Gmail … Данный шаблон был протестирован и тщательно проанализирован на предмет совместимости. Также он невероятно прост в настройке:

rwdemail

Разработанный на основе шаблонов Ink от ZURB . Это проект, который позволяет автоматизировать все, начиная от прекомпиляции SASS , встраивания CSS , CSS / HTML , минимизации изображений и до S3-хостинга изображений и тестирования Litmus . С помощью шаблонов INK и их CSS-образцов можно создавать шаблоны HTML письма любого уровня сложности.

Future-Proof Responsive Email Template Without Media Queries

А что, если бы можно было создавать адаптивные шаблоны электронных писем даже в средах с неудовлетворительной поддержкой CSS? Шаблон вы найдете здесь :

Другие ресурсы для создания шаблонов электронных писем

• Responsive Email Patterns — подборка шаблонов и модулей для адаптивных электронных писем;
• Cerberus — шаблоны для адаптивных электронных писем;
• Really Good Emails — лучшие дизайны для HTML шаблонов писем;
• Responsive Email Resources — подборка инструментов для создания адаптивных шаблонов электронных писем.

Перевод статьи «30 Free Responsive Email and Newsletter Templates » был подготовлен дружной командой проекта

На чистом HTML. Как не странно, за два года в бесплатном доступе появилось не так уж и много бесплатных решений, но то, что удалось найти, значительно превосходит по качеству любой из старой статьи.
E-mail рассылки , несомненно, мощнейший инструмент маркетолога, но пользоваться им нужно очень осторожно. Наш народ никогда не был в восторге от рекламных писем в почтовом ящике, но если вы хороший маркетолог, то сумеете войти в контакт с получателем письма. Данная подборка не решит всех проблем, связанных с рассылками и даже не поможет их обойти, ведь обратит внимание получатель на ваше письмо, удалит или отправит его в спам, зависит не от того, какой красивый в будет дизайн, а от содержимого. Все, что я хотел сказать этой фразой - не шлите спам или каких-либо шаблонных предложений. Используйте эти html шаблоны с умом и без вреда окружающим.
Еще раз повторю, не рассылайте спам, лучше применить эти шаблоны для рассылки различных поздравлений для ваших клиентов с праздниками. Если у вас есть интернет-магазин и имеется база пользователей, которые действительно хотят получать от вас письма, можете на остове любого html шаблона сделать рассылку с оповещением о какой-либо акции или скидке.
Итак. К вашему вниманию 20 бесплатных E-mail шаблонов для рассылок . Пользуйтесь с умом.

Бесплатный HTML + PSD E-mail шаблон: PHStock Template

Адаптивный E-mail шаблон для интернет-магазина

Бесплатный E-mail шаблон для мероприятия

Green Village - хипстерский E-mail шаблон для блогера

Photon - E-mail шаблон для фотоблога

KATAUSTRIA - адаптивный Email шаблон

Boxi - бесплатный E-mail шаблон в стиле Meto / Flat

Miks Blogger Newsletter - универсальный E-mail шаблон для блогера

Новостной HTML + PSD Email шаблон

Бесплатный E-mail шаблон в зеленых тонах

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

Если говорить простым языком, email -маркетинг – это продуманная система рассылок писем по электронным адресам, находящимся в базе данных.

Основан этот вид маркетинга на шаблонах писем и страниц, которые встраиваются в письма.

Email-шаблоны бывают 2 видов:

• Обычные – это просто текстовое письмо из нескольких предложений с вложениями или без, редко с креативным форматированием. Такие шаблоны для электронных писем обычно используются в деловых переписках.

• Шаблоны html писем – яркие, предназначенные для привлечения внимания и создания заинтересованности веб-страницы, которые внедряются в письмо.

В чем преимущества и недостатки?

Начнем с обычных шаблонов.

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

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

Основные сервисы

Описывая основные сайты для email рассылки, есть смысл сравнить их по наиболее важным характеристикам.

1. UniSender .

Один из самых популярных русифицированных сервисов для создания email -рассылок. Доступны 3 редактора: для блочных шаблонов (текстовый и визуальный контент можно менять на свое усмотрение), для готовых базовых и шаблонов HTML , для работы с собственным HTML -шаблоном email письма. Разобраться в редакторах не сложно, система дает подсказки, а все необходимые инструменты находятся в верхней части рабочей страницы.

1. SendPulse

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

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

1. Rumailer

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

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

1. GetResponse

Сервис славится самым большим количеством доступных шаблонов в 24 категориях. Приятный интерфейс самого сайта дополняется понятным пользователям блочным редактором готовых и собственных HTML -шаблонов для писем клиентам.

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

Для того чтобы просмотреть шаблоны, необходимо начать работу с рассылкой, введя данные отправителя и тему письма, а затем выбрать кнопку «Блочный email конструктор». Если же пользователь хочет работать с собственным шаблоном, то выбирать нужно «Редактор HTML кода».

1. Mailerlite

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

Как выбрать подходящий шаблон html письма ?

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

Дополнительным ответом на вопрос «как узнать какой шаблон выбрать?» могла бы служить статистика по самым популярным сервисам. Могла бы, но скажем прямо, % открытия, переходов, кликов, отписок от сервиса практически не зависят. Единственное, что нами было отмечено, что например на СендПульсе (роскошные лимиты на бесплатности) несколько больший % попадания писем в папку “спам”, а не во входящие. А % ошибок, публикуемые самими сервисами, никто кроме них проконтролировать не сможет, разве что эмпирическим путём в единичных случаях.

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

Как узнать, какой шаблон email письма подойдет в каждом конкретном случае? Это можно сделать, только поработав с разными шаблонами, подобрав лучший дизайн и контент. Многие компании сначала используют готовые шаблоны, видоизменяя их, а после создают собственные. Это хороший вариант, если навыков написания html писем и страниц нет, а рассылка видится полезным инструментом.

Интернет-сервисы для бизнеса.
Ссылка на материал обязательна!