Верстка email письма онлайн

Создание HTML письма в онлайн конструкторе

Хотите не просто текстовое письмо, а красочное, состоящие из картинок и кнопок. Вы пришли по адресу. Здесь вы сможете создавать красивые HTML письма.

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

Создать вы их сможете самостоятельно в нашем бесплатном онлайн конструкторе. Просто следуйте инструкции по созданию HTML писем.

Изучение HTML кода.

Конечно это шутка, КОД знать вовсе не обязательно. Первое что необходимо сделать, просто зарегистрироваться в нашем личном кабинете.

Введите регистрационные данные и буквально через 2 минуты можно приступать к созданию своего первого шаблона.

Перейдите во вкладку — «Создать рассылку» в личном кабинете и выберите вариант №1 — «С помощью онлайн конструктора»

Создание HTML письма.

Вы попадете непосредственно в блочный онлайн конструктор. Слева будет панель с различными блоками — как на скрине.

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

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

Тема и обратный адрес.

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

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

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

Проверка СПАМности.

Когда письмо готово и заполнено название темы, переходим на пятый шаг создания рассылки. Здесь можно проверить письмо на попадание в СПАМ.

Запустите тестирование в СПАМ фильтре и через несколько минут, система скажет о перспективах доставки.

Преимущества рассылки HTML писем перед текстовыми.

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

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

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

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

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

Для полного понимания работы с конструктором писем, рекомендуем посмотреть краткую 4-х минутную видеоинструкцию.

• Договор Оферты
• АнтиСпам Соглашение
• Политика Конфиденциальности

Конструктор HTML-писем

Идеальный инструмент для создания рассылок

Красивые шаблоны и безграничные возможности дизайна писем.

Средство проверки спама

Полная свобода для творчества

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

• Умный редактор изображений: изменяйте фотографии как угодно прямо в шаблоне письма. Узнайте больше о возможностях редактора.
• История создания писем: просматривайте историю ваших рассылок и отменяйте изменения одним кликом.
• Библиотека стандартных блоков: кнопки, текстовые блоки, изображения и многое другое — создайте собственный дизайн письма.
• Архив сниппетов: сохраняйте и используйте сниппеты с контентом в разных рассылках.

Встроенный спам-рейтинг

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

SpamAssassin™ сверяет содержимое писем с постоянно обновляемыми списками «спам-слов», а также использует специальные спам-фильтры, которые анализируют форматирование, количество и типы ссылок, изображения, код, поля отправителей, заголовки, дисклеймеры и многое другое. SpamAssassin™ также предоставит рекомендации об элементах письма, которые необходимо исправить.

Полностью адаптивные письма

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

Автоматические рекомендации
товаров

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

Более 500 шаблонов и 5000 лицензированных изображений

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

Воплощайте ваши идеи

Используйте стандартные шаблоны или создавайте собственные с помощью кода. Ознакомьтесь с нашей документацией для разработчиков.

Уже есть собственные шаблоны? Импортируйте их из архива ZIP, с помощью URL или просто скопируйте код.

Продвинутая настройка рассылок

A/B тесты

Нужно протестировать письма и сделать их максимально эффективными? Легко! Тестируйте до пяти вариантов темы, контента, имени отправителя или времени доставки письма.

Динамический контент и персонализация

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

Предпросмотр во входящих

Даже малейшая ошибка может все испортить. С нашим инструментом для предпросмотра вы сможете проверить, как ваши письма отображаются на компьютерах, мобильных устройствах и в почтовых сервисах.

Мобильный предпросмотр

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

Интеграция с соцсетями

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

Отслеживание кликов

Узнайте, как клиенты реагируют на ваши email-кампании. Отслеживайте процент переходов с помощью встроенной статистики кликов.

Интеграция с Google Analytics

Специально для фанатов данных! Подключите учетную запись Google Analytics, чтобы добавить статистику рассылок на панель Google Analytics.

Подзаголовки

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

Тестирование писем

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

Вложения

Контент не всегда удобно загружать с сайта. Прикрепляйте файлы общим объемом до 400 кБ к вашим письмам.

Онлайн-архив писем

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

