Мобильная версия сайта: восемь мест, где ломается чаще всего

Больше половины заходов — с телефона, а проверяют с компьютера

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

Из-за этого целый класс поломок остаётся невидимым месяцами. Не потому что их трудно найти — потому что их никто не ищет с той стороны, с которой они существуют.

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

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

Почему «выглядит нормально» — это не проверка

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

Ваш телефон — не средний телефон. Он новее, экран больше, интернет быстрее, а половина сайта уже лежит в кэше после прошлых заходов.

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

Настоящая проверка — это когда вы выполняете конкретную задачу до конца: найти цену, оставить заявку, позвонить. И засекаете, сколько это заняло.

Отдельно проверьте на мобильном интернете, а не по домашнему беспроводному. Разница в скорости бывает пятикратной, и половина проблем видна только так.

Кнопки: размер и попадание

Самая частая и самая дешёвая в исправлении поломка.

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

Вторая беда — кнопки, стоящие вплотную. Два соседних элемента без промежутка означают, что человек регулярно попадает не туда, и не всегда это замечает.

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

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

Формы: где теряются заявки

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

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

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

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

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

Таблицы, прайсы и всё широкое

Второй по частоте источник поломок и первый по последствиям, если у вас каталог.

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

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

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

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

Всплывающие окна

На компьютере окно занимает часть экрана. На телефоне — весь.

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

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

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

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

Текст: размер, длина строки, контраст

Три вещи, которые кажутся вкусовщиной и решают, будут ли читать.

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

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

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

И не запрещайте масштабирование. Некоторые сайты выключают возможность увеличить страницу пальцами ради «стабильности вёрстки» — для людей со слабым зрением это делает сайт непригодным.

Что тормозит именно на телефоне

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

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

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

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

И то, что грузится сразу. Всё, что ниже первого экрана, должно подгружаться при прокрутке. На компьютере разница почти не видна, на телефоне — решающая.

Как проверять по-настоящему

Четыре способа, от самого дешёвого к самому точному.

Уменьшите окно браузера на компьютере до ширины телефона. Ловит грубые поломки вёрстки за минуту, но не ловит ничего про пальцы и скорость.

Режим устройства в браузере. Ближе к правде: эмулирует размер, плотность экрана и касания вместо мыши. Хороший способ проверить формы и попадание по кнопкам.

Свой телефон на мобильном интернете. Единственный способ увидеть настоящую скорость. Обязательно с выключенным кэшем — откройте сайт в приватном окне.

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

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

Вопрос, который раньше был спорным, а сейчас имеет ясный ответ.

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

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

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

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

Чек-лист на полчаса

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

Откройте сайт в приватном окне и засеките, за сколько появится содержимое.

Найдите цену на любую услугу, не пользуясь поиском по сайту.

Оставьте заявку до конца и дождитесь подтверждения отправки.

Нажмите на номер телефона и проверьте, что открывается набор.

Проведите пальцем вбок на нескольких страницах — не едет ли страница целиком.

Откройте страницу с таблицей или прайсом и попробуйте прочитать правый край.

И выйдите с сайтом на улицу в солнечный день. Половина проблем с контрастом видна только там.