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

Медиа-запросы: только полдела

Было время, когда было вполне достаточно определения типа устройства для создания адапивного шаблона электронного письма, которое одинаково хорошо отображалось бы и в iOS, и в Android почтовых клиентах, оба семейства смартфонов поддерживали CSS свойство @media.

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

Наиболее примечательным является последнее обновление приложения Gmail для Android, которое является в два раза более популярней, чем стандартное почтовое Android-приложение (что составялет 11% от общих запусков). Оно никогда не поддерживало media-запросы, и до сих пор не поддерживает, однако сейчас оно масштабирует ваши электронные письма путем сжатия размера внешней таблицы для заполнения всей доступной области отобржения экрана. Этот процесс сложно проконтролировать и, в том случае, если все ваши письма зависят от медиа-запросов для правильного отображения на мобильных устройствах, создается несколько неприятных результатов.

Почему плавающий шаблон "темная лошадка"

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

Однако, имеется несколько дизайн-компромиссов, которые вы должны применить. Любимое всеми "схлопывание" в одну ленту колоночных макетов не так хорошо работает с этим методом. Если же вы научитесь обходиться без них, вы сможете применять функциональный дизайн, который работает максимально хорошо.

Сегодня мы этим и займемся.

Первый этап

Давайте начнем с создания пустого шаблона.

Hello!

Я расположила главную таблицу контента по центру с помощью класса "content".

Обратите внимание

Примечание: в ходе выполнения урока вы заметите то, что я собираюсь разместить CSS в заголовке страницы. Обычно я размещаю стили в заголовке страницы, когда собираюсь использовать их снова, или оставить встроенными одноразовые стили.

Важно: Когда вы используете CSS в заголовке вашего документа, вы обязаны в конце разработки использовать инструменты для их преобразования во встроенные. Если вы используете сервисы, наподобии MailChimp или Campaign Monitor , они автоматически предложат вам преобразовать эти стили во встроенные, когда вы импортируете вашу разметку. Вы обязаны это делать, потому что некоторые почтовые клиенты, такие как Gmail, проигнорируют или вырежут содержание вашего тэга

Создание заголовка

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

Hello!

И затем в своих CSS стилях, задаем подложку для нашего заголовка.

Header {padding: 40px 30px 20px 30px;}

Создание первой адаптивной строки

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

Левая колонка

Заменим наше маленькое привествие тем, что приведено ниже.

Создаем таблицу в 70px и также добавляем небольшую подложку, которая будет смотреться, как зазор между нашими двумя колонками. Подложка снизу добавит вертикального просвета, когда наши колонки нагромоздяться друг на друга на смартфоне.

Правая колонка

Также мы создадим правую колонку снова применив выравниваие к левому краю. Таблица будет 445px в ширину, что позволит нам сэкономить 25px для правой стороны. Это очень важно, потому что Outlook автоматически нагромоздит ваши таблицы, если не будет оставлено по-крайней мере 25px для каждой созданной строки.

Если вы будете оставлять в запасе по-крайней мере 25px, ваши таблицы будут такими, как вы ожидаете.

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

style="width: 100%; max-width: 425px;">

Как вы можете увидеть, что я создала класс, названный "col425", для этой таблицы и задала ширину 425px для него. Я поместила таблицу, которая будет содержать в себе другую таблицу в 425px шириной, в код условия. Затем мы добавляем наш класс также и в медиа-запрос, который мы создали для Apple Mail.

Col425 {width: 425px!important;}

Сейчас внутри нашей ячейки добавим стилизированный заголовок.

CREATING

Responsive Email Magic

Subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;} .h1 {font-size: 33px; line-height: 38px; font-weight: bold;} .h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

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

Создание одноколоночной строки текста

Для создания одной строки текста, просто напросто добавим новую строку в нашу таблицу с классом ".content". Этой строке добавим класс ".innerpadding" с многократно используемыми значениями подложки. Также добавим класс "borderbottom", чтобы создать рамку для каждой строки.

Welcome to our responsive email!

CSS этой секции:

