Мобильная версия важнее десктопной: как это проверить и что из этого следует

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

Сначала измерьте свою долю, а не среднюю по рынку

Средние цифры по стране бесполезны для конкретного бизнеса. Доля мобильных у стоматологии рядом с домом и у поставщика станков различается в разы.

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

Три подхода

Адаптивная вёрстка. Один набор страниц, который перестраивается под ширину экрана. Стандартный подход последних лет.

Отдельная мобильная версия. Второй сайт на поддомене, куда посетителя перенаправляют по типу устройства.

Только десктоп с масштабированием. Мобильной версии нет, страница просто уменьшается целиком.

Сравнение

Что стоит за строчкой «риск расхождения»

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

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

Где адаптивность честно проигрывает

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

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

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

Что делать с формами

Форма — место, где мобильная версия чаще всего теряет заявки, и правится это дешевле всего.

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

Отдельно — всплывающие окна. То, что на большом экране закрывает четверть площади, на телефоне закрывает всё и часто вместе с крестиком.

Как проверить свой сайт за десять минут

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

Смотрите на четыре вещи. Ничего не уезжает вбок. Текст читается без увеличения. В кнопки попадаете с первого раза. Заявка реально уходит и приходит вам.

Если хотя бы один пункт не выполняется, это дороже любых рассуждений об адаптивности.

Что дороже всего переделывать потом

Не внешний вид. Переверстать блоки — работа предсказуемая.

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

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

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

Частая ошибка при измерении

Владелец открывает свой сайт с телефона, всё выглядит нормально, и вопрос закрывается. При этом сайт открыт по домашнему вай-фаю, на дорогом аппарате и по прямой ссылке.

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

Вывод: кому что

Услуги, магазин, лендинг, сайт компании — адаптивная вёрстка. Других разумных вариантов сейчас нет, и обсуждать здесь нечего.

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

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

Проверку с телефона стоит внести в регламент приёмки наравне с проверкой форм и оплаты. Иначе она делается один раз и никогда не повторяется.

Коротко

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