Html шаблоны писем – 300+ Free HTML Email Templates & Newsletters — Stripo.email

Содержание

30 html шаблонов для email рассылок / HTML шаблоны / Постовой

Blog by admin: HTML шаблоны: 30 html шаблонов для email рассылок

Привет друзья!
Сразу хочу извиниться за то, что так долго не писал в блог. Очень много работы и мало времени.
Недавно мы решили сделать email рассылку по существующим клиентам. Написать красивый, «продающий» текст и впихнуть его обычным текстом в письмо было бы не кошерно :). Красивей ведь, если такие письма оформлены дизайном.
Итак. Сначала я решил найти существующий, сверстанный email шаблон и его использовать. Результаты поиска вы сможете увидеть ниже. Большинство находок оказались платными. А вы знаете как я не люблю это, ведь Open Source — это всегда прекрасно. Не люблю платного и сам стараюсь побольше делать бесплатного. В итоге отобрал все бесплатное и получился данный пост.
При выборе email шаблона

было несколько критериев:

Адаптивность;
Привлекательность.

В результате — ни один шаблон не подошел.
Пользователей с мобильными устройствами уже приравниваются к количеству людей со стационарными компьютерами. Так что шаблон в любом случае должен быть адаптивен. А если дизайн будет не привлекателен, то лучше уж вообще не использовать готовые html шаблоны. Итог эпопеи — сами нарисовали и сверстали.
Но если нам ни один из этих шаблонов не подошел, то это не значит что он никому не подойдет. У всех разные цели и требования. К вашему вниманию коллекция html шаблонов для email рассылок.
Пожалуйста, не используйте их для спама. Спам — зло.

Смотрите также:
20 новых бесплатных E-mail шаблонов для рассылок

Бесплатный Email шаблон

Шаблон для emai рассылок в серо-голубых тонах. Будет отлично работать на большинстве email клиентов, в том числе и на мобильных.

Адаптивный шаблон для email рассылок

Бесплатный, адаптивный шаблон для email рассылок. Он представляет собой скорее каркас, который вы можете подкорректировать под себя. Он протестирован и отлично работает с множеством email клиентами, включая такие как: Gmail (десктопная версия), Gmail (мобильная версия), Gmail (iOS), Gmail (Android), Email (Android), Outlook Express, Outlook 2003, Outlook 2011 для Mac, Hotmail (Desktop), Hotmail, Windows Mail, Live Mail

Antwort — адаптивный html шаблон для email рассылок

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

ABC Widgets

Brace

Gridworks

Vacation

E-Commerce Style

Classic

Eco

Modern

CyberMan

Еще один адаптивны шаблон для рассылок.

WORN

Email magic

Mistymeadow

Clouds

Airmail

Cotton rag

Mobilized

Textile

In the army now

THE COOL COLLECTIVE

Grunge

Beautiful Emails

Franny’s Fabrics

Gretta’s Garden Goods

Old ornament

Natural

Retro green

Geometric

postovoy.net

7 шагов для создания шаблона для электронного письма HTML: просто и быстро

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

Что мы создаем

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

Начинаем с HTML-документа

Для начала стоит упомянуть, откуда я взял некоторые ресурсы.

Создание с нуля HTML-шаблона электронного письма

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Теперь, как мы уже писали в предыдущем руководстве, вам нужно начать HTML-документ электронного письма с XHTML-документа:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Demystifying Email Design</title> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″/> </head> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<head>

<title>Demystifying Email Design</title>

</head>

</html>

После этого мы можем приступить к созданию остальной части конструкции.

Создайте раздел body и основную таблицу

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

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

Установите для cellpadding и cellspacing ноль, чтобы избежать неожиданных пустых пространств в таблице.

Примечание: мы собираемся оставить border=»1″ для всей таблицы, чтобы мы могли видеть скелет макета. Мы удалим его в конце с помощью простого поиска и замены.

<body> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Hello! </td> </tr> </table> </body>

<body>

<tr>

<td>

Hello!

</td>

</tr>

</table>

</body>

«Если в HTML существует атрибут, используйте его вместо CSS»

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

Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML электронных писем: если в HTML существует атрибут, используйте его вместо CSS. Мы заменим наше маленькое приветствие «Hello!» этой таблицей:

<table align=»center» border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Hello! </td> </tr> </table>

<tr>

<td>

Hello!

</td>

</tr>

</table>

