комментарии @ Email маркетинг, Дизайн рассылки

Как создать html шаблон для email рассылки (Updated)



Обновлено:

html шаблон email

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

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

Email-шаблон – это продолжение вашего сайта

Он предназначен для узнаваемости, поэтому должен наследовать (но не дублировать) стилистику сайта. Используйте ту же цветовую гамму, шрифт. Стиль должен четко отслеживаться.

Как создать html шаблон

 

html шаблон для email

И сайт, и рассылка Coral Travel оформлены в едином стиле. Есть узнаваемый логотип, основной цвет — синий. Шрифт и там, и там без засечек.

Советы по созданию html-шаблона

Несколько рекомендаций о том, как сделать html-шаблон письма:

  • Нежелательно подключать нестандартные шрифты. Если у получателя не окажется установленного шрифта, произойдет автоподмена, и вы рискуете получить неожиданный результат в виде поехавшей верстки. Список “безопасных” шрифтов, которые корректно отображаются всеми без исключения почтовыми клиентами: Arial, Arial Black, Bookman Old Style, Comic Sans MS, Courier, Courier New, Garamond, Georgia, Impact, MS Sans Serif, MS Serif, Tahoma, Times New Roman, Trebuchet MS, Verdana.
    Как сделать html шаблон
    Текст набран простым классическим шрифтом, который точно правильно отобразится у всех пользователей
  • Не каждую дизайнерскую задумку, применимую к сайту, можно реализовать для письма. К примеру, невозможно наложить элементы друг на друга или сделать анимацию на кнопке.
  • Оптимальная ширина письма — 600 пикселей. Если она будет больше, то на некоторых устройствах может появиться горизонтальная полоса прокрутки. Это сильно испортит вид и юзабилити письма.
  • Правильная структура. Классическое письмо состоит из таких частей: прехедер, хедер (шапка), тело, футер (подвал).
    Советы по созданию html шаблона
    Письмо с классической структурой
  • Лучше применять технологию верстки блоками. Верстка таблицами считается устаревшим решением.
  • Разместите в прехедере название вашего бренда или логотип. Также можно вшить ссылку для быстрого перехода на ваш сайт.
    html шаблон email
    Название магазина в прехедере письма
  • В конце первого экрана обязательно расположите кнопку с призывом к действию.
    html шаблон советы по созданию
    В конце первого экрана расположена кнопка с надписью “Discover the list” — “Ознакомиться со списком”. При нажатии пользователь попадет на страницу, на которой представлен ассортимент.
  • Единственный вариант анимации в письме — GIF. CSS- и Flash-анимации не поддерживаются. Продумайте анимацию так, чтобы первый ее слайд был наиболее информативным. Если она не загрузится полностью (например, при медленном интернете), то получатель увидит только первую картинку.
  • Нельзя скомпоновать e-mail только из изображений. Текст — обязательная составляющая. Иначе письмо улетит в “Спам”.
Читайте также:  Блог как метод продвижения

Что писать?

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

  • Избегайте крайностей, контрастных цветов (например, ярко-синего #0000FF, ярко-красного #FF0000, желтого #FFFF00, зеленого #00FF00 и так далее)
  • Не набирайте текст с использованием “CAPS LOCK”
  • Избегайте большого количества восклицательных знаков !!!!, как бы вам ни хотелось выделить фразу таким образом. В таких случаях для акцентирования лучше используйте жирный текст либо курсив.
  • Не злоупотребляйте призывами к действию, особенно в теме письма. Не создавайте обещаний, далеких от реальности. Например, “Заработай миллион за 1 час”.
  • Обязательно задавайте атрибуты ширины и высоты картинки, которые соответствуют фактическому ее размеру.

Неужели это на один раз?

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

А давайте добавим видео

Еще раз хотим обратить внимание на то, что в письмах нельзя использовать javascript, а также iframe. Если вы хотите добавить видео – используйте превью, обернутое в ссылку.

видео в html шаблоне

При нажатии на кнопку Play человек попадает на видео на вашем Ютуб канале

Комфорт получателя превыше всего

Как корпоративная, так и личная почта все чаще просматривается получателями на экранах мобильных устройств. А это значит, что, во-первых, html-шаблоны должны быть адаптивными, а, во-вторых, суть письма должна быть представлена в первых 27-41 символах. Именно это количество символов видит получатель на экране смартфона в первые секунды открытия письма.

Читайте также:  Маркетинговый взгляд на веб-дизайн

Кроме того, чтобы email выглядел одинаково хорошо на любом устройстве, используйте такие приемы:

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

Адаптированный html шаблон для email рассылки

Адаптированный под все размеры экранов шаблон для email рассылки

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

html шаблоны epochta

Также мы предлагаем шаблоны, встроенные в саму программу. Чтобы найти их, запустите ePochta Mailer. Нажмите Файл – Новое сообщение из шаблонов. Дальше вы можете выбрать любой шаблон из списка:

html шаблоны epochta mailer

Приятных и продуктивных вам рассылок!

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Загрузка...

Теперь подписаться на свежие статьи и новости стало еще проще:

Статьи через RSS
Статьи на почту:
  • http://umnoe-prodvizhenie-sajtov.tumblr.com/ Олег

    Такие красочные письма и читать приятнее.

  • http://kievlady.com/ KievLady

    Очень круто! Так оформлять письма залог успешного бизнеса. И адаптация писем хорошая идея!

  • http://gamespro-portal.do.am/ dielf

    Правильное оформление письма один из залогов успехов! но всеже,основа письма,то что внутри,всегда важнее!

  • http://motors86.ru/ Марат

    Натолкнуло на мысль создать шаблон для своей почты, отличная идея сделать в стилистике сайта , и как раньше не думал об этом , спасибо :)

  • http://gidro-step.ru gidro-step

    Всегда встречают по одежке. Если правильно составлен заголовок, то будет интересна и суть письма

    • http://newpaket.com.ua/ Виталик

      100% правда!

    • http://www.supportblog.ru Дмитрий Геннадьевич

      Полностью с Вами согласен . Заголовок должен обязательно привлеч к себе внимание .

  • http://motors86.ru/ Марат

    Кто может подсказать какими инструментами можно сделать шаблон корпоративного письма?

    • Светлана Землянкина

      Компания АтомПарк предлагает разработку шаблонов писем http://www.epochta.ru/templates/

    • http://www.dveri-barier-spb.ru/ Входные двери СПб

      adobe illustrator и для него полно шаблонов-современное корпоративное письмо, рекламный буклет коммерческое предложение, делаются на ура, получается красиво и информативно

    • http://zakonipravo.hav.by/ Alexander

      HTML-шаблон можно сделать любым HTML-редактором

  • vikintimi.ru

    Главное привлекательный заголовок

  • Штиф Васлер

    А как вообще html шаблон впилить в письмо? Не пойму вот этого..Допустим сверстал я шаблон, и что дальше, как его использовать в письме?

    • Svetlana Zemliankina

      Если вы используете наш сервис, то на втором этапе создания письма вам будет предложено или импортировать шаблон или создать свой с помощью конструктора. Так же и с программой — шаблон можно импортировать.

    • http://kutok.biz/ Yuriy Iluchek

      в клиенте создаете новое письмо, вставка html — при рвзсилках зависит от сервиса