Только 17% маркетологов пользуются преимуществами email-рассылок и точками взаимодействия в течение жизненного цикла клиента. Используйте конструктор писем для создания рассылок, которые позволят взаимодействовать с клиентами на каждом этапе.*

Используйте наш конструктор для создания писем и отправки рассылок — самого популярного вида коммуникации в email-маркетинге. 58% маркетологов применяют этот способ.*
*Данные являются среднестатистическими и могут меняться в зависимости от конкретной задачи и типа проекта

Конструкторы писем для email рассылок: лучшие бесплатные и платные сервисы

Грамотно организованный email маркетинг позволяет выстраивать долгосрочные отношения с клиентом, повышать лояльность пользователей и объём продаж.

Одним из инструментов email маркетинга является письмо, которое получает пользователь. Его можно собрать с нуля (требуются знания HTML и CSS) или с помощью конструктора. Такие сервисы работают по принципу drag-and-drop: методом перетаскивания нужных блоков и заполнения их контентом.

Рекомендуем: Click.ru – сервис контекстной и таргетированной рекламы для профессионалов

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

Какой конструктор писем выбрать

В интернете можно найти как чистые конструкторы писем, так и сервисы рассылок со своим конструктором. При выборе сервиса обратите внимание на следующие моменты:

• количество доступных шаблонов (платные они или бесплатные);
• можно или изменять шаблоны или создать своё письмо с нуля;
• лёгкость в использовании, интуитивно-понятный интерфейс
• адаптивность (подстраивается ли макет под все размеры экранов);
• интеграция с почтовыми сервисами и возможность сохранения HTML-кода готового шаблона для дальнейшей загрузки на сервис;
• цена, наличие бесплатной версии или тестового периода.

ТОП-10 конструкторов шаблонов писем для email рассылок

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

Бесплатные

Stripo.Email

Сервис позволяет создавать шаблоны для писем путём перетаскивания и настройки блоков. Доступно более 300 готовых шаблонов и более 10 тысяч различных изображений.

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

Среди плюсов Stripo.Email: адаптивность и возможность настройки отдельных элементов для отображения на мобильных устройствах. Сервис позволяет автоматизировать однотипные процессы с помощью сохранения модулей в личную библиотеку для их повторного использования.

Конструктор Stripo.Email имеет хорошую бесплатную версия. Цена платного тарифа – от 9,99$ при ежемесячной оплате (или от 8,33$ в месяц при оплате сразу за год).

MakeMail

Это бесплатный сервис с интерфейсом на русском языке для создания адаптивных писем. В нём предусмотрена возможность настройки шаблона с одной или двумя, тремя колонками. Из базовых элементов доступны контакты, изображения, текст, ссылки на соцсети, таблицы, отступы. Можно менять цвет фона, вставлять ссылку на сайт, копировать подходящие блоки для ускорения процесса.

Принцип работы такой:

1. Выбираем готовый шаблон или создаём письмо с нуля при помощи базовых блоков.
2. Редактируем шаблон с помощью блочного или HTML-редактора.
3. Тестируем вёрстки в почтовых клиентах Yandex почта, Mail.ru почта, Android и Gmail на разных устройствах не выходя из сервиса;
4. Скачиваем шаблон в формате HTML и загружаем на нужный сервис рассылки.

BEE Free

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

Среди особенностей сервиса:

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

EDM designer

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

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

Главный недостаток EDM designer – отсутствие прямого экспорта. Однако выход есть: вы можете экспортировать готовый шаблон как HTML файл после оплаты постом в Facebook или Twitter. Русская версия отсутствует.

Mosaico

Бесплатный конструктор писем, который не требует регистрации. Русской версии нет. Вы можете создать письмо на основе одного из двух предложенных адаптивных шаблонов и изменить каждый из элементов до неузнаваемости.

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

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

Платные

Tilda

Конструктор шаблонов писем – относительно новая услуга сервиса. Чтобы использовать его, необходимо зарегистрировать аккаунт и сделать макет с помощью стандартных заготовок. При этом нет необходимости создавать сайт.

Принцип работы выглядит так:

1. В редакторе вы собираете письмо.
2. Затем подключаете UniSender, MailChimp, SendGrid (можно также получить HTML-код для использования другого сервиса).
3. Отправляете рассылку из «Тильды» или вставляете код на нужный вам ресурс.

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

