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