Содержание
- 1 Stripo
- 2 Каким должен быть шаблон письма
- 3 Дополнительная подготовка почтового шаблона
- 4 Mailigen
- 5 Figma
- 6 Конструкторы HTML-писем
- 7 Как верстать HTML-шаблон?
- 8 Antwort (1)
- 9 Виды шаблонов
- 10 MailChimp (130+)
- 11 Сервисы емейл-рассылки и готовые шаблоны html
- 12 Текст и содержимое письма для рассылки
- 13 Несколько популярных шаблонов
- 14 Стилизация текста
- 15 Сервис для быстрой верстки писем
- 16 Как использовать шаблон почтовой рассылки в сайте на 1С-Битрикс
Stripo
Плюсы:
- Удобный интерфейс – не будучи дизайнером, вы легко разберетесь в функционале: найдете блоки, загрузите картинки, вставите кнопки.
- Адаптивность – письмо не «съезжает» при просмотре со смартфона. Перед экспортом в рассыльщик вы сможете посмотреть, как оно выглядит в мобильной версии.
- Готовые шаблоны – их здесь +300. Пожалуй, это самый богатый сервис на готовые макеты. Грех не протестировать хоть один.
- Внутренний редактор – если не нравится картинка, которую хотите вставить в письмо, отредактируйте ее прямо в Stripo. Измените яркость или обрежьте фото.
- «Тяжелые» изображения – в Sripo можно загружать картинки до 2 МБ. Чтобы поставить изображение в письмо, не придется использовать сервисы, ужимающие вес картинки.
- Интеграция с Mailigen – готовое письмо в несколько кликов экспортируется в +30 почтовиков, включая нашу платформу.
Минусы:
- Нет блока RSS – если хотите автоматически подгружать контент с сайта, этот сервис вам не подойдет.
- Популярный сервис – Stripo классный, и им пользуются многие email-маркетологи. Но, как ни крути, набор инструментов у всех одинаковый, а значит письма конкурента могут оказаться похожими на ваши.
Пример:
Часть писем для своих клиентов команда Mailigen собирает в Stripo. С помощью этого сервиса мы сделали письма застройщику LEGENDA.
Письма с таким дизайном уходят покупателям Premium-квартир. Выглядит солидно и стильно. Черный фон, золотой шрифт в заголовках – это не просто прихоть нашего дизайнера. Оттенки в письме перекликаются с цветовой гаммой жилых комплексов, о которых мы говорим в рассылке.
Строгость, симметрия, гармония – все напоминает Ар деко в центральном парке Нью-Йорка. Именно в таком стиле построены дома LEGENDA – и дизайн письма этому соответствует.
Каким должен быть шаблон письма
При верстке документа, предназначенного для отправки корреспондентам, следует придерживаться следующих требований:
- Его следует сделать достаточно узким, т. е. по размерам оно должно не превышать диапазон 500-600 пикселей, что обеспечит корректное отображение текста и другого контента на устройствах любого типа.
- Нужно использовать достаточно крупный шрифт для всей текстовой информации, так как на iOS-устройствах HTML-письмо будет неудобно читать, если размер шрифта менее 13 пикселей.
- Элементы, по которым можно сделать клик, должны быть достаточно крупными и изолированными от ближайших ссылок. В таком случае адресат сможет легко их активировать с первой же попытки.
Дополнительная подготовка почтового шаблона
К этому моменту мы имеем HTML-верстку. Но она еще не готова к отправке.
Дело в том, что все стили оформления которые вы вносили (через редактор MailChimp-а или при самостоятельной верстке) сохранены в теге <style> внутри шаблона. Почтовые клиенты при получении письма и отображении его пользователю удалят такие стили. Сделано ли это из соображений безопасности или по другим причинам — не ясно.
Факт остается — все стили перед отображением будут удалены. А Microsoft Outlook еще и своих стилей добавит. В результате ваше письмо будет выглядеть безобразно. Вот пример сверстанной рассылки:
А вот так она отобразится в Outlook если отправить ее без дополнительной обработки:
Решение этой проблемы существует и называется оно “Инлайнер” (inliner). Это инструмент который специальным образом преобразовывает ваш HTML-шаблон. Для каждого элемента вашего шаблона он вычисляет перечень стилей, которые к нему (элементу) должны быть применены, и записывает их в атрибут style соответствующего HTML-тега. Такие стили уже не вырезаются и не перебиваются почтовиками.
Воспользоваться можно например вот этими инлайнерами:
-
http://zurb.com/ink/inliner.php
В результате вы получаете HTML-код, который можно отправлять через сайт. Этот код должен отображаться во всех почтовиках одинаково. Само собой, это нужно проверять.
Mailigen
Напомню: Mailigen – платформа для рассылок, а не сервис для дизайнеров. Оформлять письмо сразу на платформе для рассылок удобно, потому что вам не придется импортировать шаблоны с других сервисов. В случае со Stripo и Figma – придется.
Плюсы:
- Понятный функционал – никаких спрятанных функций. Просто создавайте рассылку шаг за шагом.
- Бесплатная техподдержка – что-то «сломалось», сервис завис? Напишите в чат техподдержки, вам помогут.
- + 100 шаблонов – выбирайте макеты писем для рассылки-открытки, промо, уведомлений и новостей. Вы найдете шаблон для любой цели.
- Внутренний редактор – вы сможете убрать «красные глаза», добавить яркость, сделать фото черно-белым, не выходя из платформы.
- RSS-блок – создавайте письмо, куда новости с вашего сайта или блога загружаются автоматически. При желании вы можете создать рассылку, состоящую только из RSS-элементов.
- Собственный дизайнер – если вы сомневаетесь в своих силах или не хотите тратить время на дизайн рассылки, закажите оформление писем в Mailigen у профессионального дизайнера.
Минусы:
Платная версия – визуальный и блочный редакторы доступны только тем, у кого есть аккаунт. Это значит, что вы не сможете бесплатно оформить письмо в Mailigen для его отправки через другой сервис.Идеальный вариант – оплатить аккаунт в Mailigen и получить доступ сразу ко всем функциям. Тогда вы сможете составлять шаблоны, сегментировать базу, вести рассылку и смотреть статистику по каждой отправке.
Пример:
Наша команда делает в Mailigen письма для ресторана восточной кухни. Пишем про новинки меню, акции и знакомим с фирменными блюдами.
Чистый шаблон на белом фоне. На контрасте легко разглядеть все блюда, о которых мы пишем.
Основа шаблона – 4 блока с текстом и фотографиями блюд. Все супы, напитки и десерты размещены на фоне узорчатого подноса в восточном стиле. Для атмосферы мы также поместили фото зелени и пряностей по краям макета. По-моему, аппетитно. А вы что думаете?
Figma
В отличие от Stripo, сервис предназначен не только для дизайна писем. Здесь можно создавать прототипы сайтов и приложений. И еще: сервис позиционирует себя как простой и удобный. На деле – придется чуть-чуть поразбираться.
Плюсы:
- Обучение для новичков – статьи, курсы и образовательные видео: все для вас. Если вы в дизайне ноль, посмотрите парочку уроков.
- Поддержка шрифтов для иконок – сервис поддерживает шрифты, с помощью которых вы сможете нарисовать иконки для письма.
- Декоративные элементы – инструмент «Текст» позволяет создавать логотипы, надписи и другие «буквенные» элементы, которые украсят письмо.
- Облачное хранение – все шаблоны хранятся в облаке. Вы сможете работать над макетом коллективно, а еще будете уверены, что все данные сохранены.
- Работа на Windows и MAC – и вы даже сможете собирать письмо через браузер! Невиданная щедрость!
Минусы:
- Англоязычный сервис – для Figma пока нет русской версии, и, что самое ужасное, нет программ-русификаторов. Разбираться в терминах дизайна придется на английском.
- Нет анимаций – в сервисе с таким мощным функционалом явно не хватает возможности делать гиф. А было бы удобно!
Пример:
Вердикт – сервис отличный. Сами делаем письма в Figma. Одно из них – для магазина ВелоДрайв.
Товарная подборка – формат письма, который можно превратить в смертную скуку, если не продумать оформление. Мы сделали рассылку в корпоративных цветах ВелоДрайв – голубом и оранжевом.
Для кнопок выбрали разные цвета. Те кнопки, переход по которым для нас важнее, сделали контрастнее. «Забронировать время» и «Перейти в каталог» заметно выделяются среди остальных элементов – на них падает взгляд. Чтобы товарная подборка не показалась скучной, добавили текст в начале и конце письма. Итог: получилось свежее, приятное, а главное – информативное письмо.
Конструкторы HTML-писем
Подавляющее большинство существующих на сегодняшний день средств для конструирования HTML-писем являются платными, но у них есть пробный период. Это следует учитывать заранее, так как использование подобных сервисов и программ будет нецелесообразным для отправки нескольких писем — по большей части, они ориентированы на массовую работу.
Mosaico
Единственный в рамках нашей статьи максимально доступный сервис, не требующий регистрации и предоставляющий удобный редактор писем. Весь принцип его работы раскрывается прямо на начальной странице сайта.
Процедура редактирования HTML-писем происходит в специальном редакторе и заключается в составлении дизайна из нескольких подготовленных блоков. При этом каждый элемент оформления можно изменить до неузнаваемости, что придаст вашим работам индивидуальности.
После создания шаблона письма получить его можно в виде файла формата HTML. Дальнейшее его использование будет зависеть от ваших целей.
Tilda
Онлайн-сервис Tilda является полноценным конструктором сайтов на платной основе, но предоставляется им и бесплатная пробная подписка на две недели. При этом непосредственно сам сайт создавать не нужно, достаточно зарегистрировать аккаунт и создать шаблон письма, используя стандартные заготовки.
Редактор писем содержит множество инструментов как для создания шаблона с нуля, так и для корректировки стандартных образцов.
Итоговый вариант разметки можно будет получить после публикации на специальной вкладке.
CogaSystem
Как и предыдущий онлайн-сервис, CogaSystem позволяет одновременно создавать HTML-шаблоны писем и организовывать рассылку на электронную почту, указанную вами. Во встроенном редакторе есть все необходимое для создания красочных почтовых рассылок с использованием веб-разметки.
GetResponse
Последним онлайн-сервисом в рамках настоящей статьи является GetResponse. Данный ресурс по большей части ориентирован на почтовые рассылки, а имеющийся в нем HTML-редактор является, скорее, дополнительным функционалом. Им можно воспользоваться как на бесплатной основе с целью проверки, так и путем приобретения подписки.
ePochta
Практически любая программа для почтовой рассылки на ПК обладает встроенным редактором HTML-писем по аналогии с рассмотренными онлайн-сервисами. Наиболее актуальным софтом является ePochta Mailer, содержащий большую часть функций почтовых сервисов и удобный редактор исходного кода.
Основное достоинство при этом сводится к возможности бесплатного использования HTML-конструктора, в то время как оплата необходима только для непосредственного создания рассылки.
Outlook
Outlook наверняка знаком большинству пользователей ОС Windows, так как входит в стандартный пакет офисных приложений от Microsoft. Это почтовый клиент, в котором имеется свой редактор HTML-сообщений, которые после создания можно будет отправить потенциальным адресатам.
Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.
Как верстать HTML-шаблон?
Для создания HTML-шаблона используют табличную верстку – ту самую из 1990-х. Код пишут в виде таблицы, в которую помещают множество других таблиц. В каждой таблице – информация о том, как выглядят элементы шаблона. Прописывают шрифт, кегль, цвет текста, вставляют сам текст, указывают размеры картинок, кнопок.
В коде обозначают и ширину письма. Оптимально – поставить 600 пикселей. Этот размер хорошо «подстраивается» под экраны разных диаметров.
Есть рекомендации и по размеру шрифта – 13 пикселей и больше. Меньше ставить не нужно, иначе на смартфоне шрифт будет мелким. Человек не сможет его прочитать.
В коде стоит прописать расстояние кнопок с призывом к действию от основного текста, изображений и других ссылок, сделать его больше. Решив нажать на кнопку «Купить» или «Перейти в каталог», человек должен кликнуть именно на ту ссылку, на которую хочет, а не попасть случайно на аккаунт в соцсети.
Шрифты лучше использовать общепринятые: Arial, Times New Roman, Georgia, Tahoma и другие. Если вставите дизайнерский шрифт, есть риск, что он не отобразится у пользователя – это зависит от версии браузера и настроек почтовых программ. Тогда шрифт автоматически «переведут» в стандартный. Человек сможет прочитать текст, но, скорее всего, он съедет: ведь высота и ширина символов для каждого шрифта отличается.
Antwort (1)
Antwort верит в отзывчивый дизайн. Согласно их философии, пользователи настольных компьютеров не должны недооценивать дизайн электронной почты с одним столбцом, который фактически предназначен для мобильных устройств.
Вместо этого они хотят, чтобы у вас был потрясающий дизайн электронной почты, который привлекателен для пользователей настольных компьютеров и мобильных пользователей. Проверьте их на гибкий дизайн электронной почты, который обслуживает всех пользователей, настраивается и имеет отличную поддержку среди разных почтовых клиентов.
Вот как выглядит шаблон Antwort в Outlook и мобильном устройстве:
Виды шаблонов
- Готовый шаблон;
- Блочный редактор;
- Собственный HTML-шаблон.
В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».
Блочный редактор. Это инструмент, благодаря которому создают шаблон из готовых блоков. Знания HTML-кода не нужны.В Mailigen есть 10 блоков, их можно переставлять местами, добавлять и удалять:
- Текст;
- Видео;
- Кнопка;
- Заголовок;
- RSS-контент;
- Изображение;
- Группы в соцсетях;
- Шеринг в соцсетях;
- Динамический контент;
- Горизонтальный разделитель.
В блочном редакторе вы сможете добавить кнопки и видео в основную часть или удалить шеринг в соцсетях в футере. В общем, комбинируйте блоки в шаблоне, как вам нужно, и создавайте удобное письмо.
Собственный HTML-шаблон. Это отдельный HTML-файл рассылки. Если ты не верстальщик и не программист, уже на этом этапе определение «HTML-файл» может вызвать ступор.
HTML – это стандартный язык программирования, который «понимают» все веб-страницы интернета. С помощью этого языка описывают разметку документов – то есть то, как документы выглядят на сайте.
MailChimp (130+)
В MailChimp вы можете найти более 130 бесплатных шаблонов электронной почты в библиотеке шаблонов, просто создав бесплатную учетную запись.
Когда вы становитесь подписчиком на MailChimp, вы можете мгновенно получить доступ к тоннам бесплатных шаблонов электронной почты в своей собственной электронной библиотеке. На выбор можно выбрать несколько категорий шаблонов, включая электронную коммерцию, события, праздничные дни, информационные бюллетени и уведомления.
Для тех, кто просто ищет базовые шаблоны, MailChimp также имеет более 20 на выбор. Однако, если вы не используете MailChimp в качестве ESP, важно отметить, что вам может быть сложно экспортировать HTML-код вашего шаблона в ESP по вашему выбору
Сервисы емейл-рассылки и готовые шаблоны html
С помощью сервисов, которые предлагают уже готовые эскизы, вы имеете возможность сделать оригинальную и запоминающуюся рассылку писем. Шаблон рассылки — это уже готовый макет письма, в котором можно редактировать текст, изображения, добавлять анимацию и логотип. Лидерами предоставления таких услуг являются: Sendpulse, Unisender и Notisend.
Так, сайт Sendpulse предлагает более 130 высококачественных бесплатных шаблонов, которые можно изменять по своему желанию. Достаточно прост в использовании, поэтому подходит практически всем.
При этом, пользователи сайта выделяют ряд недостатков в использовании, таких как долгая модерация, слабая техподдержка, а также наличие ссылки на сайт в отправляемых письмах для бесплатной версии.
- отправки писем по расписанию;
- автоматические серии писем;
- редактор писем – письма автоматически адаптируются под любые устройства и размер мониторов;
- персонализация (целевое письмо для каждого получателя) и многое другое.
Этот сервис считается лидером по минималистичности функций и дизайна. Количество готовых шаблонов превышает 150 штук, при этом все они достаточно высокого качества и имеют разнообразный дизайн. При всем этом, пользователи практически не отмечают недостатков в работе поставщика услуг.
Кроме того, можно обратить свое внимание на сервисы Mailerlite и Getresponse. Каждый из них предлагает большое разнообразие готовых шаблонов, конструкторов писем, а также ряд других возможностей, которые помогут вам в развитии бизнеса
Вы сами определяете и выбираете для себя необходимый дизайн рассылки. Основным плюсом использования таких ресурсов является качественное повышение эффективности рассылки писем, и при этом значительная экономия своего времени.
Текст и содержимое письма для рассылки
Я уже упомянул, что текст письма должен быть удобочитаемым и его не должно быть слишком много. Но одного текста мало. Обязательно нужно использовать и графику, при этом она не должна много весить и отвлекать читателя от основного текста. Неплохим вариантом будет размещение кнопок соц. сетей в письме, чтобы пользователь мог при необходимости поделиться или связаться с автором рассылки через аккаунт соц. сети.
Верстка писем для рассылки
На любом сервисе рассылки можно загрузить свой сверстанный шаблон письма или выбрать из готовых и переделать его под себя.
Я предлагаю вам свой HTML шаблон письма для рассылки. Вам останется только добавить свои изображения и изменить цвета.
<table border="1" width="360" align="center" cellpadding="20" cellspacing="4" bgcolor="ffffff"> <tr> <td> <a href="http://site.ru"><img src="Ссылка на логотип"></a> <p><div align="center"><div style="font-family: Georgia; color: #202B3D"><b><font size="+1">Заголовок письма</font></b></div></div></p> <p><div style="margin-left: 25px; margin-right: 25px; margin-top: 30px; text-align: justify">Текст письма <p><div align="right"><a href="ссылка на страницу, куда должно перекинуть пользователя"><b>Перейти на сайт =>></b></a></div> <p>_______________________________</p> <p><b>Ваше имя</b><br> <b>Сайт:</b> <a href="Ссылка на сайт">анкор ссылки</a> </div> </tr> </td> </table>
Чтобы вам удобно было редактировать код, вот небольшая подсказка:
Цвет фона — bgcolor=«ffffff»Цвет заголовка — color: #202B3DШирина письма — width=«360»
Несколько популярных шаблонов
Использование фреймворка помогает значительно ускорить процесс создания письма и сделать его более доступным для разработчика, который только еще постигает азы создания веб-документов. Наиболее популярными шаблонами являются:
- Cerberus. Этот набор так называемых отзывчивых шаблонов позволяет создавать письма, нормально отображаемые как в мобильном приложении Gmail, так и в Outlook. Он позволяет использовать блоки HTML-кода либо по отдельности, либо объединяя их.
- Ink — это заготовка писем, рассылки которых практически универсальны и совместимы с любыми устройствами и клиентами.
- Really simple HTML email template. Шаблон позволяет создавать рассылочные письма очень просто и быстро. Правда, у них будет крайне простой дизайн в виде одного столбца, в котором заключен призыв к действию.
Стилизация текста
Наша первая строка — это заголовок. Будем использовать тег , чтобы сделать текст жирным, потому, что, как мы знаем, если есть возможность стилизовать в HTML, используем это, вместо CSS свойств.
Также добавим эти стили ко всем другим ячейкам текста:
Далее нам нужно стилизовать текст футера и, кроме этого, приведём в порядок ссылку откказа от рассылки. Стилизуем ссылку используя одновременно CSS и HTML тег . Дублирование тегов — это лучший способ убедиться, что Ваши ссылки не будут отображаются синим по умолчанию.
И вот оно! Всё готово! Время, чтобы выключить границы и увидеть, как всё красиво выглядит. Пройдитесь по коду и замените каждое на
Сейчас всё выглядит немного грустно, плавает в белом пространстве,
так что давайте вернёмся к нашей первой ширине 600px и добавим:
И это всё! Мы готовы к финальному тесту.
Взгляните онлайн
Сервис для быстрой верстки писем
Чтобы начать работать с сайтом нужно перейти и нажать на эту кнопку.
Следующая страница, которая откроется, это блочный редактор. Каждый элемент здесь можно выбрать, откроются инструменты, как у Ворда: изменить цвет текста, размер шрифта и так далее, когда изменения внесены, нажимаем готово.
Щелкнув “готово” появится вкладка “контент” с блоками. Используя эту панель, пользователь может добавлять картинки, кнопки, таблицы и многое другое. Интерфейс интуитивно понятный. Завершив редактирование, нажимаем на зеленую кнопочку в углу экрана “Далее”. Появится сообщение “html генерируется”, ждем отсчет времени. Потом появится сгенерированный cod рассылки и его можно скопировать и вставить в файл. Размер кода, достаточно большой несколько десятков килобайт.
На сегодняшний день можно создать письмо с помощью разных генераторов. Лично я использую для рассылку SendPulse где все также просто и понятно а владельцу надо просто редактировать текст и поменять картинки.
Далее, нажав на замок, вы сможете скачать все исходники шаблона письма, который описывался в уроке:
В этой статье вы узнали, как верстать html письма. Вы можете выбрать разработку вручную, прописывая каждый тэг или произвести генерацию автоматически, с помощью онлайн сервиса. Решайте сами, какой вариант больше подходит. Чтобы лучше разобраться в создании шаблона скачайте исходный код. Также, советую почитать пост про создание формы обратной связи в хтмл.
Не забываем поставить лайк и поделиться статьей. Всех благ.
Как использовать шаблон почтовой рассылки в сайте на 1С-Битрикс
Возможны следующие сценарии:
-
Сделать все исходящие уведомления сайта красивыми
-
Сделать красивую рассылку по базе подписчиков
Красивые уведомления с сайта
Если на вашем сайте пользователи регистрируются, заполняют формы обратной связи или оформляют заказы — сайт частенько отправляет им письма. “Взрослые” (в смысле “сложившиеся”) компании обычно хотят, чтобы даже такие уведомления были красивыми и придерживались брендбука.
Реализовать этот сценарий можно используя новый функционал 1С-Битрикс — “Темы оформления”. Темы оформления позволяют добавлять “шапки” и “подвалы” к шаблонам исходящих писем.
Полученный ранее почтовый шаблон нужно разделить на 3 части: шапку, контентную часть и подвал. Шапку и подвал нужно сохранить в тему оформления.
Контентную часть нужно поместить в шаблон почтового уведомления. И вот тут возникает сложность: “проинлайненный” шаблон письма настолько громоздок, что применение этой верстки даже к одному уведомлению требует много времени (от десятков минут до нескольких часов) и нервов.
Простой шаблон
превращается в очень громоздкий и трудноподдерживаемый.
На скриншоте ниже уместилось только отображение одной строчки из скриншота выше.
А представьте сколько работы потребуется если вы захотите изменить цвет кнопок, например.
Есть выход и из этой проблемы, о нем я расскажу в следующей статье.
Красивая рассылка по базе подписчиков
Все относительно просто, если ваша рассылка разовая и вы не собираетесь ее редактировать. При создании рассылки нужно выбрать “Пустой шаблон” и вставить туда полученный ранее (после инлайнера) шаблон почтовой рассылки. На этом все, если рассылка у вас единичная.
Если же ваш шаблон это только шаблон, а содержание вы хотите редактировать — возникает проблема. “В лоб” она решается только большим количеством ручного труда (на подготовку сниппетов). Однако мы придумали и умное решение.