Теперь, когда Apple Mail Privacy Protection доминирует в среде прочтения, дизайн email-рассылок должен учитывать несколько сценариев — включая веб-почту, десктоп и мобильные устройства — часто без особой прозрачности. Если вы не знаете, где именно ваша аудитория открывает письма, использование гибридного или адаптивного дизайна просто необходимо. Это отличный способ гарантировать хороший опыт для ваших подписчиков везде, независимо от того, где и как они взаимодействуют с вашими письмами. Адаптивный или гибридный дизайн email-рассылок имеет огромное значение!
Но в чем разница между гибридным и адаптивным дизайном email-рассылок, почему эти методы важны и какой из них стоит выбрать? Читайте дальше, чтобы понять, какая стратегия дизайна лучше всего подходит для ваших кампаний.
## Что такое гибридный дизайн email-рассылок?
Гибридный дизайн email-рассылок адаптируется к размерам устройств без использования медиазапросов и контрольных точек (breakpoints), которые применяют стили в зависимости от таких условий, как ширина экрана. Поскольку некоторые почтовые клиенты удаляют или игнорируют медиазапросы, гибридный дизайн помогает создать удобный для мобильных устройств опыт в большем количестве сред. Вы всегда можете добавить медиазапросы в качестве улучшения для клиентов, которые их поддерживают.
Гибридный дизайн email становится сложным, когда вы начинаете использовать его в сложных макетах. Хотя существуют методы для работы с макетами из двух, трех и четырех колонок, их сложнее реализовать, и они более хрупкие, чем соответствующий подход «целевых классов и переопределения» (target-classes-and-override), используемый в традиционных адаптивных письмах.
## Что такое адаптивный дизайн email-рассылок?
Адаптивный дизайн email-рассылок меняет свой размер на разных устройствах для сохранения стиля и удобства использования, что означает, что подписчики получают отличный опыт на любом устройстве или в любом почтовом клиенте.
Адаптивный дизайн email-рассылок использует медиазапросы для преобразования таблиц и изображений фиксированной ширины на десктопах в гибкие (fluid) элементы для экранов меньшего размера. Что это значит для подписчиков? Маркетинговые email-кампании, использующие адаптивный дизайн, отлично выглядят и сохраняют удобство использования на любых устройствах.
## Как создать гибридное email-письмо
Поскольку некоторые почтовые клиенты игнорируют медиазапросы, но многие из ваших подписчиков пользуются этими сервисами, дизайнеры могут использовать гибридный или «губчатый» (spongy) дизайн email-рассылок.
Гибридное кодирование по-прежнему использует гибкие таблицы и изображения, но, в отличие от адаптивных писем, эти таблицы и изображения являются гибкими по умолчанию. Вместо использования медиазапросов для запуска этих гибких состояний на экранах меньшего размера, гибридное кодирование предпочитает условные комментарии Microsoft для сдерживания гибких таблиц на больших экранах.
Подход гибридного кодирования, иногда называемый «губчатым» кодированием (spongy coding), был впервые применен Фабио Карнейро (Fabio Carneiro) из MailChimp и популяризирован Майком Раганом (Mike Ragan) и Николь Мерлин (Nicole Merlin).
Несмотря на вариации подхода, гибридные email-рассылки работают на следующих принципах:
— Гибкие таблицы и элементы по умолчанию
— CSS-свойство max-width для ограничения ширины на десктопе
— Условные комментарии MSO для ограничения ширины в Outlook
Давайте рассмотрим базовые шаги по созданию гибридного email-письма.
### Шаг 1: Создайте гибридную таблицу с гибкими процентными значениями
Гибридный дизайн email-рассылок начинается с гибридной таблицы. Однако он отличается от адаптивного кода с медиазапросами, поскольку вместо использования фиксированных значений в пикселях для ширины таблицы и изображения, мы используем гибкие процентные значения. Этот метод позволяет содержимому письма перетекать, заполняя экраны разных размеров.
|
### Шаг 2: Добавьте CSS-свойство max-width
Таблицы с шириной в процентах удобны для мобильных устройств. Тем не менее, если бы мы оставили таблицу такой, как на первом шаге, наши подписчики видели бы раздражающе широкие письма на десктопе. Мы можем добавить CSS-свойство max-width к таблице и изображению, чтобы предотвратить это.
|
### Шаг 3: Используйте условные комментарии для Microsoft Outlook
В большинстве случаев добавление CSS-свойства max-width удерживает ширину в пределах. Однако Microsoft Outlook не похож на большинство случаев, поскольку в настоящее время он не поддерживает свойство max-width. Чтобы учесть это, необходимо использовать условные комментарии для создания скрытых «призрачных» таблиц фиксированной ширины, которые видит только Outlook.
Этот фрагмент кода по сути говорит Outlook обернуть наше содержимое в таблицу фиксированной ширины, содержащуюся внутри этого комментария.
Поскольку все эти элементы по умолчанию являются гибкими, наше письмо отлично работает практически на любом экране небольшого размера. А поскольку оно не полагается на медиазапросы для запуска этих адаптивных стилей, оно также работает в проблемных клиентах, таких как Gmail.
|
## Каковы преимущества отправки гибридных email-рассылок?
Да, создание гибридных email-рассылок требует нескольких дополнительных шагов. Однако эти усилия того стоят (и ниже мы расскажем, как сэкономить время)! 😀
### Совместимость между клиентами
Если бы все ваши подписчики использовали один и тот же почтовый клиент и одно и то же устройство, процесс проектирования и тестирования email-рассылок был бы намного проще. Однако реальность более нюансирована, и вам необходимо адаптировать дизайн письма для совместимости между различными клиентами. Гибридный дизайн email-рассылок дает вам наилучшие шансы обеспечить превосходный опыт для подписчиков в любых условиях.
### Творческая свобода
У вас есть видение дизайна email-рассылки, и гибридный дизайн гарантирует, что почтовые клиенты не внесут в него свои коррективы. Настройка условий в дизайне письма дает вам творческий контроль над внешним видом и ощущением от ваших кампаний.
### Поддержка динамического контента
Динамический контент обновляет текст и изображения для каждого отдельного подписчика и является масштабируемым способом создания гипер персонализированного опыта — при условии, что подписчики могут его видеть. Гибридный дизайн email-рассылок предотвращает ситуации, когда контент трудно увидеть или взаимодействовать с ним на мобильных устройствах.
### Улучшение доставляемости
Показатели вовлеченности, такие как рейтинг кликов (CTR) и уровень отписок, влияют на вашу доставляемость, а удобная мобильная email-рассылка способствует улучшению опыта подписчика.
### Готовность к будущему
Пытаться угнаться за последними моделями телефонов и их размерами — игра в проигрыш, поэтому вам следует использовать гибридный дизайн, чтобы адаптироваться ко всем устройствам.
## Почему email-рассылка является неадаптивной
Неадаптивное письмо — это письмо с фиксированной шириной, которое не меняется в зависимости от размера устройства, или письмо с многоколоночным макетом, который слишком широк для мобильных устройств. Давайте рассмотрим пример неадаптивного письма.
Вот как выглядел бы код для секции письма с изображением, заголовком и небольшим текстом.
|
Видно, что хотя мы используем контейнерную таблицу шириной 100% для фонового цвета на всю ширину, контент обернут в таблицу шириной 600 пикселей. Точно так же изображение имеет ширину 600 пикселей. На десктопе эта часть письма выглядит так:
Если бы мы просмотрели это письмо в мобильном клиенте Gmail, мы бы увидели следующее:
А если бы мы просмотрели его на iPhone, мы бы даже начали терять текст:
Таблица и изображение фиксированной ширины не позволяют этому контенту сжиматься, чтобы поместиться на экране меньшего размера. Как мы можем это исправить? Как сделать эти элементы гибкими? С помощью медиазапроса в секции head нашего HTML-кода.
## Как создать адаптивное email-письмо
Адаптивный дизайн email-рассылок использует CSS-медиазапросы для преобразования фиксированных элементов на десктопах в гибкие для экранов меньшего размера. Вы можете изучить пост в сообществе Litmus о том, как написать адаптивное письмо с нуля, или посмотреть наш вебинар «Адаптивный email 101» (Responsive Email 101), чтобы подробно ознакомиться с кодом. А пока давайте рассмотрим базовые шаги по созданию адаптивного письма.
### Шаг 1: Установите правило max-width для больших экранов
Медиазапросы позволяют нам указать, как стилизовать элементы при определенных обстоятельствах. Мы передаем медиазапросам некоторые условия и стили, которые применяются к нашему письму при выполнении этих условий. В случае с email-рассылками и мобильными устройствами этими условиями являются размеры экрана.
Правило **max-width: 600px** — это размер нашего экрана. В этом случае любые экраны шире 600px будут отображать версию нашего письма с фиксированной шириной. Экраны, размер которых меньше 600 пикселей, заставят стили в медиазапросе отрендериться, что позволит нам переопределить инлайновые стили в нашем письме и оптимизировать дизайн для экранов меньшего размера.
### Шаг 2: Создайте адаптивный медиазапрос для таблиц и изображений
В нашем медиазапросе мы можем переопределить эти фиксированные ширины, нацелившись на эти классы и применив соответствующие стили.
@media screen and (max-width: 600px) { .responsive-table { width: 100% !important; } .responsive-image { height: auto; max-width: 100% !important; } }
Затем добавьте классы к таблице и изображениям, которые вы хотите сделать адаптивными:
|
Наше письмо будет гибким в почтовых клиентах, поддерживающих медиазапросы, и будет отлично работать на экранах меньшего размера.
### Шаг 3: Настройте колонки на мобильных устройствах для удобства чтения
Вы можете использовать эту же технику нацеливания на классы и переопределения стилей, чтобы изменить макет вашего письма. В макете с двумя или тремя колонками вы можете нацелиться на колонки и сделать их 100% шириной на мобильном устройстве, чтобы создать удобный для чтения одноколоночный макет.
### Шаг 4: Настройте другие элементы дизайна для удобства использования
Медиазапросы также позволяют вам настраивать размер текста (что полезно, если вы используете веб-безопасные шрифты), ссылок и кнопок на мобильных устройствах — увеличивая или уменьшая размер каждого элемента для улучшения читабельности и удобства использования.
## Каковы преимущества отправки адаптивных email-рассылок?
Подписчики должны получать неизменно положительный опыт от взаимодействия с вашими письмами независимо от их устройства, и адаптивные email-рассылки помогают вам отправлять красивые и удобные письма.
### Мобильная оптимизация
Более половины всех писем открываются на мобильных устройствах, а это значит, что оптимизация под устройства с меньшим экраном так же важна, как и под десктоп.
### Улучшенный пользовательский опыт
Существует 300 000 потенциальных вариантов отображения для каждого отправляемого вами письма — мы даже подсчитали, сколько существует различных вариантов отображения email-рассылок. Адаптивный дизайн письма дает вам больше шансов на то, что ваше письмо будет отображаться корректно на экранах разных размеров, у разных провайдеров услуг email, операционных систем, почтовых клиентов и при различных настройках изображений.
### Увеличение показателя кликабельности (CTR)
Показатели вовлеченности, такие как рейтинг кликов, можно сказать, важнее, чем уровень открытий. Тем не менее, подписчики не будут кликать по элементам, которые отображаются некорректно. Адаптивные письма, с которыми приятно взаимодействовать, имеют больше шансов на вовлеченность.
### Единообразие бренда
Единообразие брендинга помогает подписчикам узнавать ваш контент и взаимодействовать с ним, и вам нужно, чтобы письма выглядели одинаково как на десктопе, так и на мобильных устройствах.
### Соответствие стандартам доступности
Иерархия контента и интервалы — это лучшие практики доступности email-рассылок, а адаптация контента к экранам разных размеров поддерживает удобство использования.
## Стоит ли вам создавать гибридное или адаптивное email-письмо?
Как мы убедились, у традиционного адаптивного и гибридного дизайна email-рассылок есть свои плюсы и минусы. При принятии решения о том, какой из них использовать, задайте себе эти три вопроса:
— Нужно ли мне поддерживать Gmail?
— Насколько сложен мой макет?
— Насколько мне комфортно со сложным кодом?
Вот как ваши ответы на эти вопросы влияют на то, какой дизайн email-рассылок вам следует использовать.
### Когда использовать гибридный дизайн email-рассылок
Если, проанализировав, где ваши подписчики открывают письма, вы понимаете, что вам нужно поддерживать такие клиенты, как приложение Gmail или Inbox, — или вы хотите подготовить свои кампании к будущим обновлениям почтовых клиентов, — тогда гибридное кодирование, скорее всего, будет лучшим подходом. Хотя сложные макеты могут запутать, а с гибридным кодированием знакомы меньше дизайнеров и разработчиков, вложение времени в изучение и тестирование этого подхода окупится в долгосрочной перспективе.
— Ваша аудитория включает пользователей с самым широким спектром почтовых клиентов и устройств, включая старые
— Вы хотите более гибкое решение, сочетающее адаптивный дизайн с вариантами фолбэка (fallback) для старых почтовых клиентов
— Вы предпочитаете более простую реализацию, использующую смесь адаптивных элементов и фолбэков для более широкой совместимости
— Вы хотите найти баланс между адаптивностью и совместимостью
### Когда использовать адаптивный дизайн email-рассылок
Требуется некоторая практика и эксперименты, чтобы стать профессионалом в разработке надежных гибридных писем. Если у вас нет знаний или времени для изучения гибридного кодирования, то вам может подойти традиционный адаптивный подход.
Вот несколько признаков того, что пора использовать адаптивный дизайн:
— Ваша аудитория в основном использует современные почтовые клиенты и мобильные телефоны
— Вы хотите автоматически обеспечивать единообразный пользовательский опыт на экранах разных размеров и устройствах
— У вас есть ресурсы для создания и тестирования сложного кода для обеспечения совместимости с различными почтовыми клиентами и устройствами
— Вы хотите оптимизировать читабельность и удобство использования для вашей мобильной аудитории.
## Нужна отправная точка?
У вас не хватает времени или ресурсов на создание собственных шаблонов гибридных или адаптивных email-рассылок? Ознакомьтесь с нашим Free Email Templates Hub (Центром бесплатных шаблонов email-рассылок), где мы представляем десятки современных, высококачественных шаблонов, которые можно бесплатно скачать и использовать.
Каждый шаблон имеет адаптивную, гибридную и mobile-aware версию, и его можно легко настроить под ваши нужды. Вы также можете скачать обычный HTML или экспортировать его напрямую в Litmus Builder, чтобы настроить для вашего ESP (Email Service Provider) по выбору.
*Эта статья была впервые опубликована 21 апреля 2016 года. Последнее обновление: 11 октября 2023 года.*
Related Posts
Принципы конверсионного дизайна для специалистов по email-маркетингу
Понимание медиазапросов в email-рассылках
Почему массовые рассылки и спам-рассылки остались в прошлом
Доставка в «Основное» или попадание во вкладку «Промоакции» Gmail
Джейми Дихиансан о Basecamp, email-рассылках и универсальности в дизайне
Представляем Email Academy — бесплатную обучающую платформу для маркетологов