Мы также добавили свойство встроенного стиля, которое устанавливает для свойства border-collapse значение collapse. Если мы этого не сделаем, более новые версии Outlook добавят небольшое пространство между нашей таблицей и обводкой.

Создайте структуру и заголовок

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

<tr>

<td>

Row 1

</td>

</tr>

<tr>

<td>

Row 2

</td>

</tr>

<tr>

<td>

Row 3

</td>

</tr>

</table>

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

<tr>

Row 1

</td>

</tr>

<tr>

Row 2

</td>

</tr>

<tr>

Row 3

</td>

</tr>

</table>

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

Использование отступов

При использовании отступов в электронном письме вы всегда должны указывать каждое отдельное значение (верхнее, правое, нижнее и левое), в противном случае вы можете получить непредсказуемые результаты. Я считаю, что вы можете использовать сокращенную запись, то есть padding: 10px 10px 8px 5px;, но если у вас возникли проблемы вы можете использовать полную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Если у вас возникают еще большие проблемы с отступами (например, если платформа отправки удаляет ваш CSS), не используйте их вообще. Просто создайте пустые ячейки, чтобы задать пространство. Нет необходимости использовать пустые GIF, просто убедитесь, что вы добавляете style=»line-height: 0; font-size: 0;» для ячейки, размещаете внутри нее   и задаете ей явную высоту или ширину. Вот пример:

Также обратите внимание, что использование тегов TD безопасно, а тегов P или DIV — нет. Они ведут себя намного более непредсказуемо.

Итак, мы будем использовать некоторые встроенные CSS для добавления отступов ячейки. Затем мы вставим изображение, добавив альтернативный текст и указав style=»display:block;», что является обычным исправлением, которое не дает некоторым почтовым клиентам, добавлять пробелы под изображениями. Мы разместим изображение по центру, добавив align=»center» к тегу td. Мы также добавим тег alt, который важен для начальной загрузки электронного письма, которая в большинстве случаев будет отключена.

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

</td>

Создайте область контента

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

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

<tr>

<td>

Row 1

</td>

</tr>

<tr>

<td>

Row 2

</td>

</tr>

<tr>

<td>

Row 3

</td>

</tr>

</table>

</td>

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

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Lorem ipsum dolor sit amet! </td> </tr> <tr> <td> 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. </td> </tr> <tr> <td> Row 3 </td> </tr> </table>

<tr>

<td>

Lorem ipsum dolor sit amet!

</td>

</tr>

<tr>

<td>

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.

</td>

</tr>

<tr>

<td>

Row 3

</td>

</tr>

</table>

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

Как бы мне ни хотелось придерживаться процентов, когда у вас есть контент, который имеет определенный размер, может быть сложно преобразовать его в проценты (в этом примере столбцы могут составлять 48,1%, что может привести к путанице). По этой причине, поскольку наши два изображения имеют ширину 260px, мы создадим столбцы, которые также имеют ширину 260px, с ячейкой отступа 20px в середине. (Это составит 540px, что дает ширину 600px нашей таблицы минус отступ 30px с обеих сторон.) Обязательно обнулите размер шрифта и высоту строки и добавьте неразрывный пробел   в ячейку поля.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Мы также установили top для valign обоих элементов, так что они будут вертикально выравниваться по верху, даже если один столбец имеет больше текста, чем другой. Вертикальное выравнивание по умолчанию middle.

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td valign=»top»> Column 1 </td> <td>   </td> <td valign=»top»> Column 2 </td> </tr> </table>

<tr>

Column 1

</td>

<td>

</td>

Column 2

</td>

</tr>

</table>

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

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td valign=»top»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> <img src=»images/left.gif» alt=»» /> </td> </tr> <tr> <td> 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. </td> </tr> </table> </td> <td>   </td> <td valign=»top»> <table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> <img src=»images/right.gif» alt=»» /> </td> </tr> <tr> <td> 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. </td> </tr> </table> </td> </tr> </table>

<tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</td>

<td>

</td>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

Здесь мы с использованием HTML установили ширину изображений 100% ширины столбца. Опять же, если мы сделаем электронное письмо адаптивным, нам нужно будет использовать только медиа-запросы для изменения ширины родительского элемента. Нам придется переопределить высоту в пикселях, потому что использование style=»height: auto» сейчас не будет работать везде (кхе-кхе, Outlook). Итак, мы установим его, используя пиксели. Это означает, что нам с помощью медиа-запросов нужно установить height: auto!important для этих изображений, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Поскольку мы устанавливаем ширину в процентах, нам не нужно это переопределять. Чем меньше вещей нужно переопределить, тем лучше.

