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

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

Проверить свою пропорцию стоит первым делом: в Яндекс.Метрике это отчёт «Технологии → Устройства», в Google Analytics — разрез по типу устройства. Если мобильных больше половины, а отказы у них заметно выше десктопных, дальше можно читать как инструкцию.

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

1. Забытый viewport

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

Выглядит она так: meta name="viewport" content="width=device-width, initial-scale=1" — тег в разделе head. Если его нет, телефон покажет страницу целиком, уменьшенной примерно втрое: весь текст микроскопический, всё нужно раздвигать пальцами.

1. 01Откройте сайт в браузере на компьютере и нажмите Ctrl+U (Cmd+Option+U в Safari) — откроется исходный код.
2. 02Нажмите Ctrl+F и найдите слово viewport.
3. 03Если совпадений нет — тег отсутствует, это первое, что нужно исправить.
4. 04Если тег есть, проверьте содержимое: значения maximum-scale=1 или user-scalable=no запрещают увеличивать страницу пальцами и мешают людям со слабым зрением. Их лучше убрать.

2. Мелкий шрифт

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

Рабочий ориентир для основного текста на мобильном — 16 пикселей и выше. Это не жёсткий стандарт, а практика: в частности, мобильный Safari автоматически увеличивает масштаб страницы, когда пользователь ставит курсор в поле ввода с шрифтом мельче 16 пикселей. Страница дёргается, форма съезжает — а причина всего лишь в размере шрифта у поля.

• Основной текст — от 16 пикселей.
• Поля форм — ровно 16 и больше, иначе Safari будет увеличивать масштаб при вводе.
• Подписи, сноски, юридический мелкий текст — не мельче 14; если хочется мельче, скорее всего, этот текст просто не нужен.
• Заголовки — на мобильном обычно приходится уменьшать: десктопные 48 пикселей на узком экране переносятся неудачно и занимают весь первый экран.

Проверка: откройте страницу, наведите на абзац, правая кнопка → «Просмотреть код». В панели справа, в разделе стилей, найдите значение font-size для этого элемента.

3. Кнопки и ссылки, в которые не попасть

Палец — не курсор. В рекомендациях Apple по интерфейсам минимальная тапабельная область указана как 44 на 44 точки; в рекомендациях Google по Material Design — 48 на 48 dp. Цифры разные, суть одна: элемент, в который нужно попасть пальцем, должен быть примерно с подушечку пальца.

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

Отдельно про расстояние: две кнопки размером 44 пикселя, стоящие впритык, всё равно неудобны — палец накрывает обе. Между отдельными целями нужен просвет, обычно достаточно 8 пикселей.

4. Горизонтальная прокрутка

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

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

1. 01Откройте страницу, нажмите F12 и включите режим мобильного просмотра (иконка телефона в панели или Ctrl+Shift+M).
2. 02Выберите ширину 375 пикселей — размер распространённого телефона.
3. 03Прокрутите страницу вбок. Если она едет — виновник есть.
4. 04Перейдите на вкладку Console и выполните: document.querySelectorAll('*').forEach(el => { if (el.getBoundingClientRect().right > document.documentElement.clientWidth) console.log(el) })
5. 05В консоль выпадут элементы, выходящие за правую границу. Обычно это один-два блока, и они сразу подсвечиваются при наведении.

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

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

• Крестик должен быть виден без прокрутки и находиться внутри экрана. Проверяется в режиме мобильного просмотра при высоте окна около 600 пикселей.
• Окно должно закрываться тапом по затемнённому фону — это ожидаемое поведение, и многие пробуют именно его.
• Не показывайте окно сразу при заходе. На мобильном это особенно раздражает, а поисковые системы прямо указывают навязчивые перекрытия основного содержимого как минус для мобильного качества страницы.
• Не ставьте два перекрытия подряд — согласие на cookie плюс окно скидки закрывают экран целиком.
• Проверьте прокрутку после закрытия. Частый баг: окно закрылось, а страница осталась заблокированной, потому что скрипт не снял блокировку.

Отдельная категория — прилипший к низу экрана блок с чатом, кнопкой звонка и уведомлением о cookie одновременно. Вместе они съедают треть высоты экрана телефона. Ревизия таких элементов обычно самая быстрая победа в мобильной версии.

6. Формы, которые неудобно заполнять

Форма на телефоне — самое узкое место всей воронки. Здесь мелочи стоят дороже всего: человек уже готов оставить заявку, и мешает ему техника.

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

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

7. Наведение вместо нажатия

На телефоне нет курсора и нет наведения. Всё, что раскрывается по hover, на сенсорном экране либо не работает, либо работает через раз — первый тап срабатывает как наведение, второй как клик.

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

8. Тяжёлая страница на мобильном интернете

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

В инструментах разработчика есть встроенное ограничение скорости: вкладка Network, выпадающий список рядом со словом «No throttling», выберите «Slow 4G» и обновите страницу с очисткой кэша (Ctrl+Shift+R). Это грубая эмуляция, но она хорошо показывает, что именно посетитель увидит первым и сколько будет ждать.

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

Ещё три мелочи, которые заметны только на телефоне

Эти поломки не ломают вёрстку, но стоят обращений — просто потому, что на телефоне действия совершаются иначе.

• Телефон, который нельзя нажать. Номер в шапке или в подвале, набранный обычным текстом, на телефоне бесполезен: его нужно выделять и копировать. Оберните в ссылку tel: — и звонок совершается одним тапом. То же с почтой (mailto:) и адресом (ссылка на карту).
• Прилипшая шапка на пол-экрана. Логотип, меню, телефон и кнопка заявки, зафиксированные сверху, на десктопе занимают полоску, на телефоне — четверть высоты. Оставьте в фиксированной шапке минимум: логотип и одну кнопку.
• Текст в картинке. Прайс или схема проезда, сохранённые как изображение, на телефоне нечитаемы: масштабировать приходится вручную, а поисковик такой текст не видит. Прайс — это таблица, а не JPEG.

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

Как проверить всё это без телефона

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

1. 01Откройте сайт в Chrome и нажмите F12, затем Ctrl+Shift+M — включится режим устройства.
2. 02Выберите в списке сверху узкий телефон, например с шириной 375 пикселей, и проверьте главную сверху донизу.
3. 03Прокрутите вбок: если страница едет, ищите виновника через консоль (способ выше).
4. 04Пройдите путь клиента целиком: главная → услуга → форма → отправка. Именно на этом пути живут самые дорогие поломки.
5. 05Заполните форму: проверьте, какая клавиатура открывается, видна ли кнопка отправки, где появляются ошибки.
6. 06Проверьте всплывающие окна: виден ли крестик, закрывается ли тап по фону, возвращается ли прокрутка.
7. 07Повторите на ширине 320 пикселей — это узкий край диапазона, и он вскрывает то, что незаметно на 375.
8. 08Проверьте горизонтальную ориентацию: поверните экран кнопкой в панели. Прилипшие шапки и окна на альбомной ориентации ломаются чаще всего.

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

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

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