Innerpadding {padding: 30px 30px 30px 30px;} .borderbottom {border-bottom: 1px solid #f2eeed;} .h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;} .bodycopy {font-size: 16px; line-height: 22px;}

Создание двухколоночной статьи

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Claim yours!

Мы добавили кнопку с классом "buttonwrapper". Она содержит ячейку-распорку с цветовой заливкой фона и также текстовую ссылку внутри себя. Я предпочитаю использовать этот способ, потому что он позволяет использовать кнопки с плавающей шириной, что очень полезно при создании многократно используемых шаблонов, где ширина каждой кнопки может быть различной. Если же ширина вашей кнопки фиксирована, вы можете предпочесть использоватьBulletproof Button Generator .

Стили для нашей кнопки:

Button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;} .button a {color: #ffffff; text-decoration: none;}

Также установим ширину для нового класса "col380", и добавим наш размер в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

@media only screen and (min-device-width: 601px) { .content {width: 600px !important;} .col425 {width: 425px!important;} .col380 {width: 380px!important;} }

Создание одной колонки для изображения

Это очень простая строка. Просто установим для изображения 100% ширину письма и убедимся, что его высота установлена в auto.

В наших CSS:

Img {height: auto;}

Создание финальной строки обычного текста

Наконец мы добавим строку текста без рамки внизу.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Создание подвала

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

® Someone, somewhere 2013 Unsubscribe from this newsletter instantly

Добавим требуемые стили для подвала в CSS:

Footer {padding: 20px 30px 15px 30px;} .footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;} .footercopy a {color: #ffffff; text-decoration: underline;}

Оптимизация кнопок для мобильных устройств

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

Удалим цвет из тэга td, к которому он был применен и затем добавить его в тэг a с большой подложкой.

Я использую оба свойства max-width и max-device-width в этом медиа-запросе в попытке избежать баг Oulook.com IE9

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) { body .buttonwrapper {background-color: transparent!important;} body .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;} }

Теперь, когда вы щелкните в любой части цветной кнопки это будет ссылка.

Дальнейшие усовершенствования с использованием медиа-запросов

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

Unsubscribe from this newsletter instantly

и добавляем соответствующие CSS стили в медиа-запрос:

Body .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} body .hide {display: none!important;}

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

Тестируй и двигайся дальше!

Наконец, как и всегда, убедитесь, что вы прошли валидацию (используя W3C Validator - вы можете иметь только одну ошибку с собственным атрибутом "yahoo" тэга body) и протестируй всё ли в порядке, используя реальные устройства и на Интернет-просмотрищиках, наподобие Litmus или Email on Acid .

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

• Tutorial

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

Верстка адаптивных писем с Foundation for Emails

При верстке email письма обычно используется табличная верстка и весьма ограниченный набор css свойств . Табличная верстка подразумевает достаточно большую вложенность, и редактирование уже готового шаблона может стать настоящей головной болью. После принятия решения о переходе на адаптивные письма возник вопрос, как делать эти самые письма. Наш выбор пал на довольно популярный фреймворк Foundation , вернее на его недооцененного младшего брата Foundation for Emails .

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

• Gulp: автоматизации процесса разработки
• Inky шаблонизатор: конвертирует собственную разметку в HTML код
• Sass: CSS препроцессор
• Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
• Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
• Inliner: переводит из таблиц стилей в инлайн стили
• BrowserSync: перезагрузка страницы после изменения исходных файлов
• Image Compression: сжатие изображений в процессе компиляции

Установка достаточно проста и состоит всего из нескольких шагов:

1. Устанавливаем foundation-cli , возможно понадобится использовать sudo

Npm install --global foundation-cli
2. Переходим в директорию проекта и выполняем команду

Foundation new --framework emails
CLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду npm start , после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения.

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

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

Пример кода с использованием Inky:

Put content in me!

HTML на выходе:

Put content in me!

Но не стоит увлекаться слишком большой вложенностью, т.к. вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)

Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».

Более подробно с документацией Foundation for Email можно ознакомиться .

1. Реализация адаптивности в письмах - довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.

Foundation for Emails в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x» , но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})
2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials .

Ваш шаблон будет выглядеть примерно так:

{{> header}} {{> body}} {{> footer}}
В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.

3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head ,
дублируются, помимо этого дублировались теги head и body , как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data . Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

Title: Page Title description: Lorem ipsum. ---

{{ title }}

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

Stuff on top

Stuff on bottom

HTML на выходе:

Stuff on top

Stuff on bottom

6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс.show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс.hide-for-large . Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

Button

HTML на выходе:

Button

8. Не все почтовые клиенты поддерживают background-image , но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.

9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation .

В нашем примере уголок сделан с помощью псевдоэлемента:before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

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

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

Cerberus

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

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

Litmus

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

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