Стили футера

Теперь мы добавим отступ в строку футера.

Row 3

</td>

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

<table border=»1″ cellpadding=»0″ cellspacing=»0″> <tr> <td> Column 1 </td> <td> Column 2 </td> </tr> </table>

<tr>

<td>

Column 1

</td>

<td>

Column 2

</td>

</tr>

</table>

Мы создадим еще одну таблицу для иконок социальных сетей. Мы установим для родительской ячейки align=»right». Убедитесь, что вы установили border=»0″ для этих ссылкок в изображениях (чтобы избежать синей границы ссылки) и не забудьте о display: block.

<tr>

<td>

</a>

</td>

<td>

</a>

</td>

</tr>

</table>

</td>

Теперь мы добавим текст и установим ширину ячеек, просто чтобы все было в порядке, даже если между ними будет много пробелов. Мы установим для этой ячейки 75%, а для другой — 25%.

<td> ® Someone, somewhere 2013<br/> Unsubscribe to this newsletter instantly </td>

<td>

® Someone, somewhere 2013<br/>

Unsubscribe to this newsletter instantly

</td>

И все готово! Наш макет завершен.

Запустите тесты электронного письма в формате HTML.

Как мы уже упоминали много раз, HTML в электронном письме — это минное поле. Давайте проверим его через W3C Validator, чтобы убедиться, что ничего сломано. Если вы точно следовали руководству, он покажет, что все в порядке.

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

Смотреть онлайн

Стиль текста

Наш первый ряд — заголовок. Мы будем использовать тег <b> для создания полужирного текста, потому что, как мы уже знаем, если что-то существует в HTML, мы используем это вместо CSS.

<td> <b>Lorem ipsum dolor sit amet!</b> </td>

<td>

<b>Lorem ipsum dolor sit amet!</b>

</td>

Мы также добавим этот встроенный стиль ко всем другим ячейкам текста:

style=»color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;»

Далее нам нужно оформить текст футера, и мы также приведем в порядок ссылку для отмены подписки. Мы будем стилизовать текстовую ссылку для отказа от подписки, используя CSS и HTML — тег font. Это дублирование — лучший способ гарантировать, что ваши ссылки никогда не будут отображаться синим по умолчанию.

<td> ® Someone, somewhere 2013<br/> <a href=»#»><font color=»#ffffff»>Unsubscribe</font></a> to this newsletter instantly </td>

<td>

® Someone, somewhere 2013<br/>

<a href=»#»><font color=»#ffffff»>Unsubscribe</font></a> to this newsletter instantly

</td>

Все в порядке. Время отключить границы и увидеть, как это выглядит красиво. Замените каждое вхождение border=»1″ на border=»0″.

На данный момент, это выглядит немного грустно, контент плавает в пустом пространстве, поэтому давайте в нашей первой таблице шириной 600px добавим:

style=»border: 1px solid #cccccc;»

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

<td>

И это все! Все готово к финальному тесту.

Смотреть онлайн

Заключение!

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

Автор: Nicole Merlin

Источник: https://webdesign.tutsplus.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

webformyself.com

10 шаблонов email писем

Добро. Больше чем уверен, Вам понравится эта статья. А точнее понравится то, что лежит в архиве. А точнее в архивах, а если еще точнее то в 10-и архивах. :)) Затянул. Выкладываю я, дорогие подписчики, 10 офигенных адаптивных шаблонов email писем.

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

Верстать email шаблоны дано не каждому, так как там есть свои правила. Но больших отличий email писем от обычных сайтов на html нет. Единственные отличия, это css внутри html и наличие уже устаревшей на сайтах табличной верстки. Поэтому знания html будет достаточно для создания email письма. Для этого не нужно проходить профессиональное обучение web-дизайну. Но ведь гораздо легче скачать варианты, которые ходят в интернете в свободном доступе. И вот один из таких вариантов. Смотрим, радуемся, качаем.

Email шаблон под кодовым названием «Focus»

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

Скачать Demo

Крутецкий email шаблончик «Summers coming»

Отлично подойдет для рассылки последних статей с вашего блога. Шаблон, как таковой, не имеет тематики.

Скачать Demo

Полностью адаптивный резиновый легкий простой email шаблон

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