Создание email рассылки на бесплатном тарифе недоступно, но можно активировать на две недели бесплатный тестовый режим. Стоимость платного тарифа – от 720 рублей в месяц.

EmailFactory

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

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

В разделе «Превью» доступна проверка шаблона в формате мобильного устройства и компьютера. Предусмотрен доступ к совместной работе над шаблоном (до 10 человек).

Конструктор EmailFactory интегрирован со всеми популярными почтовыми сервисами – для отправки писем требуется лишь пара кликов. Кроме того, можно скопировать HTML-код готового шаблона и загрузить на сервис рассылок.

Для полноценной работы этого конструктора необходимо выбрать платный тариф – от 420 рублей в месяц (после регистрации пользователям предоставляется неделя тестового пробного периода).

GetResponse

Использование представленного сервиса стоит от 15$ в месяц за тысячу контактов в базе. Бесплатная тестовая версия работает в течение месяца.

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

Для создания уникального дизайна письма предусмотрены блоки:

• текст и изображение;
• вебинар;
• линия;
• кнопка действия.

Имеются модули специально для e-commerce и соцсетей. Доступен архив сниппетов.

В продвинутой настройке рассылок есть возможность проведения A/B тестов и настройки персонализации. Продвинутая система аналитики позволяет отслеживать переходы по ссылке и подключить Google Analytics.

CogaSystem

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

CogaSystem даёт возможность как создавать HTML-шаблоны, так и организовывать рассылку по указанным вами адресам. Сервис работает по принципу drag-and-drop, шаблоны подстраиваются под разные размеры экранов.

Онлайн-редактор включает в себя семь базовых элементов:

• текст;
• логотип и телефон;
• изображения;
• разделители;
• кнопка;
• отступ;
• ссылки на социальные сети.

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

Campaign Monitor

Полноценное использование конструктора обойдётся вам от 9$ ежемесячно.

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

Конструктор писем в Campaign Monitor работает по принципу drag-and-drop, при этом позволяя сохранять черновики в HTML. Шаблоны одинаково корректно отображаются на разных устройствах.

В созданные на сервисе электронные письма можно добавлять видео с YouTube или Vimeo и кнопки соцсетей. Расстояние между модулями, оттенки и шрифты вы можете настроить с учётом вашего фирменного стиля.

Как верстать email письма — особенности и примеры кода

Расскажем об особенностях верстки email шаблонов — в чем основные проблемы верстки, как работать с мультимедиа, шрифтами и адаптивностью. И все это с примерами кода.

Содержание

Самые популярные почтовые платформы

Разработчики проекта Email Client Market Share отслеживают статистику по доле рынка email среди разных почтовых клиентов. В случае конкретной компании распределение пользователей различных платформ и программ может быть другим, но на старте неплохо понимать базовую диспозицию на рынке. По данным на май 2017 года, cамыми популярными почтовыми платформами являются iPhone и Gmail:

Основные проблемы верстки

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

Сложности начинаются с самого начала — существует множество движков рендеринга писем, которые используются различными почтовыми программами:

• Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
• Outlook 2000, 2002 и 2003 используют Internet Explorer.
• Outlook 2007, 2010 и 2013 используют Microsoft Word (да-да, Word!).
• Веб-клиенты, соответственно, используют движки браузера — например, Safari использует WebKit, а Chrome использует Blink.

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

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

Как работать со шрифтами

Используйте стандартные системные шрифты для отображения текстов писем — это самое простое и надежное решение. Но если необходимо внести изменения в типографику можно использовать веб-шрифты, например, Google Fonts.

Чтобы правила веб-шрифтов не конфликтовали с Outlook, используйте специальный медиазапрос для WebKit:

Очень важно прописать для каждой ячейки таблицы

Изображения и медиа

Следующая важная тема при верстке писем — работа с изображениями и медиа.

Некоторые почтовые программы по умолчанию показывают картинки, а некоторые их блокируют. Помимо прочего, это оказывает влияние на возможность сбора статистики. Как правило, для этого используются специальные картинки малого размера — пиксели отслеживания. Это значит, что если почтовая программа блокирует изображения, то понять, открыл ли пользователь письмо, просто не удастся.

