Адаптивный дизайн: почему мобильная версия важнее десктопа

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

Почему мобильная версия важнее десктопной

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

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

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

Что такое адаптивный дизайн и чем он отличается от других подходов

Адаптивный (отзывчивый) дизайн означает, что один и тот же сайт подстраивается под ширину экрана: колонки перестраиваются, изображения масштабируются, меню меняет форму. Это не единственный способ сделать сайт доступным на телефоне, поэтому сравним подходы.

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

Mobile-first: как выглядит процесс проектирования

Принцип mobile-first означает, что дизайнер начинает с самого узкого экрана, а затем «расширяет» макет. Это не лозунг, а рабочий порядок действий, и у него есть понятные шаги.

Контрольные точки и сетка

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

На практике хватает трёх-четырёх состояний:

• Узкий экран телефона — одна колонка, крупные отступы по бокам, меню под иконкой.
• Широкий телефон и малый планшет — две колонки карточек, увеличенные заголовки.
• Планшет и небольшой ноутбук — три колонки, часть элементов меню выходит на панель.
• Большой монитор — ограничение ширины контента, чтобы строки не превращались в длинные ленты.

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

Тач-интерфейс: что меняется, когда нет мыши

Мышь и палец — разные инструменты. Курсор точный и умеет «наводиться» на элемент, палец неточный, закрывает половину экрана и не умеет наводиться. Из этого следует ряд практических правил.

Размер и расстояние между элементами

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

Зона большого пальца

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

Что делать с эффектами при наведении

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

Скорость: мобильная версия должна быть лёгкой

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

Что помогает снизить вес:

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

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

Типичные ошибки адаптивных сайтов

Контент урезан ради «лёгкости»

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

Всплывающие окна закрывают весь экран

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

Формы перегружены

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

Фиксированные элементы занимают слишком много места

Закреплённая шапка, чат-виджет, баннер про cookies и нижняя панель в сумме могут съесть половину высоты экрана. Тогда на контент остаётся узкая полоска. Проверяйте суммарную высоту всех «прилипающих» элементов.

Забытые промежуточные размеры

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

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

Эмулятор в браузере полезен, но он не заменяет реальные устройства. Хороший минимум для проверки выглядит так:

1. Откройте сайт на двух-трёх реальных телефонах разных размеров, включая небольшой и старый.
2. Пройдите главный сценарий целиком: от поиска нужной страницы до отправки заявки или оплаты заказа.
3. Поверните устройство в альбомную ориентацию и убедитесь, что ничего не перекрывается.
4. Увеличьте системный размер шрифта: часть пользователей делает так, и вёрстка не должна разваливаться.
5. Отключите быстрый интернет и оцените загрузку на медленном соединении.
6. Посмотрите отчёты по мобильному трафику в аналитике: где посетители уходят и какие страницы дают самый высокий процент отказов.

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

Когда пора обновлять дизайн

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

Итоги

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