Скачать Demo

Симпатичный шаблон email письма в синих тонах под названием «Minty»

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

Скачать Demo

Email шаблон «Nexit» для интернет магазина

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

Скачать Demo

Строгий стильный шаблон для email письма «Simples»

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

Скачать Demo

Email шаблон «Tempo» на тему туризма

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

Скачать Demo

Простой двублочный шаблон «Tubor» для email рассылки

Простой, не обозначенный тематически, шаблон email письма под названием «Tubor».

Скачать Demo

Коричневый странный html шаблон email «Underscore»

Красивый коричневый шаблон для email рассылки со всеми нужными ссылками.

Скачать Demo

Шаблон email письма «Wooshi» email рассылки ресторана или кафе

Потрясный email шаблон рассылки ресторана или суши-кафе. Яркий, многоблочный, функциональный. Мимо такого шаблона будет сложно пройти.

Скачать Demo

Каждый шаблон имеет адаптивную верстку, поэтому они будут также молодцом держаться на мобильных девайсах. Также, каждое email письмо в этой сборке сделано по всем правилам email письма. Есть ссылки на головной сайт, мобильную версию и ссылка, чтобы отписаться от рассылки. Хороший получился пост. Надеюсь, Вы почерпнули из него нужные вам шаблончики. Рад был помочь, до новых постов. Также вы можете скачать сразу все 10 шаблонов email писем, нажав на кнопка «Скачать», которая ниже.

bayguzin.ru

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

Почти 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» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Email Design Inspiration by HTML Email Designs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Благодарим за то, что уделили внимание этой статье!

Данная публикация представляет собой перевод статьи «Top 25 Free Mobile Friendly & Responsive HTML Email Templates 2016» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

20 бесплатных E-mail шаблонов для рассылок / HTML шаблоны / Постовой

HTML шаблоны: 20 бесплатных E-mail шаблонов для рассылок

Старый топик с подборкой шаблонов для E-mail рассылок, который я писал еще в 2013 году, принес приличное количество посетителей в наш блог, да и до сих пор приносит. В связи с тем, что бесплатные html шаблоны для E-mail рассылок людям интересны, я решил сделать продолжение темы и собрал новую коллекцию E-mail шаблонов на чистом HTML. Как не странно, за два года в бесплатном доступе появилось не так уж и много бесплатных решений, но то, что удалось найти, значительно превосходит по качеству любой шаблон из старой статьи.
E-mail рассылки, несомненно, мощнейший инструмент маркетолога, но пользоваться им нужно очень осторожно. Наш народ никогда не был в восторге от рекламных писем в почтовом ящике, но если вы хороший маркетолог, то сумеете войти в контакт с получателем письма. Данная подборка не решит всех проблем, связанных с рассылками и даже не поможет их обойти, ведь обратит внимание получатель на ваше письмо, удалит или отправит его в спам, зависит не от того, какой красивый в шаблоне будет дизайн, а от содержимого. Все, что я хотел сказать этой фразой — не шлите спам или каких-либо шаблонных предложений. Используйте эти html шаблоны с умом и без вреда окружающим.
Еще раз повторю, не рассылайте спам, лучше применить эти шаблоны для рассылки различных поздравлений для ваших клиентов с праздниками. Если у вас есть интернет-магазин и имеется база пользователей, которые действительно хотят получать от вас письма, можете на остове любого html шаблона сделать рассылку с оповещением о какой-либо акции или скидке.
Итак. К вашему вниманию 20 бесплатных E-mail шаблонов для рассылок. Пользуйтесь с умом.

Смотрите также:
30 html шаблонов для email рассылок

Бесплатный HTML + PSD E-mail шаблон: PHStock Template

Современный HTML шаблон для E-mail рассылок с большой фоновой картинкой. Выполнен по подобию одностраничных сайтов / Landing Page. В нем есть маленькая галерея изображений, исходя из этого можно предположить, что данный шаблон будет полезен фотографам или дизайнерам.
Приятным дополнением является наличие PSD исходника. Он вам понадобится, если вы решите существенно изменить внешний вид.
Фоновую фотографию можно с легкостью заменить. Не используйте ворованные фото, лучше найти что-то подходящее на бесплатных фотостоках, о которых я недавно писал в топике «Бесплатные фотостоки с легальными фото».

Passion — адаптивный E-mail шаблон

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

Адаптивный E-mail шаблон для интернет-магазина

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

