Почему mobile все-таки first, или как не налажать в адаптивном дизайне

Почему mobile все-таки first, или как не налажать в адаптивном дизайне

Рассказывает Ольга Володина, старший контент-маркетолог агентства Out of Cloud

Декабрь-2020. Мы с дизайнером рисуем новогоднюю механику для бренда косметики. Задача игрока — найти продукцию бренда в большой комнате: елка, подарки, мебель, животные, мелкие предметы.

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

По статистике агентства, 70% пользователей открывают контент: рассылки, лендинги, игры, — на экране смартфона. Исключения — на проектах брендов, которые работают в b2b-секторе, или для специалистов вроде фотографов и дизайнеров.
Неадаптивная верстка выглядит по-дилетантски
Неадаптивная верстка выглядит по-дилетантски
Основная особенность адаптивной верстки — динамическая подстановка блоков под разрешения и ориентации экрана. Не важно, будет это десктоп, планшет или смартфон, — картинка от этого не пострадает.

Текст и иллюстрации в адаптивной верстке хорошо читаются, пользователю не нужно зумить, чтобы что-то рассмотреть. Точный признак неадаптивной верстки — уменьшенная копия страницы сайта или email-письма.
Не является рекламой. Источник
Не является рекламой. Источник
Про адаптивное отображение письма маркетолог думает на этапе техзадания
Про адаптивное отображение письма маркетолог думает на этапе техзадания
В Out of Cloud создание рассылки начинается с техзадания для каждого письма. Контент-маркетолог накидывает прототип будущего макета для дизайнера и верстальщика. В нем — тексты, примерные иллюстрации, расположение кнопок.

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

Главный баннер. Для красивой адаптивной верстки на главном баннере не пишут полотно текста. Картинка сожмется, а текст и кнопка исчезнут из поля зрения получателя рассылки.
Карточки товаров. Адаптивная верстка подразумевает, что элементы письма подстроятся друг под друга и общая структура не сломается. Но как это будет выглядеть, зависит от параметров кода. Например, можно прописать, что товары перестраиваются по 1 или 2 в ряд.

Чтобы сэкономить место в письме с каталогом товаров, мы располагаем товары линейными блоками. В мобильной версии этот блок сожмется и будет выглядеть органично.
Не является рекламой. Источник
Верстать адаптивно помогают медиазапросы
Верстать адаптивно помогают медиазапросы
  • Давид Cафарян
    верстальщик
    Медиавыражения позволяют адаптировать страницу для различных типов устройств, срабатывают при изменении ширины экрана viewport (a). При помощи них в письме можно как угодно изменять блоки, заменяя их размеры (ширину, высоту), шрифт, его размер, цвет и начертание, выравнивание, показать или скрыть блок, изображение, текст.
Не является рекламой. Источник
Почтовые клиенты, которые не поддерживают медиа-запросы
Приложения для ПК
Мобильные приложения
Веб-клиенты
IBM Notes 9
Outlook 2007-16
Windows 10 mail
AOL Alto Android app
AOL Alto iOS app
Gmail Android app IMAP
Gmail mobile webmail
AOL Mail
Outllook.com
Яндекс.Почта
Адаптивность верстки строится на свойстве display: inline-block;. Представляю 3 колонки в ряд в макете 660 px. Отступы по краям в макете — 30 px, контентная область — 600 px. То есть одна колонка — 200 px.
Максимальная ширина одного блока на мобильной версии — 300 и 375 px, а сумма двух колонок по 200 px — это 400 px. Получается, что колонки не влезут в область экрана и упадут друг под друга автоматически.
Рассмотрим нестандартный случай, когда блоки разных размеров и не делятся поровну. Допустим, слева у нас блок в 230 px, по центру пустое место в 120 px, а справа — блок 250 px (суммарно 600 px). Требуется, чтобы при адаптации для мобильной версии блоки были отцентрированы друг под другом.

Сумма двух первых колонок равна 230 px + 120 px = 350 px, в таком случае спада 2-й колонки не произойдет на разрешении для iPhone X (375 px), а значит, пустое место останется в строчке с первым блоком.
Что сделать: разместить колонки так, чтобы сумма двух колонок была 376 px (хотя бы на пиксель больше 375, можно взять значение еще больше). То есть 1-я + 2-я = 376 px, также 2-я + 3-я = 376 px.
  • Давид Cафарян
    верстальщик
    Дизайнеру важно знать азы верстки, чтобы заранее понимать, как письмо адаптируется в мобильной версии, и располагать блоки соответствующим образом. Иначе вся красота макета развалится.
Три способа проверить адаптивность письма

1. Не самый верный способ — предпросмотр в рассыльщике. Эта функция не гарантирует 100%-ного совпадения.

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

3. Ручное тестирование. Как показывает практика агентства, это самый верный способ устранить все возможные косяки. У наших технических специалистов созданы специальные тестовые адреса в самых популярных почтовиках. Верстку желательно проверять как на устройствах с IOS, так и на Android.
Ольга Володина,
автор, старший контент-маркетолог
13.05.22
Наталья Самборская,
дизайнер
Евгения Давыдова,
главный редактор
Хотите обсудить проект?
С нас — точные вопросы, предложения и примерный план действий
Нажимая на кнопку, даю согласие на обработку моих персональных данных.
Другие статьи на эту тему
Другие статьи на эту тему