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