Поведение почтовых клиентов здесь весьма вариативно:

• Outlook блокирует рендеринг изображений по умолчанию,
• Apple Mail не блокирует,
• Gmail не блокирует.

Важно включать alt-текст для всех используемых картинок — это поможет получателю письма понять, что должно было быть на месте изображений, если его email-клиент вдруг ему их не покажет. Для тега можно прописать стилевые правила текста, например color или font-family , которые будут применяться к alt-тексту.

Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.

Адаптивная верстка

• Около половины всех писем в мире открывают с мобильных устройств, и эти цифры растут.
• По данным проекта Email Client Market Share доля iPhone на рынке почтовых клиентов составляет 31%, у iPad 11%, а у Android 4% — это больше 45%, а ведь есть еще Windows Mobile и другие ОС.
• Исследователи из MailChimp обнаружили, что число кликов на ссылки в адаптивных письмах за последнее время выросло почти на 15% — с 2,7 до 3,1%.

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

Автоматизация email рассылок

Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.

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

Одноколоночное письмо на десктопе и смартфоне

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

Также нужно будет адаптировать размеры изображений и размер шрифта font-size — и все.

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

Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута align=»left» для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:

С уменьшением ширины экрана устройств необходимо изменять размер контейнера и обеспечивать стопроцентную ширину таблиц и колонок:

Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.

Эта техника позволяет добиться того, что письмо будет отображаться в большинстве почтовых клиентов. Возможно вы заметили странное написание селекторов класса [class=»body_table»] вместо привычного .body_table — это специальный хак для работы с почтовым сервисом Yahoo. Дело в том, что он некорректно работает с CSS с медиазапросами и данный хак позволяет игнорировать эти стили.

Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.

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

Здесь можно поиграть с примером кода на Codepen.

В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, таких как Яндекс.Почта и Mail.ru под iOS и Android, которые не поддерживают медиазапросы.

Как сделать резиновую верстку

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

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

Шаблон MJML представляет набор особых тегов разметки, которые после компиляции превращаются в обычную табличную верстку:

Адаптивные изображения

Отдельная тема — создание адаптивных версий изображений. Здесь достаточно использовать классический метод создания адаптивного контента — img .

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

Мы в SendPulse предоставляем услугу дизайна шаблонов, но но есть и специализированные агентства, как Site Elite Studio.

Неочевидные моменты в работе с текстом email

В заключение еще несколько советов, которые помогут создать качественную почтовую рассылку.

Не забывайте о текстовой версии письма

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

Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.

Прехедер сообщения очень важен

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

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

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

Для превью сообщений и тестирования прехедеров можно использовать этот инструмент от Остина Вудалла (Austin Woodall).

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

Рассылки для новичков: 7 сервисов для дизайна писем

Оформление рассылки – это не так сложно, как кажется. Вы вполне можете справиться сами, не привлекая топовых веб-дизайнеров. Собрала для вас 3 простых сервиса для дизайна писем и 4 посложнее. Пользуйтесь!

Stripo

Бесплатный конструктор email-шаблонов. Перемещайте текст и картинки внутри письма, редактируйте иллюстрации и все – письмо готово к отправке.

Плюсы:

• Удобный интерфейс – не будучи дизайнером, вы легко разберетесь в функционале: найдете блоки, загрузите картинки, вставите кнопки.
• Адаптивность – письмо не «съезжает» при просмотре со смартфона. Перед экспортом в рассыльщик вы сможете посмотреть, как оно выглядит в мобильной версии.
• Готовые шаблоны – их здесь +300. Пожалуй, это самый богатый сервис на готовые макеты. Грех не протестировать хоть один.
• Внутренний редактор – если не нравится картинка, которую хотите вставить в письмо, отредактируйте ее прямо в Stripo. Измените яркость или обрежьте фото.
• «Тяжелые» изображения – в Sripo можно загружать картинки до 2 МБ. Чтобы поставить изображение в письмо, не придется использовать сервисы, ужимающие вес картинки.
• Интеграция с Mailigen – готовое письмо в несколько кликов экспортируется в +30 почтовиков, включая нашу платформу.

Минусы:

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

Пример:

Часть писем для своих клиентов команда Mailigen собирает в Stripo. С помощью этого сервиса мы сделали письма застройщику LEGENDA.