Responsive HTML Email Framework

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

Foundation for Emails

Это набор из различных фреймворков и платформ для оптимизации веб-разработки. Foundation предоставляет разработчикам и дизайнерам простой в использовании CSS-фреймворк , который позволяет быстро создавать эффективные адаптивные электронные письма.

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

Antwort

Antwort не позиционируется, как фреймворк, они называют себя ресурсом готовых шаблонов электронных писем, которые могут адаптироваться к стационарным и мобильным устройствам. Он безупречно работает под iOS и Android , а также с основными почтовыми клиентами, такими как Yahoo !, Gmail и Outlook .

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

Playground от ZURB

Это компания-разработчик HTML5-фреймворка Foundation , а также оператор сервиса, который называется Ink . На сегодняшний день он более известен, как Foundation Email .

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

Mosaico

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

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

Open Source Email Templates

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

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

Responsive Email Patterns

Брайан Грейвз заложил надежную базу для создания и работы с адаптивными электронными письмами. Его проект Responsive Email Patterns представляет собой набор подключаемых шаблонов, с помощью которых можно быстро создать адаптивные письма для использования с вашей любимой платформой электронной почты или непосредственно в почтовом клиенте. Шаблоны включают в себя такие элементы как списки, медиа, навигация и сетки.

HTML Email Templates

Авторитетный сервис электронного маркетинга, помогающий сотням тысяч интернет-маркетологов достигать оптимальных результатов с помощью рассылок. Campaign Monitor предоставляет функционал для тестирования email-кампаний , а также конструктор электронных писем и коллекцию шаблонов писем для рассылки HTML . Она насчитывает более 20 уникальных шаблонов, которые подойдут практически для любых ситуаций. Шаблоны для установления партнерских отношений, деловых переговоров, традиционные шаблоны новостной рассылки и шаблоны для анонсов событий.

Email Design Inspiration by HTML Email Designs

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

MJML - The Responsive Email Framework

Это фреймворк и встроенный язык пользовательской разметки, предназначенный для того, чтобы помочь разработчикам быстро создавать адаптивные шаблоны. Цель MJML — упростить разработку дизайна адаптивных электронных писем. Разметка, которую вы создаете с помощью MJML , затем автоматически преобразуется в полностью совместимый с HTML5 код. Вы можете использовать его в любом почтовом клиенте. Также доступно несколько предустановленных шаблонов.

Respmail

Для тех, кто не хочет возиться со сложными фреймворками, существует Respmail — простое адаптивное решение для электронной рассылки. Оно предоставляет в ваше распоряжение единый шаблон, который можно изменить по своему вкусу. С момента создания HTML шаблон email письма был улучшен и доработан, чтобы обеспечить совместимость со всеми основными почтовыми клиентами.

Passion

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

Free Newsletter Template

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

MailPortfolio

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

День святого Валентина быстро приближается! Именно для этого мы решили включить в обзор очень красивый шаблон Valentine’s Day Email Template , который можно использовать в этот день для продвижения своих предложений, новостей. С помощью множества функций можно настроить этот шаблон для различных случаев использования.

EDMDESIGNER

Это компания потратила много времени на то, чтобы полностью приспособиться к требованиям сообщества. Результатом этого стала функциональная платформа для создания электронных писем. drag-and-drop интерфейс помогает разработчикам создавать красивые макеты. Больше не нужно тратить время на то, чтобы вновь и вновь воссоздавать тот же самый контент. С помощью EDMDESIGNER можно сохранять не только шаблоны писем, но и отдельные элементы. В дальнейшем вы можете снова использовать их в любой из будущих кампаний.

Modern HTML Email

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

Премиум адаптивные HTML шаблоны электронных писем

Мы хотели бы рассказать об адаптивных шаблонах писем для рассылки HTML из премиум-сегмента. Цены на них действительно весьма невысоки (по сравнению с тем, сколько бы вы заплатили дизайнеру за эту работу ). И мы нашли несколько действительно отличных шаблонов.

Idea

Функциональный шаблон, предоставляющий все доступные современные элементы HTML5 , которые могут быть встроены в сам шаблон. Вы сможете легко рассказать о своих ценах, характеристиках продукта с помощью встроенных элементов, делающих весь процесс простым. Шаблон содержит встроенный drag-and-drop модуль, который поможет создавать удивительные письма. Он также полностью совместим с ведущими провайдерами email-маркетинга.

Vibgyor

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

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

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

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