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

27.09.201927.05.2017

Хорошая 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 конструктор, с помощью которого легко изменить и оптимизировать любую часть шаблона по своему усмотрению.

Верстка писем ,

Разработка под e-commerce

Перевод

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

Зачем нужно адаптировать письма для мобильных устройств

Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. Во время исследования Campaign Monitor от 2011 года выяснилось, что почти 20% открытий писем происходили на смартфонах и планшетах - в 2009 году эта цифра находилась на уровне всего в 4%. Почти 90% от этих открытий осуществлялись на устройствах под iOS. Сейчас цифры еще выше.

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

Техники дизайна

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

Вот, например, как такое письмо может выглядеть в Outlook:

Ниже представлено то же письмо, но открытое в приложении Mail для iPhone. Явно видна разница двух шаблонов. Мобильная версия уже, в ней меньше необязательных визуальных элементов, но читать её также удобно, как и десктоп-версию. Разница во внешнем виде двух мобильных вариантов заключается в использовании CSS.

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

Что учитывать при создании шаблонов

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

На мобильных устройствах лучше работают одноколоночные шаблоны не шире 500-600 пикселей. Их проще читать, и даже если в них есть какие-то недоработки, все «косяки» в любом случае выглядят лучше.
Согласно гайдлайнам Apple, минимальная целевая область кнопок и ссылок должна составлять 44 x 44 пикселя. Нет ничего более «неюзабельного», чем куча мелких ссылок, в которые сложно попасть на небольшом экране мобильного устройства.
Минимальный отображаемый на iPhone шрифт составляет 13 пикселей. Необходимо учитывать этот факт при создании текста письма - если текст в шаблоне набран меньшим шрифтом, то он будет автоматически увеличен, что может сломать всю вёрстку.
Письмо должно быть лаконичным, а всю важную информацию следует располагать в его верхней части. Скроллить на тачкскринах пальцем сложнее, чем на десктопе мышкой.
Если возможно, стоит использовать свойство display:none; для скрытия необязательных элементов шаблона. Кнопки «шаринга» в соцсети уместны на десктопе, но ими не всегда удобно пользоваться на смартфоне.

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

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

Верстаем мобильные письма

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

Давайте повнимательнее разберемся с тем, как происходит объявление @media . Прежде всего, чтобы создать «мобильный» CSS нужно реализовать какой-то критерий, помощью которого почтовый клиент будет определять какие стили использовать.

Для этого используется оператор @media only screen - он показывает, что почтовый клиент должен быть отображен на экране (вместо того, чтобы, к примеру, быть напечатанным на принтере). После этого в примере кода выше мы задали максимальную ширину экрана устройства в 480 пикселей. Это важно, поскольку у многих (но не у всех) мобильных устройств область отображения данных на экране составляет 480 пикселей или меньше.

Поэтому часто используют max-device-width: 480px (это также ширина дисплея предыдущих моделей iPhone в ландшафтном режиме), но можно и расширить описание, чтобы охватить другие размеры экрана:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }
Вернемся к рассмотренному выше мобильному шаблону письма. Вот как он выглядит в Apple Mail:

В этом примере использован к HTML-таблицам, содержащим текст и изображения, применен класс contenttable . Вот образец кода:

Этот класс играет интересную роль - когда письмо открывают на устройстве с экраном в 480 пикселей или шире, он ни на что не влияет. Однако, когда экран 480 или меньше, то он сужает ширину таблиц до 320 пикселей. Для того, чтобы избежать необычного глюка в почте Yahoo, использованы селекторы атрибутов . В противном случае используется «обычный» CSS. Кроме того, можно включить и такие объявления:

@media only screen and (max-device-width: 480px) { /* mobile-specific CSS styles go here */ table { width: 325px !important; } img { width: 325px !important; } p { display: none !important; } }
Далее мы рассмотрим более сложные техники адаптации мобильных писем для мобильных устройств.

Создание адаптивных шаблонов с колонками «от двух к одной»

Использование одноколоночных шаблонов - хороший выход при оптимизации рассылки для мобильных устройств. При этом существуют способы по созданию адаптивных двухколоночных шаблонов, без необходимости использования длинных CSS в media queries.

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

Золотое правило вёрстки писем гласит: «Везде, где только можно, используйте HTML вместо CSS». Степень поддержки CSS различными почтовыми клиентами может значительно различаться, но все они одинаково работают с HTML. Например, атрибуты вроде align=”left” и cellpadding=”10” - гораздо более надежный инструмент, нежели их аналоги в CSS float: left; и padding: 10px; . Именно эти атрибуты будут использоваться при создании писем в формате «от двух к одной колонке».

Вот так подобное письмо может выглядеть в Outlook 2007:

В пример выше использована таблица-контейнер шириной 640px, которая содержит две таблицы 320px, формирующие колонки. У этих столбцов cellpadding=”20“ - это сделано для того, чтобы контент не прижимался к границам.

При вёрстке для веба обычно используют float:left; , чтобы выровнять столбцы. Однако вместо этого можно использовать align=”left” . Поскольку ширина таблицы-контейнера равняется или больше совокупной ширины двух вложенных таблиц, то использование HTML хорошо сработает. Ниже представлен упрощенный код подобного двухколоночного шаблона:

Column Left Content

Column Right Content

Результат выглядит так:

Таблица-контейнер шириной 640 пикселей, так что шаблон будет двухколоночным. Но в том случае, если ширина экране меньше этого, то контент правой колонки будет «завернут» под левую. Если сделать ширину вложенных таблиц равной 320 пикселям, то при отображении на мобильном устройстве будет получаться одноколоночное письмо, которое совсем не нужно «зумить». Добиться такого эффекта можно с помощью добавления одной строки media query в HTML-код:

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