Бесплатный E-mail шаблон для мероприятия

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

Cupcake — E-mail шаблон в плоском стиле

Простенький, но универсальный шаблон в стиле Flat (плоский стиль). Подойдет практически под любую тематику.

Green Village — хипстерский E-mail шаблон для блогера

E-mail шаблон Green Village выглядит немного по-хипстерски. Отлично подойдет для рассылки еженедельного дайджеста новостей или записей с вашего блога. В архиве вы найдете сам шаблон и его исходник в формате PSD.

Bella — E-mail шаблон в стиле минимализм

Отличный минималистичный бесплатный шаблон с крупной и очень красивой картинкой на фоне. Шаблон подойдет практически для любых целей, таких как рекламная рассылка и пр. Есть PSD.

Photon — E-mail шаблон для фотоблога

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

KATAUSTRIA — адаптивный Email шаблон

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

Boxi — бесплатный E-mail шаблон в стиле Meto / Flat

Интересный шаблон, который совмещает два стиля: Meto и Flat. Состоит из блоков в виде сетки, которые выполняют разные задачи — блоки с тестом, блоки с социальными кнопками, блок с изображением и пр.

Miks Blogger Newsletter — универсальный E-mail шаблон для блогера

Чистый шаблон с откликами ушедшего в прошлое Retro стиля. Хотя дизайн мне очень нравится. Есть PSD.

Новостной HTML + PSD Email шаблон

Чистый шаблон для почтовых рассылок в светлых тонах, предназначен для рассылок новостей с новостного сайта или блога.
Автор шаблона заявляет, что его творение хорошо работает на:
Apple Mail 4, 5, 6
iPhone 5, 4S, 4, 3gs, iPad
AOL Mail Firefox, Explorer, Chrome
Hotmail Firefox, Explorer, Chrome
Gmail Firefox, Explorer, Chrome
Yahoo! Mail Firefox, Explorer, Chrome
Thunderbird текущая версия, Thunderbird 3.0
Outlook.com (Firefox), Outlook.com (Explorer), Outlook.com (Chrome)
Outlook 2011, 2010, 2007, 2003, 2002/XP, 2000
Lotus Notes 8.5, Lotus Notes 8, Lotus Notes 7

12 универсальных шаблонов для рассылок

В архиве вы найдете 12 вариантов оформления одного шаблона.

Бесплатный E-mail шаблон в зеленых тонах

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

3 бесплатных рождественских E-mail шаблона

После скачивания, в архиве весов 29 мегабайт вы найдете 3 абсолютно разных шаблона рождественской тематики. Отличное решение для поздравления клиентов с Новым Годом.
Хоть праздники уже давно прошли, но, возможно, вы читаете данный пост в декабре 2015 или даже 2016. В таком случает вам повезло. Если вы человек из будущего, то, надеюсь, у вас уже за окном летают автомобили и все у всех хорошо.)

Винтажный Email шаблон

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

E-mail шаблон для рассылок с кулинарного сайта

Шаблон в зеленых тонах кулинарной тематики. Есть PSD и версия с разметкой MailChimp.

Classic Newsletter — шаблон с разметкой MailChimp

Еще один адаптивный шаблон с внедренными тегами MailChimp. В архиве есть все исходники, включая PSD и вариант верстки на чистом HTML.

Apps Newsletter — E-mail шаблон для рекламы мобильного приложения

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

Professional Newsletter

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

postovoy.net

Исчерпывающее руководство по составлению почтовых рассылок / Habr

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

Говоря о маркетинговых рассылках, первое, что приходит на ум, это не простые сообщения, а HTML-письма.

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

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

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

Мобильные решения или провал

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

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

Есть два решения для мобильных устройств. В первом случае вы можете создать письмо, изменяющее свои размеры и размеры элементов внутри в соответствии с размерами экрана пользователя. Этого будет вполне достаточно для простых дизайнов. Либо вы можете создать «отзывчивый дизайн» (responsive design), адаптирующийся к различным размерам экранов.

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

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

Отзывчивый дизайн

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

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

