Адаптив в письмах: почему «сделать под мобильный» и «мобильный сначала» — разные вещи

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

Две разные стратегии

Обоснование выбора простое: большинство писем открывают с телефона, и первое место по открытиям занимает мобильный почтовый клиент.

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

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

Восемь параметров, которые решают всё

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

Отдельно про кнопку. Рекомендация Apple — минимум 44 на 44 пикселя, Google называет 48. Разумно ориентироваться на большее значение: запас никогда не мешает, а слишком мелкая кнопка на телефоне промахивается пальцем и раздражает.

Ловушка с размером шрифта

Здесь скрыта ловушка, о которой почти не пишут. Дело не в том, что мелкий шрифт плохо видно.

Минимальный размер шрифта, который отображает iPhone, составляет 13 пикселей. Всё, что меньше, система принудительно увеличивает до этого значения. Проблема в том, что увеличивается только шрифт, а контейнер остаётся прежним: текст перестаёт помещаться, строки переносятся не там, где задумано, и вёрстка едет.

То есть подпись в 10 пикселей ломает макет не потому, что её не видно, а потому, что iPhone делает её крупнее без вашего ведома. Практический вывод: не опускайтесь ниже 14 пикселей даже во вспомогательных подписях.

Код: складывание колонок

Складывание колонок делается медиазапросом. Он назначает элементам полную ширину при узком экране, а заодно поднимает размер шрифта и высоту кнопки.

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

Проблема Outlook

Медиазапросы работают не везде, и главный отказ — классический Outlook для Windows. Он использует движок текстового редактора и медиазапросы игнорирует, поэтому письмо в нём останется в том виде, в каком свёрстано изначально.

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

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

Что проверять на телефоне

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

Пункт про яркий свет не шутка. Светло-серый текст, который отлично читается за монитором в помещении, на улице исчезает. Порог контраста 4,5 к 1 существует именно для таких случаев.

Как это устроено в Mailvex

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

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

Частые вопросы

Какая ширина письма правильная?

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

Обязательно ли использовать медиазапросы?

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

Почему нельзя ставить мелкий шрифт в подписях?

iPhone принудительно увеличивает шрифт мельче 13 пикселей до этого значения. Контейнер при этом не меняется, поэтому текст перестаёт помещаться и вёрстка ломается. Держите минимум 14 пикселей даже во вспомогательных элементах.