Мобильная версия или адаптивная вёрстка

Почему мобильные пользователи — главные

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

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

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

Три подхода к мобильным устройствам

Существует три основных способа сделать сайт удобным на смартфонах.

Адаптивная вёрстка (responsive design). Один сайт, один адрес, один HTML-код. Расположение и размеры элементов меняются в зависимости от ширины экрана с помощью CSS. На компьютере — три колонки, на планшете — две, на телефоне — одна.

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

Динамический показ (dynamic serving). Один адрес, но сервер в зависимости от устройства отдаёт разный HTML-код. Это промежуточный вариант, который встречается реже.

Рассмотрим подробнее первые два, так как именно между ними обычно выбирают заказчики.

Адаптивная вёрстка: как работает и в чём сильна

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

Преимущества:

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

Недостатки:

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

Отдельная мобильная версия: когда она оправдана

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

Преимущества:

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

Недостатки:

• Двойная поддержка. Два сайта нужно наполнять, обновлять, тестировать. Контент часто расходится, и на мобильной версии оказывается устаревшая информация.
• Сложности с SEO. Нужно правильно настроить связи между версиями, чтобы поисковики понимали, что это одна и та же страница. Ошибки приводят к дублям и потере позиций.
• Ошибки определения устройств. Планшеты, нестандартные браузеры, новые модели телефонов — сервер может отправить посетителя не туда.
• Урезанный функционал. Пользователь не находит на мобильной версии того, что видел на компьютере, и уходит.
• Проблемы со ссылками. Если кто-то поделился ссылкой на мобильную версию, а её открыли с компьютера, требуется корректное перенаправление.

Сравнение подходов

Что выбрать в большинстве случаев

Для подавляющего большинства новых проектов — корпоративных сайтов, интернет-магазинов, лендингов, блогов — правильный выбор один: адаптивная вёрстка. Она дешевле в поддержке, проще для SEO, работает на любых экранах и рекомендована поисковыми системами.

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

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

Но даже в этих случаях стоит рассматривать отдельную мобильную версию как временное решение и планировать переход на адаптив.

Принцип mobile first

Современный подход к адаптивной разработке — проектировать сначала для смартфона, а потом расширять интерфейс для больших экранов. Это называется mobile first.

Почему это работает:

1. Фокус на главном. На маленьком экране нет места для лишнего, поэтому приходится чётко определить приоритеты: что действительно важно для пользователя.
2. Скорость. Базовая версия получается лёгкой, а дополнительные элементы подгружаются только на больших экранах.
3. Соответствие реальности. Если большинство ваших посетителей приходит с телефонов, логично в первую очередь заботиться о них.

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

Что проверить в мобильной версии

Независимо от подхода, мобильная версия должна соответствовать ряду требований.

Читаемость. Шрифт достаточного размера, чтобы не приходилось увеличивать текст пальцами. Достаточный контраст текста и фона.

Удобство нажатия. Кнопки и ссылки крупные, с отступами между ними, чтобы не промахнуться пальцем.

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

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

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

Скорость. Изображения оптимизированы и подгружаются по мере прокрутки, скрипты не блокируют отображение.

Навигация. Меню легко открыть и закрыть, важные разделы доступны в один-два касания, поиск на виду.

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

Как проверить свой сайт

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

Дополнительно используйте инструменты:

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

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

Итог

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

Коротко о главном:

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

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