Почти 50% всех электронных писем открывается с мобильных устройств, и этот показатель будет только увеличиваться. Поэтому важность использования адаптивных HTML шаблонов писем для email маркетинговых кампаний возрастает.
Разработать базовый HTML-шаблон электронных писем , который будет корректно отображаться в разных клиентах, довольно непросто. Но разработать шаблон, который будет корректно отображаться также на всех мобильных и планшетах, еще сложнее.
К счастью, есть дизайнеры и разработчики, создавшие коллекции редактируемых бесплатных адаптивных шаблонов электронных писем, которые работают во всех клиентах и на любых устройствах.
Блочно-модульные адаптивные шаблоны
Litmus Responsive Email Templates (7 шаблонов)
Litmus выпустил подборку из семи адаптивных шаблонов электронных писем с готовым дизайном. Они поставляются с исходными файлами PSD :
Green Village HTML Templates
Это минималистичный блочно-модульный HTML шаблон письма для рассылки, который подходит для различных целей. Загружаемый пакет включает в себя как исходный PSD-файл , так и HTML-код :
Responsive Email Template от Email on Acid
Этот блочно-модульный шаблон предлагает три варианта дизайна, которые отображаются в зависимости от ширины экрана. По умолчанию, он поддерживает 1-3 колонки, Он использует медиа-запросы, поэтому на мобильных устройствах преобразуется в одностолбцовый макет:
Basic Responsive Email Template
Simple Responsive HTML Email
Простой блочно-модульный адаптивный шаблон HTML письма для email рассылки использует медиа-запросы и плавающую ширину, чтобы обеспечить максимальную совместимость:
Responsive & Flat Newsletter Template
Responsive Email Template
Шаблоны электронных писем с чистой структурой
Responsive Email Blueprints от MailChimp (6 шаблонов)
MailChimp выпустил подборку из шести адаптивных готовых шаблонов писем для рассылки HTML под названием Email Blueprints . Они включают в себя некоторые элементы специфического языка шаблонов Mailchimp , но их можно легко удалить, если вы не являетесь пользователем MailChimp :
Ink – A Responsive Email Framework (4 шаблона)
Это адаптивный Email-фреймворк от ZURB , который включает в себя сетку из 12 столбцов и простые элементы пользовательского интерфейса для быстрой разработки электронных писем:
Antwort Responsive Email Layout Templates (2 шаблона)
Antwort предлагает надежные адаптивные шаблоны электронных писем HTML с обширной документацией и с настраиваемой шириной в зависимости от размеров экрана. Шаблоны отлично работают в мобильных клиентах, а также во всех основных стационарных клиентах и в Outlook (2000+) :
Salted, A Responsive Email Template
Шаблон разработан на основе кода, используемого Litmus для своих собственных рассылок. Предлагает простую основу для построения адаптивных электронных писем, созданных на HTML :
A Table-Based (but Responsive) Email Template
Этот красивый шаблон HTML письма был разработан на основе E-mail Blueprints от MailChimp и Email Boilerplate от Шона Пауэлла . Это адаптивный табличный шаблон электронных писем, который уже включает в себя теги объединения Mailchimp (их можно удалить, если они не нужны ):
Respmail Responsive Email Template
Улучшенная версия MailChimps Email Blueprints с большим количеством опций, заново определенной структурой и рядом исправлений для Outlook , Yahoo , Hotmail , Gmail … Данный шаблон был протестирован и тщательно проанализирован на предмет совместимости. Также он невероятно прост в настройке:
rwdemail
Разработанный на основе шаблонов Ink от ZURB . Это проект, который позволяет автоматизировать все, начиная от прекомпиляции SASS , встраивания CSS , CSS / HTML , минимизации изображений и до S3-хостинга изображений и тестирования Litmus . С помощью шаблонов INK и их CSS-образцов можно создавать шаблоны HTML письма любого уровня сложности.
Future-Proof Responsive Email Template Without Media Queries
А что, если бы можно было создавать адаптивные шаблоны электронных писем даже в средах с неудовлетворительной поддержкой CSS? Шаблон вы найдете здесь :
Другие ресурсы для создания шаблонов электронных писем
- Responsive Email Patterns — подборка шаблонов и модулей для адаптивных электронных писем;
- Cerberus — шаблоны для адаптивных электронных писем;
- Really Good Emails — лучшие дизайны для HTML шаблонов писем;
- Responsive Email Resources — подборка инструментов для создания адаптивных шаблонов электронных писем.
Перевод статьи «30 Free Responsive Email and Newsletter Templates » был подготовлен дружной командой проекта
Email -маркетинг с каждым годом продолжает набирать обороты вместе с увеличением количества интернет-пользователей. Базы данных компаний растут, рассылка писем каждому клиенту вручную становится непосильным трудом. Email -маркетинг помогает сделать процесс рассылки по электронной почте более удобным, быстрым, и создает основу для креатива. Для рассылки используют HTML и обычные шаблоны email-писем.
Если говорить простым языком, email -маркетинг – это продуманная система рассылок писем по электронным адресам, находящимся в базе данных.
Основан этот вид маркетинга на шаблонах писем и страниц, которые встраиваются в письма.
Email-шаблоны бывают 2 видов:
Обычные – это просто текстовое письмо из нескольких предложений с вложениями или без, редко с креативным форматированием. Такие шаблоны для электронных писем обычно используются в деловых переписках.
Шаблоны html писем – яркие, предназначенные для привлечения внимания и создания заинтересованности веб-страницы, которые внедряются в письмо.
В чем преимущества и недостатки?
Начнем с обычных шаблонов.
Большое количество «плюсиков» – хороший показатель. Но вот продать такие письма при первом общении с клиентом, особенно рядовым, вряд ли что-то смогут. В отличии от HTML -писем.
Создать HTML -письма самостоятельно без достаточной подготовки сложно, хотя именно такие сообщения, красивые, похожие на открытки, привлекают намного больше внимания, чем простые «черным по белому». Шаблоны для HTML -писем и email письма можно создавать прямо на сайтах-сервисах рассылок, давно включивших этот функционал как обязательный для организации рассылки писем пользователям.
Основные сервисы
Описывая основные сайты для email рассылки, есть смысл сравнить их по наиболее важным характеристикам.
Количество шаблонов |
|||||
Качество шаблонов |
Отличное |
Отличное |
Отличное |
Отличное |
|
Доступные тематики |
Праздники – Бизнес Интернет-магазин – Туризм – Общие и др. |
-Праздники
– Ресторан – Туризм – Бизнес Интернет-магазин и др. |
– Общие
Праздники – Туризм – Бизнес Интернет-магазин |
-Интернет-магазин
– Красота и здоровье – Туризм – Праздники |
Интернет-магазин – Туризм |
Адаптация письма под разные экраны |
|||||
Да (до 1 500 писем на 100 адресов) |
Да (до 15 000 писем на 2 000 адресов) |
Да (до 6 000 писем на 5 000 адресов) |
|||
Возможность бесплатного использования шаблонов |
|||||
Возможность использования ранее использованных шаблонов |
UniSender .
Один из самых популярных русифицированных сервисов для создания email -рассылок. Доступны 3 редактора: для блочных шаблонов (текстовый и визуальный контент можно менять на свое усмотрение), для готовых базовых и шаблонов HTML , для работы с собственным HTML -шаблоном email письма. Разобраться в редакторах не сложно, система дает подсказки, а все необходимые инструменты находятся в верхней части рабочей страницы.
SendPulse
Не менее популярный, понятный и удобный сайт для создания шаблонов HTML -писем и работы с готовыми шаблонами. Среди рассмотренных имеет самый большой бесплатный пакет и достаточно много шаблонов для создания успешной рассылки.
Сайт дает возможность создавать собственные шаблоны в упрощенном HTML -редакторе, конструкторе или через загрузку собственного шаблона с компьютера. В конструкторе легко разобраться, в нем можно создать красивое письмо «с нуля», самостоятельно выбирая картинки, шрифты и выставляя это все в нужно расположении.
Rumailer
Скромный в плане дизайна сайт с хорошими шаблонами и сравнительно большим бесплатным пакетом. Функционал работы с ограниченным количеством шаблонов не так широк, как хотелось бы опытным пользователям. Удобного блочного редактора нет вовсе.
Плюс сервиса в наличии больших возможностей при экспорте подписчиков. Их можно выгружать по активности, по листам, а также по логину или домену в электронном адресе.
GetResponse
Сервис славится самым большим количеством доступных шаблонов в 24 категориях. Приятный интерфейс самого сайта дополняется понятным пользователям блочным редактором готовых и собственных HTML -шаблонов для писем клиентам.
Редактор прост в использовании. Блоки можно легко перетаскивать, менять местами, удалять или добавлять. При нажатии на блок появляется рабочее меню с кнопками для выполнения основных действий с изображениями и текстовым контентом.
Для того чтобы просмотреть шаблоны, необходимо начать работу с рассылкой, введя данные отправителя и тему письма, а затем выбрать кнопку «Блочный email конструктор». Если же пользователь хочет работать с собственным шаблоном, то выбирать нужно «Редактор HTML кода».
Mailerlite
Сайт для рассылки электронной почты, который многие пользователи называют самым простым. Функционал работы с шаблонами при этом достаточно ограничен, но основные действия выполнимы. В редакторе разберется даже новичок, т.к. он прост и понятен. Также, как и на других платформах, можно выгружать свои HTML -шаблоны для email -рассылок, редактировать и использовать их.
Как выбрать подходящий шаблон html письма ?
Выбор сервиса и шаблона для email -рассылки по электронной почте – ответственное дело, к которому надо подходить с умом, т.к. от этого отчасти зависит дальнейший успех работы коммерческой организации или предпринимателя. Опираться при выборе сервиса можно на приведенные выше характеристики, на отзывы знакомых или пользователей в интернете, на примеры работ на сайте, а также на собственные ощущения от работы с тем или иным сервисом.
Дополнительным ответом на вопрос «как узнать какой шаблон выбрать?» могла бы служить статистика по самым популярным сервисам. Могла бы, но скажем прямо, % открытия, переходов, кликов, отписок от сервиса практически не зависят. Единственное, что нами было отмечено, что например на СендПульсе (роскошные лимиты на бесплатности) несколько больший % попадания писем в папку “спам”, а не во входящие. А % ошибок, публикуемые самими сервисами, никто кроме них проконтролировать не сможет, разве что эмпирическим путём в единичных случаях.
Подробно о бесплатных возможностях сервисов рассылок мы писали .
Как узнать, какой шаблон email письма подойдет в каждом конкретном случае? Это можно сделать, только поработав с разными шаблонами, подобрав лучший дизайн и контент. Многие компании сначала используют готовые шаблоны, видоизменяя их, а после создают собственные. Это хороший вариант, если навыков написания html писем и страниц нет, а рассылка видится полезным инструментом.
Интернет-сервисы для бизнеса.
Ссылка на материал обязательна!
Здравствуйте дорогие читатели – сайт!
Сегодня я покажу, как сделать красивый для E-mail рассылки.
Уже давно ни для кого не секрет, что весь бизнес в Интернете построен на E-mail маркетинге.
Каждый день с помощью информационных рассылок инфо-бизнесмены, блоггеры и контактируют со своими подписчиками, предлагая им различные товары и услуги.
Но, что бы на такое предложение обратили внимание, а не сразу отправили в папку «спам», нужно привлечь к нему внимание.
Для этого будет уместным сделать красиво оформленный HTML шаблон письма.
Специально для Вас я подобрал тестовый шаблон, который будет наглядным пособием.
Что и как мы будем делать?
Мы будем создавать самый простой HTML шаблон письма (), который будет состоять из основного диалогового окна и двух вторичных колонок.
Создание каркаса и таблицы-контейнера
Для начала нам нужно сделать HTML каркас нашего письма. Выглядеть это будет так:
Обратите внимание, что ширину таблицы я задал 99% , оставив вокруг небольшое расстояние. Это не моё личное желание, а требование некоторых почтовых Веб-клиентов таких, как Gmail и Yahoo . Остальная часть нашей электронной почты будет находиться в этой одной ячейке таблицы, которая расположена по центру.
Следующий шаг заключается в создании обёртки таблицы фактического содержания письма. Сохраняйте максимальный размер конструкции не более 600 пикселей:
|
Вместе с тенью света на белом фоне наш шаблон письма был растянут до 640px , но его рабочая зона по-прежнему осталась равной 600px .
Создание шапки
Теперь, когда основная таблица создана, пришло время браться за её наполнением необходимым содержимым. Я начну с самого верха шаблона письма и потихоньку, буду опускаться вниз.
Верхняя строка
Начиная с этого момента, я буду исключать ранее написанный код (рамки таблицы).
Таким образом, первая строка электронной таблицы имеет синий фон с белым шрифтом и ссылку на веб-версию письма. Очень важно снарядить Ваше письмо такой ссылкой, так как не все почтовые клиенты выводят его содержимое одинаково правильно.
Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра. |
А за её внешний вид отвечает CSS стиль:
/* Fonts and Typography */ .footer { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #fff; padding-right: 20px; }
Логотип и иконки социальных сетей
Опускаясь ниже, мы видим логотип и , которые расположены на одном уровне.
За их вывод отвечает вот такой код:
Вдобавок, ко всем нашим изображения в HTML шаблоне письма добавляются следующие стили:
/* Backgrounds */ .email_background { width: 640px; background: url("email_images/email_bg.jpg") repeat-y; } /* Images */ img { display: block; border: none; }
Таким образом, социальные иконки сидят на своих местах в собственных вложенных ячейках таблицы и не имеют отношения к другим разделам письма. Это позволяет их менять по мере появления соответствующей необходимости.
Добавление содержания
Сначала мы начнём с добавления первого изображения, которое в данном дизайне имеет размер 560px на 210px . Вы также можете увидеть милую деформированную тень под изображением, которая была сделана отдельно, что позволяет быстро менять изображения, не теряя тень. Давайте перейдем к коду:
Здесь мы создали новую строку для показа больших изображений, установив ширину до 560px с добавление 20px отступов с обеих сторон. Те же действия мы проделали и с тенью.
Добавление заголовка и содержания
Перемещаясь ниже, мы видим заголовок основного материала и непосредственно само содержимое. Здесь за вывод контента отвечает вот такой код:
This is your featured story
Существует мнение, что Паттайя стала популярным курортом благодаря тому, что тут часто отдыхали американские моряки, которых впрочем, тут и сейчас большое количество и они всегда в окружении нескольких таек. Естественно среди наших соотечественников он менее популярен, чем Египет и Турция. Но родную речь тут слышно повсеместно)) и в торговых комплексах во время шоппинга и во множестве здешних баров)). Паттайя в основном знаменита своей ночной жизнью, морем и текстилем. Конечно, кроме всего прочего тут можно найти множество других интересностей.
Здесь можно брать в прокат любой транспорт, в том числе и джипы и скутеры. Для любителей мототехники тут вообще райский уголок. Чтобы взять в аренду мотобайк права могут даже и не потребовать, всего за 100-500 бат (плюс залог в размере 2 000 бат) можно арендовать приличный скутер и погонять в свое удовольствие!
Чтобы изменить внешний вид заголовка и текста шаблона письма, достаточно воспользоваться следующими стилями:
H1 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 24px; font-weight: normal; } .content { padding: 0; margin: 0; } p { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; }
Дополнительное содержимое
Теперь мы переходим к дополнительному содержимому нашего шаблона. Как Вы уже заметили оно разбито на две колонки. В каждой из колонок присутствует фото, заголовок и небольшое превью. Всё это создаётся при помощи вот такого кода:
This is a secondary headline |
This is a secondary headline |
Несмотря на погубленную репутацию Паттаи, здесь можно узнать, что пресловутый тайский массаж - не только прикрытие для борделей. В Таиланде действительно делают неплохой массаж, а лучшими специалистами в этом искусстве считаются слепые мастера. Их секрет заключается в повышенной чувствительности пальцев.
|
Центральная улица и сердце Паттайи, которая никого не оставляет равнодушным. Местный Арбат, Таймс-Сквер и Содом с Гоморрой в одном стакане, «Уокинг Стрит» – настоящий источник любви и ненависти как для местных жителей, так и для приезжих. Говорим «Паттайя», подразумеваем Walking Street.
|
Здесь нам ещё потребуется добавить дополнительный стиль. Вот он:
H2 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 18px; font-weight: normal; }
Закрытие HTML шаблона письма
Итак, мы приближаемся к концу нашего шаблона. Здесь нам нужно закрыть основное окно, используя изображение и следующий код:
Одним из наиболее важных аспектов, является добавлением в конце шаблона письма ссылки для отписки от получения подобных писем (). Да, да, я знаю, Вы не хотите терять абонентов. Но и раздражать их тоже нельзя. Вы должны предоставить клиентам возможность отказаться от получения, возможно давно надоевшей им рассылки. Ну и заодно напомнить кто автор.
Здесь Вам необходим такой код:
Автор блога: Ivan.ru
Хотите отказаться от подписки? Нажмите здесь