Добавление «прогрессивного раскрытия» (как в «Википедии»)

Многие сайты используют для конвертации длинного веб-контента в короткий мобильный технику под названием «прогрессивное раскрытие» (progressive disclosure). Она заключается в сокрытии контента за интерактивным элементом вроде кнопки или ссылки, а затем показа этого контента по клику (или тапу). Эту технику использует «Википедия» и множество других проектов - ее можно применять и для вёрстки писем под мобильные устройства (для скрытия и показа контента используется CSS).

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

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

Для того, чтобы добиться такого эффекта сначала нужно создать «рыбу» статьи с ее заголовком и описанием с помощью HTML. Также следует добавить пару классов для отображения кнопок разворачивания/скрытия только на мобильных устройств. Ниже представлена упрощенная версия такого кода:

Основные действия будут осуществляться с помощью классов mobilehide , mobileshow и article . С помощью display:none; кнопка для разворачивания/скрытия контента будет скрываться на десктопе:

A, a { display: none !important; }
Чтобы убедиться в том, что эта кнопка отображается только на мобильных устройствах, придется прибегнуть к media query. Ниже представлен код для этого (включая ранее использовавшиеся сниппеты mobileshow и mobilehide , а также некоторые стили для webkit):

@media only screen and (max-device-width: 480px) { a, a { display: block !important; color: #fff !important; background-color: #aaa; border-radius: 20px; padding: 0 8px; text-decoration: none; font-weight: bold; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; position: absolute; top: 25px; right: 10px; text-align: center; width: 40px; } div { display: none; } a.mobileshow:hover { visibility: hidden; } .mobileshow:hover + .article, .article:hover { display: inline !important; } }
В результате на iPhone будут отображаться кнопки для сворачивания и разворачивания контент. На GitHub представлен весь

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

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

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

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

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

Скачать

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

Скачать

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

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

Скачать

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

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

Скачать

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

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

Скачать

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

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

Скачать

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

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

Скачать

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

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

Скачать

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

Скачать

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

Скачать

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

Что такое адаптивный дизайн в email-писем? Адаптивный шаблон сообщений способен определять размер экрана устройства или размеры окон браузера при помощи @media query , и позволяет предоставить посетителю максимально оптимизированный вариант дизайна сайта. Самой популярной точкой преломления (или breakpoint) считается 480 пикселей (спецификация iPhone), однако технология позволяет вам выставить любые точки преломления, адаптировав ваш сайт под различные размеры экранов, включая мобильные устройства, планшеты или настольные ПК.

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

В то время как масштабируемый дизайн гораздо легче разработать, его работу на различных устройствах сложно называть «работой», так как от этого сильно страдает юзабилити, и структура дизайна может преломляться. Масштабируемые дизайны лучше подходят текстовым email’ам без использования графики (которые, кстати говоря, не очень эффективно работают в торговой индустрии). Адаптивный дизайн не требует разработки под настольные ПК, а вместо этого предлагает возможность предоставить пользователям мобильных устройств наиболее подходящий опыт взаимодействия, в то время, как и пользователи стационарных компьютеров смогут увидеть сообщение во всей красе.

К сожалению, адаптивный дизайн – не панацея от глупости . Некоторые почтовые клиенты вроде Gmail или Outlook «вырезают» все CSS-стили и не поддерживают @media query. Есть информация о том, что большинство пользователей предпочитают использовать не нативные почтовые клиенты через синхронизацию, которые поддерживают @media и позволяют правильно генерировать адаптивный дизайн.

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

Адаптивный шаблон и верстка письма.

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

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

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

3. Разберитесь с последовательность. Вместо того, чтобы уменьшить картинки, просто трансформируйте горизонтальный шаблон в вертикальный, и используйте точку преломления на 480 пикселях. В этом деле стоит поучиться у представленного выше примера Crocs. 2- и 3-колоночные дизайны также можно преобразовать в единый столбец. Несмотря на то, что это интернет-магазин так нахваливает свой адаптивный сайт, формат их email-рассылки пока что оставляет желать лучшего.

Стиль электронных рассылок

4. Используйте читабельный шрифт. Здесь имеется не просто шрифт без засечек. Размер шрифта должен составлять минимум 13 пикселей (минимальный размер шрифта в iPhone), так как меньшие по размеру шрифты автоматически увеличиваются устройствами, что может навредить общему виду шаблона.

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

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

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

Контент

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

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

9. Используйте текстовый контент. Используйте текст вместо изображений, — это позволит вам «ухватить» клиентов, у которых отключено отображение картинок.

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

10. В первую очередь разрабатывайте дизайн под клиентов с выключенными картинками. Иначе вы рискуете рассылать вашим потенциальным клиентам «белый экран смерти».

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

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

13. Повысьте резкость картинок. Экраны с высоким разрешением Retina требуют от вас изображений в высоком качестве и с повышенной резкостью.

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

Призыв к действию (Call to Action)

15. Используйте крупные кнопки. Научитесь правильно разрабатывать под touch-экраны. Для начала следует запомнить, что ссылки и кнопки должны составлять минимум 44х44 пикселей в размере, — таковы правила компании Apple.

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

17. Сделайте кнопки еще больше! Да-да, это правило следует повторить!

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

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

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

21. Оптимизируйте CTA под клиентов с отключенными изображениями. Кнопки – это тоже изображения… зачастую.

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

23. Ссылайтесь на оптимизированные . Не переводите получателей напрямую на ваш сайт.

24. Копируйте промо-коды. Автоматическое принятие кода ссылки для тех, кто перешел на сайт из email’а – это очень эффективная практика.

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

Стоит ли это ваших усилий?

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

Перевод

Зачем нужно адаптировать письма для мобильных устройств