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