Подход mobile first в проектировании сайтов

Суть подхода: от маленького экрана к большому

Mobile first — это принцип проектирования, при котором сайт сначала продумывается для самого маленького экрана, а затем расширяется для планшетов и компьютеров. Не «сделали красивую версию для монитора и как-нибудь ужали под телефон», а наоборот: сначала решили, что действительно важно, уместили это на узком экране, потом добавили то, для чего на большом экране появилось место.

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

Противоположный подход называют graceful degradation — «изящная деградация». Сначала делается полная версия, затем из неё убирается и упрощается всё, что не влезает в телефон. Проблема в том, что убирать всегда больно, и в итоге мобильная версия получается перегруженной копией десктопной, где всё есть, но ничем невозможно пользоваться.

Почему телефон стал главным экраном

Для большинства коммерческих сайтов мобильный трафик давно превышает трафик с компьютеров. Это легко проверить в своей Яндекс Метрике: отчёт «Технологии» → «Устройства» покажет, какая доля посетителей приходит со смартфонов. Для сайтов услуг для частных лиц, ресторанов, салонов, доставки, локального бизнеса эта доля обычно особенно высока.

Есть и другие причины ставить мобильную версию во главу угла:

• Поисковые системы оценивают сайт по мобильной версии. Google использует индексацию с приоритетом мобильного контента: то, чего нет в мобильной версии, для него фактически не существует. Яндекс также учитывает удобство сайта на телефонах и отмечает проблемы с мобильной версией в Вебмастере.
• Реклама в значительной степени мобильная. Объявления в Яндекс Директе и таргет во VK показываются на смартфонах, и человек, кликнувший по объявлению, попадает на мобильную версию посадочной страницы. Если она неудобна, рекламный бюджет уходит впустую.
• Ситуация использования другая. С телефона заходят на ходу, в транспорте, в очереди, одной рукой. Внимание рассеяно, связь бывает медленной. Сайт, который грузится долго и требует точных движений пальцем, проигрывает сразу.
• Конверсия часто «кочует». Человек находит компанию с телефона, а заявку оставляет с компьютера вечером — или звонит прямо с мобильного. Мобильная версия может не давать прямых заявок, но именно она формирует первое впечатление.

Mobile first начинается со структуры, а не с вёрстки

Часто mobile first понимают узко: как способ написания CSS, когда базовые стили пишутся для телефона, а медиазапросы добавляют правила для широких экранов. Это правильно, но это лишь последний шаг. Настоящий mobile first начинается раньше — на этапе структуры и прототипа.

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

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

Сократите тексты. Абзац, который на мониторе занимает три строки, на телефоне превращается в десять. Мобильная версия — отличный повод убрать воду из текстов. Обычно выигрывает и десктопная версия.

Решите, что спрятать. Подробные характеристики, длинные описания, второстепенные пункты меню можно убрать в раскрывающиеся блоки или вкладки. Но прятать нельзя то, что важно для решения о покупке, и то, что нужно для SEO: контент должен оставаться в коде страницы, просто быть свёрнутым.

Совет: распечатайте или выведите на экран список всех блоков страницы и попросите коллегу отсортировать их по важности для клиента. Этот порядок и есть основа мобильной версии.

Навигация на маленьком экране

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

Основные решения:

• Меню-«гамбургер». Иконка из трёх полосок, по нажатию открывается список разделов. Привычно и компактно, но всё, что спрятано за иконкой, люди видят реже. Поэтому важные действия стоит вынести из него.
• Нижняя панель навигации. Три-пять ключевых пунктов закреплены внизу экрана, там, куда легко дотянуться большим пальцем. Хорошо подходит для магазинов и сервисов: каталог, поиск, корзина, профиль.
• Закреплённая шапка. При прокрутке вверху остаются логотип, кнопка меню и одна главная кнопка — например, звонок или корзина. Шапка должна быть невысокой, иначе съедает полезное пространство.
• Видимый поиск. Для каталогов с большим ассортиментом поисковая строка на виду часто полезнее любого меню.

Многоуровневые выпадающие меню, которые на компьютере открываются при наведении, на телефоне не работают: наведения там нет. Их нужно заменять пошаговым раскрытием, когда нажатие на раздел открывает список подразделов с кнопкой «назад».

Элементы интерфейса под палец, а не под курсор

Курсор мыши точный, палец — нет. Это главное, что нужно помнить при проектировании мобильных интерфейсов.

Размер нажимаемых областей. Кнопки и ссылки должны быть достаточно крупными, чтобы в них можно было уверенно попасть. Ориентир — область нажатия не меньше 44–48 пикселей по высоте. Маленький крестик закрытия в углу всплывающего окна — классический источник раздражения.

