комментарии 09.01.2014 Татьяна Приходько @ Email маркетинг, Дизайн рассылки

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



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

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

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

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

Как создать html шаблон для email рассылки: пример 1

Чем же отличается email шаблон от сайта

Но все же email письмо хоть и является html страницей, похожей на ваш сайт, оно будет иметь некоторые отличия, накладываемые техническими требованиями:

  • Недопустимо использование больших фоновых изображений: у одной части получателей такой фон просто не будет виден, у другой — будет повторяться по ширине и высоте письма.  Вряд ли вы хотите именно этого.
  • В письмах нельзя использовать  javascript и подключаемый в хедере css — как следствие, в письмах не может быть слайдеров. Можно добиться подобного  эффекта при помощи анимированного .gif  изображения, но это значительно добавит «веса» вашему письму, да и не все почтовые клиенты воспринимают анимированные изображения. Часть из них покажет лишь первый слайд.
  • Лучше избегать больших изображений вообще, и, в частности, в хедере, только если вы не размещаете его туда специально (временная акция, на которую вы хотите обратить внимание получателя).  Например, большой  постоянный хедер может отвратить получателя, если он получает от вас раз за разом «одинаковые» письма, не долистывая до контента.
  • В шаблонах нельзя подключать нестандартные шрифты.  Если у получателя не окажется установленного  шрифта,  произойдет автоподмена и вы рискуете получить неожиданный результат в виде «полезшей» верстки.Как создать html шаблон для email рассылки: пример 2

Очень большое фоновое изображение — спорный вариант.

Как создать html шаблон для email рассылки: пример 3

Что писать?

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

  • Избегайте крайностей, контрастных цветов (например, ярко синего  #0000FF, ярко красного #FF0000,  желтого #FFFF00, зеленого  #00FF00  и так далее)
  • Избегайте текста набраного с использованием “CAPS LOCK”
  • Избегайте большого количества восклицательных знаков !!!!, как бы вам не хотелось выделить фразу таким образом.  В таких случаях для акцентирования лучше используйте жирный текст.
  • Избегайте злоупотреблять так называемыми  «call-to-action», призывами к действию, особенно в теме письма. Например «Выиграй миллион за один час»
  • Обязательно задавайте атрибуты ширины и высоты картинки, которые должны соответствовать фактическому размеру картинки.
Как создать html шаблон для email рассылки: пример 4

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

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

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

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

Click to enlarge

Письма и формы

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

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

Письма «по-модному»

Как создать html шаблон для email рассылки: пример 5

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

  • Используйте прехедер. Это информация, которая следует сразу за темой письма при отображении у получателя еще до его открытия. Частенько это просто alt атрибут вашего лого, или название компании, или, что самое страшное, ссылка отписки.  Не надо так. Обратите прехедер себе на пользу,  разместите вверху вашего письма расширенное содержание темы, к примеру.
  • Используйте одноколоночную верстку. Если вы хотите добавить актуальные новости в рассылку, сделайте это лучше внизу письма, не следует выводить параллельно основному контенту.
  • Предпочтительнее размещение по два товара в ряд, а не три и более, так как при масштабировании и пропорциональном уменьшении текста он останется более читабельным.
  • Используйте большие кнопки.  Не заставляйте получателя попадать по мелким ссылкам и в итоге плюнуть на эту затею.

Что же касается основных трендов 2017 года в оформлении письма, то одним из значимых станет – Mobile First.

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

Как действовать? Создавать адаптивные email шаблоны. Здесь стоит вспомнить о сервисах email рассылок, ведь они значительно преуспели в разработке встроенных редакторов, в которых можно заверстать письмо для всех типов устройств.

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

И конечно же помните, что мы всегда рады пойти навстречу заказчику в меру технических возможностей создаваемого продукта.  Приятных и продуктивных вам рассылок!

Хотите красиво оформленную рассылку — закажите себе оригинальные шаблоны email рассылок у наших дизайнеров.

 

Как создать html шаблон для email рассылки
голосов: 15, средняя оценка: 4.53

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

Статьи через 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 — при рвзсилках зависит от сервиса