Mobile first — не модное слово, а способ заставить себя решить, что на странице действительно важно. Рассказываем, как подход работает в реальных B2B-проектах, где он помогает, а где требует оговорок.
Адаптивность и mobile first — не одно и то же
Адаптивный дизайн означает, что сайт корректно отображается на экранах разной ширины: от телефона до широкого монитора. Сегодня это базовое требование, и сайт без адаптивности воспринимается как устаревший. Mobile first — это подход к проектированию: сначала продумывается, как страница работает на самом маленьком экране, а потом она расширяется для планшетов и десктопов.
Разница принципиальная. При классическом подходе дизайнер рисует богатую десктопную страницу, а потом «ужимает» её до телефона: блоки складываются в столбик, что-то прячется, что-то уменьшается. В итоге мобильная версия получается компромиссом — всё то же самое, только неудобнее. При подходе mobile first вопрос звучит иначе: если на экране помещается только самое главное, что это? Ответ на него потом определяет и десктопную версию, которая становится не перегруженной, а просторной.
Сколько мобильного трафика на B2B-сайтах на самом деле
Среди руководителей B2B-компаний до сих пор распространено мнение, что их клиенты сидят за рабочими компьютерами и мобильная версия — формальность. Данные аналитики наших проектов говорят другое. На корпоративных сайтах и каталогах производителей доля мобильного трафика обычно составляет 35–55%, на сайтах, куда трафик идёт из мессенджеров и соцсетей, — до 70%.
Сценарии разные. Снабженец получил ссылку от коллеги и открыл её в дороге. Прораб на объекте проверяет характеристики материала. Руководитель просматривает сайт потенциального подрядчика вечером с телефона, чтобы на следующий день обсудить с командой. Да, заявку с прикреплённым техническим заданием чаще отправляют с компьютера. Но первое впечатление о компании нередко складывается именно на маленьком экране, и если оно плохое, до компьютера дело не дойдёт.
Как mobile first меняет процесс проектирования
На практике подход проявляется уже на этапе прототипов. Мы начинаем с мобильной схемы ключевых страниц и задаём себе несколько вопросов.
Что видит человек на первом экране
На телефоне первый экран — это примерно 600–700 пикселей по высоте за вычетом шапки браузера. Туда помещаются заголовок, одна-две строки пояснения и одно основное действие. Если вы не можете уложить суть предложения в эти рамки, проблема не в экране, а в формулировке.
В каком порядке идут блоки
На десктопе блоки могут стоять рядом, и порядок не так важен. На телефоне они выстраиваются в одну колонку, и приоритеты становятся очевидными. Часто именно на этом шаге выясняется, что блок «Наши преимущества» с шестью иконками никому не нужен в начале страницы, а примеры работ — наоборот, нужно поднять выше.
Какие действия доступны одним пальцем
Телефон держат одной рукой, и нижняя часть экрана доступна большому пальцу лучше верхней. Поэтому ключевые действия — позвонить, оставить заявку, добавить в запрос — часто выносят в закреплённую панель внизу экрана.
Типичные проблемы мобильных версий B2B-сайтов
При аудитах мы раз за разом видим одни и те же ошибки. Большинство из них — следствие того, что мобильную версию делали по остаточному принципу:
| Проблема | Почему возникает | Как решаем |
|---|---|---|
| Таблицы характеристик уезжают за экран | Таблица сверстана под ширину десктопа | Перестройка в список «параметр — значение» или прокрутка с закреплённым столбцом |
| Фильтры каталога занимают полэкрана | Боковая колонка просто перенесена наверх | Фильтры в выезжающей панели с кнопкой и счётчиком выбранных |
| Мелкие ссылки и кнопки | Размеры рассчитаны на курсор мыши | Область нажатия от 44×44 пикселей, отступы между ссылками |
| Всплывающие окна перекрывают контент | Попап сделан под десктоп | Отказ от попапов на мобильных или компактная плашка внизу |
| Меню из 40 пунктов | Десктопное мегаменю перенесено целиком | Многоуровневое меню с пошаговым погружением |
| Долгая загрузка | Тяжёлые изображения и скрипты для всех устройств | Адаптивные изображения, отложенная загрузка |
Отдельно стоит сказать о формах. На телефоне каждое поле — это отдельное усилие: тапнуть, дождаться клавиатуры, набрать, перейти к следующему. Правильные типы полей — цифровая клавиатура для телефона, клавиатура с символом «@» для почты — и автозаполнение заметно облегчают задачу. В одном проекте для поставщика электротехнической продукции только настройка типов полей и автозаполнения увеличила долю отправленных с мобильных форм примерно на треть.
Где mobile first требует оговорок
Подход не универсален, и мы применяем его с учётом специфики проекта. Есть сценарии, где основная работа всё-таки происходит на большом экране:
- личные кабинеты B2B-порталов, где дилер формирует заказ на сотни позиций;
- сложные конфигураторы и калькуляторы с десятками параметров;
- таблицы сравнения и прайс-листы, где важно видеть много данных одновременно;
- внутренние административные интерфейсы.
Для таких интерфейсов мы проектируем основную версию под десктоп, но всё равно продумываем мобильные сценарии: проверить статус заказа, найти документ, повторить прошлый заказ, посмотреть остаток. Не нужно заставлять телефон делать всё — нужно, чтобы он хорошо делал то, ради чего его достают из кармана.
Совет студии: посмотрите в аналитике, какие страницы чаще всего открывают с телефонов и какие действия там совершают. Именно эти сценарии заслуживают самой тщательной мобильной проработки, а остальные можно сделать просто аккуратно.
Производительность как часть мобильного опыта
Мобильный пользователь часто работает через нестабильный мобильный интернет, и скорость загрузки для него — часть дизайна. Страница, которая на офисном компьютере открывается за секунду, на телефоне в дороге может грузиться шесть-семь секунд. За это время значительная часть посетителей уходит.
Что закладываем на этапе разработки: изображения в современных форматах и нескольких размерах под разные экраны, отложенную загрузку всего, что ниже первого экрана, минимум сторонних скриптов, шрифты только в нужных начертаниях. Ориентир — первый экран должен отображаться быстрее двух с половиной секунд на среднем мобильном соединении. Эти же параметры учитывают поисковые системы, так что работа над скоростью помогает и продвижению. Подробнее о том, как мы закладываем такие требования в проект, — на странице разработки сайтов.
Тестирование на реальных устройствах
Эмулятор в браузере полезен для быстрой проверки, но не заменяет реальных устройств. На настоящем телефоне по-другому ощущаются размеры кнопок, скорость прокрутки, поведение клавиатуры, вырезы и закруглённые углы экрана. Мы тестируем проекты на наборе устройств, который покрывает основные сценарии: пара актуальных смартфонов на разных операционных системах, один бюджетный телефон с небольшим экраном и слабым процессором, планшет в двух ориентациях.
Бюджетный телефон — самый важный участник этого набора. Если сайт работает быстро и удобно на нём, на флагманах проблем точно не будет.
Чек-лист мобильной версии
- Суть предложения и основное действие помещаются на первый экран телефона.
- Порядок блоков на мобильных соответствует приоритетам, а не просто повторяет десктоп.
- Ключевые действия доступны большим пальцем, кнопки не меньше 44 пикселей.
- Таблицы и фильтры перестроены под узкий экран.
- Формы используют правильные типы полей и автозаполнение.
- Нет всплывающих окон, перекрывающих контент.
- Первый экран загружается быстрее 2,5 секунды на мобильном интернете.
- Сайт проверен на реальных устройствах, включая бюджетный телефон.
Mobile first — это дисциплина приоритетов. Она заставляет выбрать главное и отказаться от лишнего, и в выигрыше оказываются пользователи всех устройств, а не только телефонов.