Письма с таким дизайном уходят покупателям Premium-квартир. Выглядит солидно и стильно. Черный фон, золотой шрифт в заголовках – это не просто прихоть нашего дизайнера. Оттенки в письме перекликаются с цветовой гаммой жилых комплексов, о которых мы говорим в рассылке.

Строгость, симметрия, гармония – все напоминает Ар деко в центральном парке Нью-Йорка. Именно в таком стиле построены дома LEGENDA – и дизайн письма этому соответствует.

Figma

В отличие от Stripo, сервис предназначен не только для дизайна писем. Здесь можно создавать прототипы сайтов и приложений. И еще: сервис позиционирует себя как простой и удобный. На деле – придется чуть-чуть поразбираться.

Плюсы:

• Обучение для новичков – статьи, курсы и образовательные видео: все для вас. Если вы в дизайне ноль, посмотрите парочку уроков.
• Поддержка шрифтов для иконок – сервис поддерживает шрифты, с помощью которых вы сможете нарисовать иконки для письма.
• Декоративные элементы – инструмент «Текст» позволяет создавать логотипы, надписи и другие «буквенные» элементы, которые украсят письмо.
• Облачное хранение – все шаблоны хранятся в облаке. Вы сможете работать над макетом коллективно, а еще будете уверены, что все данные сохранены.
• Работа на Windows и MAC – и вы даже сможете собирать письмо через браузер! Невиданная щедрость!

Минусы:

• Англоязычный сервис – для Figma пока нет русской версии, и, что самое ужасное, нет программ-русификаторов. Разбираться в терминах дизайна придется на английском.
• Нет анимаций – в сервисе с таким мощным функционалом явно не хватает возможности делать гиф. А было бы удобно!

Пример:

Вердикт – сервис отличный. Сами делаем письма в Figma. Одно из них – для магазина ВелоДрайв.

Товарная подборка – формат письма, который можно превратить в смертную скуку, если не продумать оформление. Мы сделали рассылку в корпоративных цветах ВелоДрайв – голубом и оранжевом.

Для кнопок выбрали разные цвета. Те кнопки, переход по которым для нас важнее, сделали контрастнее. «Забронировать время» и «Перейти в каталог» заметно выделяются среди остальных элементов – на них падает взгляд. Чтобы товарная подборка не показалась скучной, добавили текст в начале и конце письма. Итог: получилось свежее, приятное, а главное – информативное письмо.

Mailigen

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

Плюсы:

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

Минусы:

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

Пример:

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

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

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

Еще сервисы

Stripo, Figma и Mailigen – сервисы, где знания дизайна не принципиальны. Но когда вы подтянете свои навыки, вспомните про 4 профессиональных ресурса:

Adobe Illustrator. Хотите удивить подписчиков шикарной графикой? Установите эту программу. Здесь сможете сделать логотип, иконки, нарисовать эффектные рекламные баннеры.

Photoshop. Старый добрый «фотошоп» совсем не для новичков, если дело касается рассылки. Но результат порадует. Кстати, до того, как появились Stripo и Figma, многие email-маркетологи использовали именно Photoshop для дизайна писем.

Sketch. Классная программа для дизайна, но работать в ней можно только с техники MAC и только на английском языке. В остальном – рисуйте картинки, создавайте логотипы и другие графические элементы.

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

Что в итоге?

Если от слова «дизайн» бросает в пот, и вы точно знаете, что все эти векторы и пипетки не для вас – выбирайте проверенные варианты. Собирайте письма в Stripo или Figma, а потом загружайте их в Mailigen. Либо сразу оформляйте рассылку на нашей платформе.

Не забывайте про прекрасную возможность передать оформление писем профессиональным дизайнерам. Нет, не просто веб-дизайнерам, а специалистам, которые занимаются именно оформлением email-рассылки. Для этого просто напишите на team@mailigen.ru или позвоните по телефону 8 800 770 70 23. Сделаем вам крутые шаблоны.

Рекомендуемые статьи

email маркетинг более-менее отличается от спама в одном ключевом аспекте, и этим аспектом является разрешение…

Узнайте, почему у одних компаний рассылки работают, а у других – нет. У вас есть…