Ваш макет должен быть достаточно узким, примерно в диапазоне от 500 до 600 пикселей. Это обеспечит правильное отображение письма и на настольных, и на мобильных устройствах и уменьшит вероятность того, что оно разъедется при изменении размеров.
Убедитесь, что выбран достаточно крупный шрифт. Обращайте внимание на минимальные размеры шрифтов для различных платформ, иначе ваш текст может оказаться больше задуманного размера и испортить макет. Например, минимальный размер шрифта для iOS-устройств – 13 пикселей.
Элементы по которым можно «тапнуть» должны быть пригодны для этого. Это значит, что вы должны сделать их достаточно большими и изолированными от других ссылок, чтобы пользователь мог легко активировать их с первой попытки (потому что, возможно, у вас не будет второй).
Не стесняйтесь использовать display:none чтобы скрыть ненужные элементы. То, что удобно на экранах настольных компьютеров или даже планшетов становиться раздражающим мусором на экране смартфона. «Меньше – лучше» – девиз для маленьких экранов.

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

Типографика

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

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

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

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

Для различных целей различные письма

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

Новостные рассылки

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

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

Например, рассылка от Plastyk с отличным притягательным дизайном.

Уведомления

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

Как пример письмо от Proper Labs. Объявление о запуске новой версии сайта.

Письма с транзакциями

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

Хороший пример письма с транзакцией – One Eyed Cat. Также оно отлично показывает, как оффлайновая компания может использовать email маркетинг.

Маркетинговые письма

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

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

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

Лучшие практики

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

Содержание важнее всего

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

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

Четкий призыв к действию

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

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

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

Тестируйте заблаговременно, тестируйте часто [прим. по аналогии с release early, release often]

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

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

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

Используйте текст «предварительного заголовка»

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

Указывайте ссылку на веб-версию

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

Не усложняйте

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

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

Шаблоны и фреймворки

Написание кода для HTML писем «с нуля» конечно возможно (посмотрите нашу предыдущую статью “How to design a responsive HTML email” чтобы узнать технические подробности), но использование фреймворка или заготовки может значительно ускорить процесс и сделать его более доступным для начинающего разработчика.

Cerberus

Cerberus это набор отзывчивых шаблонов для писем которые нормально отображаются как в мобильном Gmail так и в настольном Outlook. Вы можете использовать блоки кода по отдельности или объединяя их. Есть две версии: одна использует CSS3 Media Queries, а другая нет.

Ink

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

Набор шаблонов сделанных при помощи Ink

Страница Responsive email templates built on Ink – отличное место чтобы начать знакомство с данным продуктом. Там вы найдете четыре шаблона: простой одноколоночный, с большим баннером картинкой (hero-image), макет с боковой панелью (sidebar) и гибрид из последних двух (sidebar-hero).

Шаблоны отзывчивых писем

В дополнение на сайте Zurb есть раздел Responsive Email Templates, где можно найти шаблон новостной рассылки с большим баннером картинкой и полезную информацию по использованию шаблонов.

Образцы элементов для отзывчивых писем

Responsive Email Patterns – это набор образцов и модулей для создания отзывчивых писем. Он включает в себя шаблоны для макетов, навигации, списков и другого.

Действительно простой шаблон HTML письма

Really simple HTML email template является именно тем о чем говорит его название. Это супер простой шаблон HTML письма с очень простым дизайном. Это один столбец со встроенным призывом к действию и четкой целью.

Мастер Шаблонов

Template Builder от CampaignMonitor позволяет бесплатно создавать HTML шаблоны писем буквально за минуты. Результат будет полностью протестирован и подготовлен для мобильных. Вы сразу можете начать использовать его на сайте CampaignMonitor или просто скачать для любых дальнейших действий.

Бесплатные шаблоны

Free Email Templates от той же самой компании – это огромный набор бесплатных шаблонов которые можно скачать и использовать на свое усмотрение.

HTML Email Boilerplate v 0.5

HTML E-mail Boilerplate является хорошей отправной точкой для создания писем. Он не содержит дизайна или макета, что позволяет избежать многих проблем рендеринга в почтовых клиентах.

E-mail Boilerplate

E-mail Boilerplate от Emailology включает в себя все основы, необходимые для создания HTML писем. Исходный код содержащий CSS и HTML очень подробно документирован и даёт все нужные инструкции по использованию.

Antwort

Antwort предлагает вам идеально отзывчивые макеты для писем, которые адаптируются к самым различным экранам. Он поддерживает все основные почтовые клиенты, включая Outlook, и Gmail.

Новостные шаблоны от GraphicMail

GraphicMail предлагает около 100 бесплатных шаблонов. Для использования необходимо зарегистрировать бесплатный аккаунт.

