Почему 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.