Как верстать email письма

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 части: шапку, контентную часть и подвал. Шапку и подвал нужно сохранить в тему оформления.

Контентную часть нужно поместить в шаблон почтового уведомления. И вот тут возникает сложность: “проинлайненный” шаблон письма настолько громоздок, что применение этой верстки даже к одному уведомлению требует много времени (от десятков минут до нескольких часов) и нервов.

Простой шаблон

превращается в очень громоздкий и трудноподдерживаемый.

На скриншоте ниже уместилось только отображение одной строчки из скриншота выше.

А представьте сколько работы потребуется если вы захотите изменить цвет кнопок, например.

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

Красивая рассылка по базе подписчиков

Все относительно просто, если ваша рассылка разовая и вы не собираетесь ее редактировать. При создании рассылки нужно выбрать “Пустой шаблон” и вставить туда полученный ранее (после инлайнера) шаблон почтовой рассылки. На этом все, если рассылка у вас единичная.

Если же ваш шаблон это только шаблон, а содержание вы хотите редактировать — возникает проблема. “В лоб” она решается только большим количеством ручного труда (на подготовку сниппетов). Однако мы придумали и умное решение.