Шаблоны от ThemeForest

ThemeForest предлагает множество премиум шаблонов. Стоимость колеблется от $6 до $19. Премиум шаблоны иногда бывают проще в использовании, а также могут содержать дополнительные функции, которые трудно найти в бесплатных.

Stamplia

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

Инструменты

Плагин e-Newsletter для WordPress

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

«Пуленепробиваемые» фоновые изображения

Bulletproof background images еще один сервис от CampaignMonitor. Это простой инструмент получения кода для фонового изображения ваших писем. Просто укажите URL желаемого фонового изображения, резервный цвет и то должно ли это правило быть применено ко всему телу письма или только для одной ячейки таблицы. В результате вы получите готовый HTML код который нужно вставить в свой шаблон.

«Пуленепробиваемые» кнопки

Еще один «пуленепробиваемый» сервис от той же самой компании. Bulletproof email buttons позволяет создавать красивые кнопки для ваших писем. Они идеально подходят в качестве элемента призыва к действию.

Litmus

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

Litmus Scope

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

Примеры для вдохновения

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

Whalers

St. Theresa Auction

Online Store Guys

Inspirations Point

Everywhere

Sphere

Form Function & Class

Boden

Bon Appetit

Sevenly

Path

Zombie Survival Guide for Email Marketers

Fooda

Designer News

Charity: Water

EwerkNews

Interworld Plastics

Zehno

PSD Freebies

WalkieTalkie

Еще больше галерей для вдохновения

Really Good Emails сборник дизайнов по темам, многие из которых снабжены комментариями о том почему они хороши.

Email-Gallery дает вам возможность просматривать дизайны фильтруя их по цвету, типу и другим параметрам.

CampaignMonitor’s Email Inspiration позволяет делать выборку по количеству колонок, типу письма (объявление, рассылка, или приглашение).

Look What You Can Do – сайт от MailChimp. Содержит множество писем для вашего вдохновения отправленных при помощи этого сервиса когда либо.

HTML Email Gallery – галерея дизайнов в хронологическом порядке.

The Email Design Gallery – блог на Tumblr который собирает примеры отличных дизайнов из различных источников.

Beautiful Email Newsletters – разбитая по категориям галерея с функцией поиска.

Сервисы рассылок

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

ConstantContact

В ConstantContact цены начинаются от $20 за месяц для простых email кампаний. В эту цену входят возможности управления контактами и социального обмена. Более дорогие тарифные планы включают в себя дополнительные функции такие как отслеживание.

MailChimp

MailChimp предлагает бесплатный план “Entrepreneur” (предприниматель) который поддерживает отправку до 12 000 писем для 2 000 подписчиков. На платных тарифах вы сможете работать с куда более большими объёмами.

ActiveCampaign

В ActiveCampaign тарифы начинаются от $9 за месяц для 500 контактов. Есть специальные планы для предприятий с бухгалтерской отчётностью и другими сервисами.

GetResponse

Тарифы GetResponse стартуют от $15 в месяц для 1000 подписчиков. Есть скидки при оплате за год.

AWeber

Сервис AWeber позволяет начать работу всего с $1 за первый месяц. Далее $19 в месяц с неограниченным количеством сообщений для 500 подписчиков.

Amazon SES

Amazon SES (Simple Email Service) это почтовая служба только для отправки сообщений. Если вы уже являетесь пользователем Amazon EC2, то вы можете отправлять до 2000 писем в день бесплатно. В противном случае, сообщения тарифицируются по $0,10 за тысячу, с дополнительными сборами за передачу данных и вложений. Такие цены делают этот сервис одним из наиболее доступных.

Emma

Цены в Emma начинаются с $45 за неограниченный объем писем для 2500 абонентов. Также есть скидка в 20% для некоммерческих организаций и при годовой предоплате.

HubSpot Email

HubSpot Email предлагает множество инструментов для отслеживания и для получения еще большего количества подписчиков. Компания является частью большого сервиса HubSpot цены в котором начинаются от $200 в месяц за первые 100 контактов (плюс $100 в месяц за каждую 1000 контактов сверху), и выше.

GraphicMail

Тарифы в GraphicMail основываются либо на том сколько писем вы отправляете либо на том сколько у вас подписчиков. В первом случае цены начинаются менее чем с $10 за месяц, во втором с 25$.

Заключение

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

Изображение iPhone взято со страницы Kārlis Dambrāns.

habr.com