Как верстать html письма: пошаговое руководство с примерами + исходники шаблона письма для скачивания

Шаблон письма для рассылки почты за 5 минут и бесплатно

Лично я использую для своей подписки сервис рассылок писем smartresponder с привязкой к красивой форме подписки готовый дизайн которой я выложил за символическую сумму в этом разделе. Так как покупать дизайн такой формы будет стоит около 2000-3000 рублей, а тут вы получает все бесплатно и настраиваете сами.

Что самое интересное так это то, что в системе имеется встроенный редактор html писем где нам предлагают воспользоваться готовыми шаблонами или же можно просто вставить свой готовый код.

Лично мне надоели такие шаблоны, и я решил сделать более интересный и привлекательный дизайн

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

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

Вот этот контейнер со всем содержимым копируем и вставляем в свой текстовый редактор.

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

Меняем пути в следующих строках в который имеется url на мой блог:

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

1. Путь ведущий к замене шапки письма (загружена из раздела файлы почтовика, можно, как и далее прописать путь картинки на своем сайте) – <img alt=”” height=”101″ src=”cid: lot1.png” width=”598″ /> </td>
2. Картинка заднего фона письма – style=”background-image:url(‘https://firelinks.ru/images/maelbg.jpg’)

Я приложу пример своего письма в конце статьи и картинки которые вам просто нужно наложить поверх моих, чтобы их заменить и ваши, и красивое письмо будет готово к отправке вашим подписчикам на которое непременно обратят внимание

Вот основные преимущества использования красочных html писем для почтовой рассылки:

• Узнаваемость вашего бренда;
• Улучшение конверсии блога и сайта компании в целом;
• Увеличение продаж и направления клиентов напрямую в нужные разделы или акции.

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

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

Вопросы и ответы, которые могут возникнуть при установке:

• Если не отображаются картинки в письме, то ищите проблему в пути к картинкам путь должен начинаться с вашего домена если вы част картинок грузить с корня сайта (бэкграунд и шапку с футером);
• Загружать картинки письма можно на сервис смартреспондер в раздел «файлы» своего аккаунта и в нужное место выбирать их отображение в свойствах картинки;
• Шаблон можно скопировать с любого письма вплоть до полной копии, главное иметь свои картинки;
• Можно в корень хостинга загрузить готовый шаблон в виде одностаничника и просто код страницы вставлять в рассылку.

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

{loadposition sociallock}

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

Бесплатные и премиальные шаблоны информационных бюллетеней

Бесплатные шаблоны электронных писем для информационных бюллетеней имеют все необходимое для успеха вашего онлайн-продвижения и все необходимое, чтобы они выглядели профессионально. Вы можете не тратить деньги и узнать, как создать фантастическую кампанию по электронной почте со всеми необходимыми функциями. Хотя, когда дело доходит до коммерческого использования, мы настоятельно рекомендуем вам использовать шаблоны премиум-класса. Они предоставляют вам макеты и шаблоны из предварительно созданных MailChimp и Campaign Monitor. Каждый шаблон включает руководства пользователя, а также совместимость со всеми браузерами. Вы также получаете бесплатную пожизненную техническую поддержку 24/7. Ознакомьтесь с галереей шаблонов премиум-рассылки TemplateMonster.

Как редактировать бесплатные шаблоны информационных бюллетеней и электронных писем?

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

Как мне начать использовать бесплатные шаблоны информационных бюллетеней?

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

Есть ли у Google шаблон информационного бюллетеня?

Да, это так. Чтобы создать информационный бюллетень Google, перейдите в Документы Google Нажмите «Информационный бюллетень» Внесите изменения в дизайн Нажмите «Копировать» Откройте свой Gmail Вставьте в электронную почту “Нажмите« Отправить ». Управляйте своим списком рассылки, чтобы классифицировать клиентов для правильного таргетинга.

Как выбрать лучший бесплатный шаблон для рассылки новостей?

Убедитесь, что в нем есть очень четкие и ориентированные на клиента блоки контента, где вы можете выделить важные разделы. Все бесплатные шаблоны информационных бюллетеней должны быть хорошо структурированы и оптимизированы для SEO. Проверьте совместимость с популярными почтовыми клиентами, такими как Gmail, Yahoo, Outlook, Mail.ru и другими. В TemplateMonster вы можете найти очень профессиональные, индивидуализированные и бесплатные шаблоны электронных писем для информационных бюллетеней. Они идеально подходят для таких предприятий, как туристические агентства, недвижимость, мода, пищевая промышленность, финансовые услуги и любые другие онлайн-предложения.

Есть ли в Word шаблон информационного бюллетеня?

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

ESP — почтовые сервисы рассылок со встроенным конструктором шаблонов

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

SendPulse

Стоимость

Цена зависит от размера базы: бесплатно можно отправить до 15 тысяч писем на базу до 500 человек. Неограниченное количество писем для базы до 500 человек — 510 рублей в месяц, до тысячи подписчиков — 750 рублей в месяц, с увеличением базы цена растет.

Возможности

• Настройка цепочек писем из e-mail, SMS, отправка push-уведомлений, настройка чат-ботов и рассылок в мессенджерах.
• Создание рассылки в блочном редакторе без необходимости знания HTML.
• Редактирование дизайнерских шаблонов из каталога.
• Добавление кнопки для быстрой оплаты в e-mail шаблон.
• Предпросмотр писем в десктопном и мобильном виде.
• Бесплатный хостинг для хранения картинок.

• Отправка транзакционных писем о подтверждении регистрации или бронирования, уведомления о статусе заказа через шлюз SMTP.
• Персонализация писем: подстановка имени и других данных.
• Создание форм подписок для сбора базы.
• Интеграция с CMS и другим софтом.

GetResponse

Стоимость

Цена зависит от размера базы и выбранного тарифа. В базовом тарифе за рассылку по базе из тысячи подписчиков нужно будет платить 15$ в месяц, за базу из 50 тысяч — 250$.

Возможности

• Составление писем на базе дизайнерских шаблонов в блочном редакторе без знания HTML-кода.
• Предпросмотр писем в десктопном и мобильном варианте.
• Добавление GIF и бесплатных картинок со стоков.

• Персонализация писем на основе данных о подписчиках: вставка имени и динамического контента, сегментирование аудитории для разных рассылок.
• Подбор идеального времени для рассылки.
• Тестирование тем писем, анализ взаимодействий.
• Создание автоматических цепочек писем.

Mailchimp

Стоимость

Бесплатно для базы до 2000 подписчиков.

Платные тарифы начинаются от 9.99$ в месяц. Можно выбрать оплату за письма, а не месяцы, если отправляете письма не регулярно.

Возможности

• Создание электронных писем, лендингов, рекламных объявлений.
• Создание писем с нуля в редакторе HTML или работа с готовыми шаблонами.

• Отправка автоматических транзакционных писем.
• Персонализация писем с помощью подстановки значений.
• Анализ вовлеченности аудитории, кликов и покупок с помощью встроенных панелей мониторинга и API.
• A/B-тестирование писем для выявления самого конверсионного варианта.

Campaign Monitor

Стоимость

Платные тарифы начинаются от 9$ в месяц.

Возможности

Создание писем в визуальном конструкторе без знания HTML, есть готовые шаблоны в каталоге.

• Создание автоматических цепочек писем.
• Подстановка имени для персонализации писем.
• Анализ взаимодействия пользователей с рассылкой.
• Сегментирование клиентов на основе анализа данных о них.
• Интеграция с платформами электронной коммерции и CRM.

Dotdigital

Стоимость

Цену придется узнавать индивидуально.

Возможности

• Реализация кампаний многоканального маркетинга: рассылка с помощью e-mail, SMS, сообщений в соцсетях и push-уведомлений.
• Создание писем в визуальном редакторе на основе шаблонов из каталога.
• Персонализация писем с помощью заполнения имени и вставки динамического контента.

Стоимость

Рассылка по 100 адресам бесплатна. Есть тарифы с оплатой по количеству писем или по размеру базы подписчиков, тогда число писем не ограничено.

Возможности

Создание HTML-письма в блочном редакторе на основе готовых шаблонов или самостоятельно.

• Просмотр макета письма и тестирование.
• Сегментирование адресной базы.
• Чистка базы от несуществующих адресов.
• Персонализация писем по имени пользователя.
• Создание автоматических рассылок.
• A/B-тестирование писем для выбора лучшего варианта.

Шаблон #3: e-mail рассылка «Сопровождение Продукта / Контента»

Зачем Вам Это Нужно:

Как и любые электронные письма, она обычно инициируется каким-либо событием (например, регистрация по электронной почте или отправка формы с сайта).

После этого события серия писем отправляется на основе указанных интересов, просмотра или истории покупок, или поисков.

Это блестящая система, которая способствовала невероятному успеху он-лайн рынка.

Этот путь копируется многими более мелкими предприятиями он-лайн продаж по всему миру.

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

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

Вы можете сделать это, сегментируя свой список электронной почты на основе поведения пользователя

Если вы продаете on-line ассортимент товаров, неплохо отправлять рекомендации на основе персонализированной истории.

B2B, скорее всего, будет рассылать новости и сообщения – свои статьи, подборки лучших статей из сети  на основе интересов своей аудитории.

Пример от автора:

«Каждую неделю я отправляю еженедельный бюллетень, который содержит последние новости отрасли, а также любые сообщения в блоге, которые я написал за неделю.»

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

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

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

• Сегментируйте свою аудиторию на основе поведения или конкретных интересов
• Установите график рассылки. Пользователи должны знать, когда ожидать от вас сообщений — каждую неделю или месяц
• Используйте тактику персонализации, например, имена в строках «от» и «отправить»
• Не включайте слишком много информации. Просмотрите основные моменты и используйте ссылки на любые более крупные или более глубокие части информации
• Следуйте за лидерами отрасли, чтобы найти самые актуальные новости

Верстка HTML-писем

Шаблоны HTML-писем

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

1. Универсальный, простой отзывчивый шаблон электронной почты.
2. Litmus.com — можно найти отличные бесплатные адаптивные шаблоны под разные нужды.
3. Отзывчивые транзакционные HTML шаблоны электронной почты.
4. Cerberus — хорошая подборка адаптивных шаблонов.
5. Responsiveemailpatterns.com — коллекция шаблонов и модулей для адаптивных писем.

Советую не начинать с чистого листа, а присмотреться к какому-нибудь шаблону и постепенно делать из него что-то уникально и красивое.

Базовые правила верстки HTML-писем

1.  вместо . Используя табличную верстку, вы избежите множества проблем с некорректным отображением вашего письма в разных почтовых клиента и браузерах. Табличная верстка правила в интернете долгое время благодаря корректному отображению в разных браузерах и большому числу параметров управляющих видом таблиц.
2. Используйте универсальные атрибуты HTML-тегов и универсальные CSS-свойства.
   • вместо ,
   • вместо ,
   • CSS2 вместо CSS3,
   • HTML4 вместо HTML5,
   • вместо ,
   • HTML-атрибуты вместо CSS.
3. Встроенные (Inline) CSS вместо внешних .css файлов. Конечно, верстать такое не очень удобно, возникают сложности с проверкой и корректировкой кода. Но, на наше счастье, существуют сервисы по автоматическому переводу всех стилей во встроенные.
   • Premailer.io
   • inlinestyler.torchbox.com

   Пример встроенного стиля

4. Ширину всего документа в 600px. Это обезопасит ваших читателей от горизонтальной прокрутки. Вместо этого можно сделать письмо адаптивным.
5. Задавайте таблицам атрибуты .
6. Лучше всего использовать стандартные шрифты (Helvetica, Arial) имеющиеся на любом устройстве.

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

Странные отступы 

Для организации отступов можно использовать пустые конструкции и 

Для вертикального отступа:

<div style="height: 10px; font-size: 10px; line-height: 11px;">&nbsp;</div>

Для горизонтального отступа:

<td width="23" style="width: 23px; max-width: 23px; min-width: 23px;">&nbsp;</td>

Но также можно применить padding к ячейке таблицы:

<td style="padding: 23px;"></td>

Верстка кнопок для HTML-писем

И тут тоже есть свои подводные камни. Обычным способом, к сожалению, кнопку не сделать, почтовый клиент может не принять такой код и вырежет его. Я нашёл два решения этой проблемы.

Первое решение завязано на хитром использовании все тех же таблиц. Выглядит красиво и адаптивно.

Показать / Скрыть пример

See the Pen Кнопки 1 by Ivanov Klim on CodePen.

Второе решение завязано на использовании Vector Markup Language (VML)— языка векторной разметки. На сайте buttons.cm можно самостоятельно сделать кнопку на этом языке.

Показать / Скрыть пример

See the Pen Кнопка 2 by Ivanov Klim on CodePen.

HTML-письма, фоновое изображение

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

Показать / Скрыть пример

See the Pen Письмо странным людям by Ivanov Klim (@DreamerKlim) on CodePen.

Создание верстки почтового шаблона

С помощью конструктора

Для этого способа рекомендую использовать сервис MailChimp. Его полезной особенностью является бесплатный и весьма удобный редактор шаблонов писем. Он работает по принципу Drag&Drop. Вы просто накидываете блоки, редактируете текст и картинки.

Самое главное — не нужно изучать HTML, а значит не нужно привлекать верстальщика/программиста.

После того как вы сконструировали свой шаблон письма — сохраните его.

Далее перейдите в список шаблонов и получите HTML-код.

Этот код и есть наша цель.

С помощью специальной библиотеки

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

Можно провести параллель с версткой сайта. На что тратится много времени? Конечно же на поддержку разных браузеров (чаще всего старых).

Этот способ следует выбирать если:

• возможностей конструктора не хватило (какой-то блок нужно подвинуть, а он не двигается);

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

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

• http://zurb.com/ink/ (мы сами выбрали именно ее)

Это своего рода набор заготовок и правил. Используя их, вы (а точнее ваш верстальщик) сэкономите десятки часов.

3 Рассылки, которые вам надо делать (помимо регулярной)

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

Вы наверняка хорошо знакомы со стандартными электронными рассылками. Более-менее регулярная рассылка производится раз в неделю (или месяц) всему списку ваших подписчиков. Это эффективно, но в определенной степени.

Если вы только ограничиваетесь еженедельной или ежемесячной рассылкой, вы скорее всего оставляете деньги на столе. Сообщения по сценарию могут повысить эффективность на 600%, в соответствии с исследованием маркетинговой фирмы Gartner.

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

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

1. Приветствие

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

2. Благодарность за покупку

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

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

Продолжение общения после покупки также дает возможность дополнительных продаж; либо вы можете попросить нового клиента рекомендовать вас друзьям, семье или коллегам.

3. Письмо бывшему клиенту

По прошествии времени мы все неминуемо теряем покупателей или клиентов. К сожалению, это неизбежно.

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

Шаблон #5: e-mail рассылка для повторного вовлечения подписчиков

Зачем Вам Это Нужно:

Это неизбежно, что вы потеряете некоторое количество подписчиков

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

Важное правило: всегда проще (и дешевле) сохранить существующих клиентов, чем найти новых. И 71% маркетологов оценивают кампании повторного вовлечения как эффективные

А это значит, что теперь ты должен найти способ заставить этих людей снова открыть ваше послание.

И лучший способ это сделать — юмор и/или эмоции.

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

Здесь очень помогает персонализация, а также убийственный заголовок и динамический контент (жирные изображения, GIF-файлы и т. д.)

В Компании Dropbox уже давно установили стандарт для подобных писем:

Они делают короткое послание забавным и беззаботным, используют соответствующие иллюстрации

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

Пример от Urban Outfitters.:

Их целевая аудитория — миллениалы и молодые покупатели.

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

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

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

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

Каким должен быть шаблон письма

При верстке документа, предназначенного для отправки корреспондентам, следует придерживаться следующих требований:

• Его следует сделать достаточно узким, т. е. по размерам оно должно не превышать диапазон 500-600 пикселей, что обеспечит корректное отображение текста и другого контента на устройствах любого типа.
• Нужно использовать достаточно крупный шрифт для всей текстовой информации, так как на iOS-устройствах HTML-письмо будет неудобно читать, если размер шрифта менее 13 пикселей.
• Элементы, по которым можно сделать клик, должны быть достаточно крупными и изолированными от ближайших ссылок. В таком случае адресат сможет легко их активировать с первой же попытки.

Mailigen

Напомню: Mailigen – платформа для рассылок, а не сервис для дизайнеров. Оформлять письмо сразу на платформе для рассылок удобно, потому что вам не придется импортировать шаблоны с других сервисов. В случае со Stripo и Figma – придется.

Плюсы:

• Понятный функционал – никаких спрятанных функций. Просто создавайте рассылку шаг за шагом.
• Бесплатная техподдержка – что-то «сломалось», сервис завис? Напишите в чат техподдержки, вам помогут.
• + 100 шаблонов – выбирайте макеты писем для рассылки-открытки, промо, уведомлений и новостей. Вы найдете шаблон для любой цели.
• Внутренний редактор – вы сможете убрать «красные глаза», добавить яркость, сделать фото черно-белым, не выходя из платформы.
• RSS-блок – создавайте письмо, куда новости с вашего сайта или блога загружаются автоматически. При желании вы можете создать рассылку, состоящую только из RSS-элементов.
• Собственный дизайнер – если вы сомневаетесь в своих силах или не хотите тратить время на дизайн рассылки, закажите оформление писем в Mailigen у профессионального дизайнера.

Минусы:

Платная версия – визуальный и блочный редакторы доступны только тем, у кого есть аккаунт. Это значит, что вы не сможете бесплатно оформить письмо в Mailigen для его отправки через другой сервис.Идеальный вариант – оплатить аккаунт в Mailigen и получить доступ сразу ко всем функциям. Тогда вы сможете составлять шаблоны, сегментировать базу, вести рассылку и смотреть статистику по каждой отправке.

Пример:

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

Чистый шаблон на белом фоне. На контрасте легко разглядеть все блюда, о которых мы пишем.

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

Как верстать html письма: основные правила

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

Правило №2

Добавляйте только те тэги, которые поддерживаются почтовыми сервисами. Иначе получится так, что при отправке письма, они просто не дойдут до места назначения. Поэтому рекомендуется использовать универсальные теги, пример на картинке.

Правило №3

Устанавливаем фиксированную ширину. Многие пользователи используют мобильные устройства для просмотра почты и если заранее в html-документе не указать ширину, то появится горизонтальная прокрутка.

Дополнительная подготовка почтового шаблона

К этому моменту мы имеем HTML-верстку. Но она еще не готова к отправке.

Дело в том, что все стили оформления которые вы вносили (через редактор MailChimp-а или при самостоятельной верстке) сохранены в теге <style> внутри шаблона. Почтовые клиенты при получении письма и отображении его пользователю удалят такие стили. Сделано ли это из соображений безопасности или по другим причинам — не ясно.

Факт остается — все стили перед отображением будут удалены. А Microsoft Outlook еще и своих стилей добавит. В результате ваше письмо будет выглядеть безобразно. Вот пример сверстанной рассылки:

А вот так она отобразится в Outlook если отправить ее без дополнительной обработки:

Решение этой проблемы существует и называется оно “Инлайнер” (inliner). Это инструмент который специальным образом преобразовывает ваш HTML-шаблон. Для каждого элемента вашего шаблона он вычисляет перечень стилей, которые к нему (элементу) должны быть применены, и записывает их в атрибут style соответствующего HTML-тега. Такие стили уже не вырезаются и не перебиваются почтовиками.

Воспользоваться можно например вот этими инлайнерами:

• http://zurb.com/ink/inliner.php

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