Расстояния между элементами. Если две ссылки стоят вплотную, человек будет промахиваться. Нужен отступ, особенно в списках и меню.

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

Формы. Чем меньше полей, тем лучше. Для каждого поля нужен правильный тип: для телефона — цифровая клавиатура, для email — клавиатура с символом «@». Подписи полей должны оставаться видимыми, когда человек начал ввод. Автозаполнение и маска для номера телефона экономят время и снижают число ошибок.

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

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

Скорость как часть мобильного опыта

Мобильный интернет бывает медленным и нестабильным, а смартфоны слабее компьютеров. Поэтому подход mobile first неизбежно включает заботу о скорости.

Что помогает:

1. Оптимизировать изображения. Отдавать телефону картинки подходящего размера, а не огромные фото для широких мониторов. Использовать современные форматы и сжатие.
2. Откладывать загрузку. Изображения и видео ниже первого экрана подгружать по мере прокрутки.
3. Сокращать скрипты. Каждый виджет, счётчик, чат и анимация добавляют вес и время выполнения. Стоит регулярно проверять, что из подключённого действительно используется.
4. Не грузить лишнее. Если на мобильной версии слайдер скрыт, его ресурсы не должны загружаться вовсе.
5. Проверять показатели. Инструменты оценки скорости от Google показывают отдельные результаты для мобильных устройств, а Вебмастер и Search Console сигнализируют о проблемах с удобством.

Тяжёлый сайт на телефоне — это не только раздражение пользователя, но и потерянные клики из рекламы: человек нажал на объявление, ждёт, не дожидается и возвращается к выдаче.

Как расширять сайт для больших экранов

Когда мобильная версия готова, её расширяют для планшетов и компьютеров. Здесь важно не просто растянуть блоки на всю ширину, а использовать дополнительное место осмысленно.

• Добавлять колонки. Карточки товаров, которые на телефоне шли по одной или по две, на компьютере выстраиваются по три-четыре в ряд.
• Раскрывать скрытое. То, что на телефоне было свёрнуто, на большом экране можно показать сразу: фильтры каталога выносятся в боковую колонку, характеристики — в таблицу рядом с фото.
• Ограничивать ширину текста. Строка текста на весь широкий монитор читается тяжело. Комфортная длина — примерно 60–80 знаков, поэтому текстовые блоки должны иметь максимальную ширину.
• Использовать возможности мыши. Наведения, подсказки, увеличение фото при наведении — допустимые улучшения, если без них всё тоже работает.

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

Типичные ошибки

• Мобильная версия по остаточному принципу. Дизайнер рисует красивый десктопный макет, а мобильный «додумывает» верстальщик. Результат — непредсказуемый порядок блоков и ломающиеся элементы.
• Отдельный мобильный сайт на поддомене. Раньше это было популярно, сейчас почти всегда хуже адаптивной вёрстки: два сайта сложнее поддерживать, контент расходится, возникают проблемы с индексацией.
• Обрезанный контент. Чтобы «облегчить» мобильную версию, из неё убирают тексты, характеристики, отзывы. Пользователь не находит нужного, а поисковик видит урезанную страницу.
• Навязчивые всплывающие окна. Окно на весь экран сразу после входа, с крошечным крестиком, — один из самых быстрых способов потерять мобильного посетителя.
• Мелкий текст. Шрифт, который приходится увеличивать двумя пальцами, — признак того, что о телефоне не думали. Основной текст на мобильном должен быть не меньше 16 пикселей.
• Проверка только в эмуляторе. Режим разработчика в браузере полезен, но не заменяет реальные телефоны: там видно, как работает касание, клавиатура, медленная сеть.

Как проверить, что подход действительно применён

Простой чек-лист для готового или проектируемого сайта:

1. Откройте сайт на своём телефоне и попробуйте выполнить главное действие — заказать, записаться, позвонить — одной рукой.
2. Засеките, сколько времени проходит до появления содержимого на мобильной сети.
3. Проверьте, все ли кнопки удобно нажимаются и не перекрывают ли что-то всплывающие элементы.
4. Убедитесь, что телефон, адрес и мессенджеры кликабельны.
5. Посмотрите в Метрике, как отличаются показатель отказов и конверсия на мобильных и на компьютерах. Большой разрыв — сигнал, что мобильная версия проигрывает.
6. Запишите в Вебвизоре несколько мобильных сессий и посмотрите, где люди застревают.
7. Проверьте, нет ли замечаний по мобильной версии в Яндекс Вебмастере и Google Search Console.

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

Итог

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

Коротко о главном:

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

Сайт, удобный на смартфоне, почти всегда оказывается удобным и на компьютере. Обратное, увы, верно гораздо реже.