Адаптивный дизайн: как сайт должен выглядеть на телефоне

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

Адаптивный, мобильная версия, резиновый: в чём разница

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

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

Mobile first: проектировать с маленького экрана

Принцип mobile first означает, что проектирование начинается с телефона, а затем расширяется до планшета и компьютера. Это не модное слово, а практичный способ мышления. Маленький экран заставляет определить приоритеты: что действительно важно, а без чего можно обойтись.

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

Первый экран на телефоне

На телефоне первый экран — это примерно 360 на 640 пикселей полезной площади, и часть её занимают панели браузера. Сюда должно поместиться главное: кто вы, что предлагаете и что делать дальше.

• Компактная шапка. Логотип, кнопка меню, иконка звонка или корзины. Шапка не должна занимать четверть экрана.
• Короткий заголовок. Одно-два предложения о сути предложения. Длинный слоган на телефоне занимает весь экран.
• Главное действие. Кнопка звонка, заявки, перехода в каталог — видимая без прокрутки.
• Без полноэкранного баннера. Большая картинка, под которой ничего не видно, — частая причина отказов на мобильных.

Мы проверяем первый экран простым тестом: показываем его человеку на три секунды и спрашиваем, чем занимается компания и что можно сделать на сайте. Если ответить не получается, экран перегружен или пуст.

Навигация и меню

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

Что показывать в открытом меню

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

Нижняя панель

Для интернет-магазинов и сервисов с частыми повторными визитами хорошо работает нижняя панель навигации: каталог, поиск, корзина, профиль. Она находится в зоне большого пальца и не требует тянуться к верху экрана.

Поиск

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

Размеры, отступы и зона пальца

Палец — не курсор мыши. Он крупнее, менее точен и закрывает часть экрана. Интерфейс на телефоне должен это учитывать.

• Минимальный размер кликабельной области — около 44–48 пикселей. Мелкие ссылки и иконки, по которым трудно попасть, раздражают.
• Между соседними кнопками и ссылками — достаточный промежуток, чтобы не нажать соседнюю.
• Основной текст — не меньше 16 пикселей. Меньший размер заставляет увеличивать масштаб, а некоторые браузеры при фокусе на мелком поле ввода сами приближают страницу.
• Главные действия — в нижней половине экрана, куда дотягивается большой палец при одноручном использовании.
• Боковые отступы — 16–20 пикселей. Текст, прижатый к краю экрана, читается хуже и выглядит неаккуратно.

Формы и ввод данных

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

1. Минимум полей. Для заявки часто достаточно имени и телефона. Всё остальное менеджер уточнит при звонке.
2. Правильная клавиатура. Для поля телефона — цифровая, для e-mail — с символом «@», для числа — числовая. Это настраивается одним атрибутом, но про него часто забывают.
3. Автозаполнение. Браузер может подставить имя, телефон и адрес, если поля правильно размечены.
4. Подписи над полями. Подсказка внутри поля исчезает при вводе, и человек забывает, что нужно было ввести.
5. Понятные ошибки. Сообщение об ошибке рядом с полем, а не сверху формы, которую уже не видно.
6. Альтернатива форме. Кнопка звонка или мессенджера — многим на телефоне проще написать, чем заполнять поля.

Таблицы, изображения и скорость

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

Широкие таблицы мы либо превращаем в карточки, где каждая строка становится отдельным блоком, либо делаем горизонтальную прокрутку внутри таблицы с закреплённым первым столбцом и явным указанием, что таблицу можно листать. Изображения подготавливаются в нескольких размерах, и телефон загружает лёгкую версию, а не исходник для большого монитора.

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

Как проверять мобильную версию

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

• Отчёты о мобильном удобстве в «Вебмастере» и инструментах Google показывают технические проблемы: мелкий текст, близкие элементы, выход контента за пределы экрана.
• «Яндекс Метрика» позволяет сравнить поведение и конверсию на разных устройствах. Если на телефоне конверсия в разы ниже, это сигнал к доработке.
• Записи сессий показывают, где люди застревают: не могут попасть по кнопке, бросают форму, долго ищут меню.

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

Вывод

Сайт на телефоне — это не уменьшенная копия компьютерной версии, а отдельный опыт со своими приоритетами. Проектируйте с маленького экрана, чтобы сразу определить главное. Делайте первый экран компактным и понятным, меню — простым, кнопки — крупными и удобными для пальца, формы — короткими. Адаптируйте таблицы и изображения, следите за скоростью и проверяйте сайт на реальных устройствах. Хороший адаптивный дизайн незаметен: человек просто находит то, что искал, и делает то, ради чего пришёл, — с любого устройства.