Сервис Mailigen прошел проверку в Роскомнадзоре и полностью соответствует требованиям 152-ФЗ «О персональных данных»

Зачем нужен HTML-шаблон?

HTML-шаблон

Если при фразе «шаблон HTML-письма для рассылки» волосы встают дыбом от ужаса – текст для вас. Мы не заставим учить языки программирования и погружаться в тонкости верстки. Просто расскажем, что такое шаблон и почему все вокруг говорят о коде.

Что такое шаблон письма?

Шаблон email-рассылки – основа электронного письма. Это пустая форма письма, которую заполняют подходящими элементами – изображениями, текстом, кнопками с призывом к действию, ссылками на сайт и соцсети. Готовый шаблон выглядит так:

Готовый шаблон

Шаблон составляют один раз, но использовать его для создания писем можно бесконечно: макет остается тот же, а его наполняемость меняется.

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

Структура шаблона

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

Хедер

Шапка письма. Сюда компания ставит свой логотип, ссылки на главные разделы сайта или лендинги, иногда добавляет контакты для связи.

Хедер в email-рассылке зоомагазина Petshop.ru выглядит так:

Хедер

Компания вставила логотип, название, рекламный слоган, номер колл-центра и ссылки на разделы из каталога товаров.

Основная часть

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

Основная часть

Емкое письмо от фитнес-клуба: завлекающий текст, тематическая картинка. Один минус – нет кнопки с призывом к действию. Ее не стоит прятать в футер. Лучше поставить в основную часть.

Футер

Подвал письма. Здесь указывают юридический адрес отправителя, ссылки на соцсети и кнопку «отписаться от рассылки».

Футер

Это футер сервиса по продаже билетов Bileter.ru. Серый скучный фон, и зря. Попрощайтесь с подписчиками ярко, чтобы запомниться и оставить приятное впечатление. Продумайте дизайн, а текст составьте не из официально-деловой лексики, а понятных и душевных слов.

Виды шаблонов

Платформы для email-рассылок предлагают 3 варианта работы с шаблонами:

  • Готовый шаблон;
  • Блочный редактор;
  • Собственный HTML-шаблон.

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

В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».

предлагаемые шаблоны

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

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

  • Текст;
  • Видео;
  • Кнопка;
  • Заголовок;
  • RSS-контент;
  • Изображение;
  • Группы в соцсетях;
  • Шеринг в соцсетях;
  • Динамический контент;
  • Горизонтальный разделитель.

блочный редактор

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

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

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

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

Возможности HTML-шаблона

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

Зато если научиться «кодить», получится создать уникальные макеты email-рассылок. Плюс, при грамотно прописанном коде верстка письма будет правильно отображаться:

а) на устройствах с любой шириной экрана;
б) в любом браузере и любой почте.

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

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

Чтобы не разочароваться в возможностях HTML-верстки и сделать email-рассылку, которая откроется «без потерь», нужно использовать старые способы работы с кодом – те, что разработали в 1990-х годах.

Как верстать HTML-шаблон?

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

В коде обозначают и ширину письма. Оптимально – поставить 600 пикселей. Этот размер хорошо «подстраивается» под экраны разных диаметров.

Есть рекомендации и по размеру шрифта – 13 пикселей и больше. Меньше ставить не нужно, иначе на смартфоне шрифт будет мелким. Человек не сможет его прочитать.

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

Шрифты лучше использовать общепринятые: Arial, Times New Roman, Georgia, Tahoma и другие. Если вставите дизайнерский шрифт, есть риск, что он не отобразится у пользователя – это зависит от версии браузера и настроек почтовых программ. Тогда шрифт автоматически «переведут» в стандартный. Человек сможет прочитать текст, но, скорее всего, он съедет: ведь высота и ширина символов для каждого шрифта отличается.

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

Где сделать HTML-шаблон?

HTML-шаблон письма можно сделать на платформе для email-рассылок. Такая опция есть в Mailigen. Заходишь на платформу, кликаешь «Кампании – Шаблоны – Визуальный редактор».

html 1

Появляются два пустых поля. Левое – чтобы написать код. Правое – чтобы посмотреть, как выглядит письмо.

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

html 2

В написанном коде можем редактировать любые параметры: шрифт, выравнивание, размер баннера. Тогда и изображение письма изменится.

Бесплатные сервисы для работы с шаблонами

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

Stripo

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

Стрипо 1

Stripo предлагает 300 бесплатных готовых HTML-шаблонов, которые можно экспортировать на вашу платформу для email-рассылок. Код сохранится – вы сможете отредактировать его в любой момент и изменить внешний вид рассылки. Чтобы правок было меньше, выбирайте в Stripo тематические шаблоны – для промо-писем, welcome-серии, уведомлений, брошенной корзины.

Например, такой макет можно выбрать, чтобы сделать акционную рассылку в День Рождения пользователя:

стрипо 2

А такую для брошенной корзины магазина товаров для туризма:

стрипо 3

Litmus Templates

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

Такой макет Litmus предлагает для рассылки-квитанции:

квитанция

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

блог

В Litmus количество бесплатных HTML-шаблонов меньше, чем в Stripo, а дизайн не такой разнообразный. Для первых опытов подойдет, а профи уже будет скучно.

Behance

Платформа для дизайнеров, где можно выложить свою лучшую работу или вдохновиться шедеврами коллег со всего мира. У сервиса есть отдельный проект для email-маркетологов – Free Email Template. Смотрите яркие работы верстальщиков и дизайнеров и бесплатно скачивайте понравившиеся HTML-макеты.

бехансе

На чем остановимся?

Все шаблоны писем сделаны на основе HTML-кода. Уже готовые макеты в вашей платформе для рассылок тоже когда-то были написаны в HTML. Вопрос в том, как удобно собирать шаблоны именно вам – с помощью кода или блоков.

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

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

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

В остальных случаях про HTML можно не вспоминать: под рукой должен быть блочный редактор. В общем, составить шаблон письма самостоятельно – не такое уж сложное занятие.

 

Хочешь больше узнать про верстку? Нужен уникальный дизайн письма? Позвони или напиши на team@mailigen.ru.

Зачем нужен HTML-шаблон?