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