Масштабируемый, «жидкий» или адаптивный: понимание подходов к мобильной верстке email

Мобильные устройства — невероятно популярная тема в дизайне электронной почты, и это логично: количество писем, открытых на мобильных устройствах, выросло более чем на 400% с 2011 года, а в 2013 году этот показатель достиг отметки в 50%. Мы уже обсуждали, насколько важным стал мобильный сегмент для email-маркетологов и необходимость оптимизации кампаний под мобильную аудиторию. Однако не всегда очевидно, какие подходы к мобильной верстке (масштабируемый, «жидкий» или адаптивный) лучше всего работают для пользователей.

**Адаптивный против гибридного email-дизайна: зачем их использовать?**

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

Чтобы усугубить ситуацию, многие маркетологи запутаны тем, какие стратегии на самом деле существуют. Исключая вариант «ничего не делать», мобильный email-дизайн можно грубо разделить на три категории:

— Масштабируемый дизайн

— «Жидкий» дизайн

— Адаптивный дизайн

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

## Масштабируемый дизайн

Начнем с того, что многие email-маркетологи используют сейчас: масштабируемый дизайн. Масштабируемым дизайном можно назвать любой макет, который хорошо работает как на десктопе, так и на мобильных устройствах без использования кода для корректировки таблиц, размеров изображений или скрытия/отображения контента между платформами. Хотя мы используем термин «масштабируемый» для описания этого подхода, вы могли слышать и другие названия: mobile aware, mobile friendly, агностический или mobile first.

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

— Простой (обычно одноколоночный) макет, который хорошо уменьшается.

— Крупный текст, читабельный на экранах любого размера.

— Крупные, удобные для нажатия кнопки призыва к действию (CTA).

Для получения дополнительной информации о масштабируемом дизайне статья Лорен о различиях между масштабируемым и адаптивным дизайном станет отличной отправной точкой. Наша инфографика «Анатомия идеального мобильного письма» — еще один отличный ресурс.

Одна вещь, которую следует помнить при проектировании масштабируемых писем (или любых других), — это Android «Grid of Grim» (сетка ужаса). В некоторых почтовых приложениях Android сообщения не масштабируются вовсе, из-за чего подписчикам приходится прокручивать экран как вертикально, так и горизонтально. В идеале, размещайте самую важную информацию в левой части письма — чтобы логотипы, важный текст и кнопки CTA оставались видимыми без горизонтальной прокрутки.

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

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

## «Жидкий» (Fluid) дизайн

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

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

Однако Campaign Monitor справедливо отмечает, что вам потребуется ограничить ширину писем на больших экранах. Если оставить их полностью «жидкими», письма на таких экранах будут слишком широкими, и текст станет трудно читать.

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

Затем вы можете сделать эту фиксированную ширину «жидкой», воздействуя на нее в медиазапросе.

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

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

## Адаптивный (Responsive) email

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

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

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

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

Адаптивный дизайн может быть потрясающим инструментом, но некоторым дизайнерам было сложно в нем разобраться. Хотя адаптивный email-дизайн — самый мощный инструмент для работы с мобильными устройствами, дизайнеры должны знать, что медиазапросы и адаптивные техники работают не везде. В зависимости от вашей аудитории, вы можете начать использовать адаптивные методы уже сегодня. Мы предлагаем начать с малого, используя простые техники (например, увеличение шрифтов на маленьких экранах), а затем постепенно переходить к более сложным концепциям. Использование mobile-aware техник в качестве фундамента для ваших адаптивных писем позволит вам создавать дизайн, который корректно отображается даже в клиентах, не поддерживающих медиазапросы.

### Какой из подходов к мобильному email лучше?

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