timer ~ 6 мин читать
56046 просмотры
оценить
04 мая 2018

Мы выбираем Media Queries. Манифест Stripo

Stripo / Blog / Мы выбираем Media Queries. Манифест Stripo

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

История проблемы

Речь пойдет об адаптивности писем на мобильных устройствах. В индустрии разработки Email писем существует два метода – один из них заключается в использовании CSS Media Queries, назовем его «Adaptive», а второй – без Media Queries, который получил название «Fluid-hybrid».

Проблема заключается в том, что пока еще существуют мобильные почтовые приложения, которые не поддерживают Adaptive верстку писем. Поэтому в 2015 году Николь Мерлин (Nicole Merlin) предложила Fluid-hybrid метод, который позволяет имитировать адаптивность на не поддерживающих Media Queries почтовых приложениях.

Однако данный метод не является универсальным для всех писем. У него есть недостатки и ограничения, которые для нас критичны.

Манифест Stripo

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

История такова, что индустрия разработки писем никогда не имела четких стандартов, и из-за этого разработчики почтовых приложений были вольны интерпретировать код писем на своё усмотрение. Даже такой почтовый гигант как Google не поддерживал Media Queries в своем Gmail App. До недавних пор.

Уже в ноябре 2016 года Google начали поддерживать в своем приложении много новых стилей, в том числе и медиа запросы! А в октябре 2017 года компания Mail.ru объявила о поддержке медиа запросов в своих приложениях.

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

На текущий момент — середина 2018 года — не поддерживают адаптивность:

  • Gmail app IMAP Android

Письма выглядят как на компьютерах — загружается веб-версия.

Stripo-Manifest-Images-in-Gmail

  • Яндекс.Почта

Мы полагаем, что Яндекс тоже не заставит себя долго ждать и последует примеру Google и Mail.ru. Сейчас загружается веб-версия.

Stripo-Images-in-Yandex

  • Gmail Mobile Webmail

Мы думаем, что использование почты на телефоне с помощью браузера – странный и единичный случай.

Stripo-Manifest-Images-in-Gmail

  • Старые Android 5.1 и 6.0 Vanilla

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

Во Fluid-hybrid методе такие блоки будут выровнены по одной линии, но даже это не стало для нас критерием того, что стоит использовать данный метод. Это связано с тем, что здесь есть общая проблема обоих методов верстки – контент никогда не будет по всей ширине экрана.

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

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

 

C поддержкой Media Queries
Responsive blocks

 

Без поддержки Media Queries
Stripo-Manifest-Images-on-Android

У Fluid-hybrid метода выявились недостатки, которые для нас не менее критичны, но ко всему прочему, не имеющие шансов быть исправленными со временем. Некоторые из них:

  • Для задания отступов по краям контейнеров используются стили Margin-left и Margin-right, которые в целом работают отлично во всех почтовых клиентах;

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

Если больше, то получаем такой эффект: отступы Margin добавляются снаружи контейнера и не участвуют в общем расчете ширины, как например Padding.

Stripo-Manifest-Margins

  • Если в контейнерах находится только текст, то в Outlook, а это 7% в основном корпоративных клиентов, возникает проблема с размерами этих контейнеров в том плане, что таблица с блоками не растягивается на заданную 100% ширину, а сам текст не может расширить таблицу до заданного размера, как, например, картинка;

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

Stripo-Manifest-Additional-Indents

Это можно было бы исправить установкой фиксированной ширины для таблицы с блоками, но тогда возникает проблема у некоторых мобильных почтовиков — письмо теряет адаптивность. Для Fluid-hybrid метода необходимо, чтобы таблице задавались относительные размеры.

  • Из-за стиля font-size: 0, который добавляется к <div> c контейнерами, чтобы избавиться от пустых пространств между ячейками, нужно дублировать стили текста в родительский элемент, например в <td> ячейку таблицы блока Текст. Иначе в Lotus Notes текст будет максимально маленьким. (размер картинки 1:1);

Stripo-Manifest-Font-Size

Исправить это можно автоматически, задавая всем блокам стили текста в CSS. Но если пользователь вручную изменит, например, размер текста в одном блоке, то это изменение не будет работать в Lotus Notes.

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

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

Stripo-Manifest-Fluid-Hybrid-method

Если проблемы Adaptive верстки решатся сами по себе по мере обновления почтовых приложений, то с проблемами Fluid-hybrid верстки придется смириться навсегда. Мы смотрим в будущее и делаем ставку на Media Queries.

Безусловно, если вам нужно сделать одно-два простых письма, можно применить Fluid-hybrid метод. Но если говорить о стратегическом развитии нашего редактора, который строится на годы, то мы выбираем метод с Media Queries.

Если у вас есть идеи, обоснованная критика или способы борьбы с вышеуказанными проблемами — мы с радостью их рассмотрим! Пишите нам в Facebook или на почту — мы открыты для общения.

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!