Сайт, который выглядит нормально в уменьшенном окне браузера, может быть непригоден на телефоне. Разбираем, что и чем проверять.
Коротко
- Проверять нужно на реальном устройстве.
- Палец толще курсора.
- Разрыв конверсии показывает проблему.
- Проверку повторяют после каждого обновления.
Почему окна браузера недостаточно
| Чего не видно в браузере | Почему важно |
|---|---|
| Размер пальца | Мелкие элементы не нажать |
| Реальная скорость сети | Страница грузится дольше |
| Клавиатура закрывает пол-экрана | Форма уезжает |
| Поведение при прокрутке | Липкие блоки мешают |
| Как выглядит на ярком свету | Контраст текста |
| Реальные шрифты устройства | Текст может съехать |
Первая и третья строки не воспроизводятся ни в каком режиме разработчика. Поэтому итоговая проверка всегда делается на настоящем телефоне, а инструменты браузера годятся для быстрой правки, но не для приёмки.
Что проверять
| Элемент | Проверка |
|---|---|
| Телефон | Нажимается и звонит |
| Кнопки | Попадаете пальцем с первого раза |
| Форма | Заполняется до конца |
| Клавиатура | Цифровая для телефона, почтовая для адреса |
| Меню | Открывается и закрывается |
| Всплывающие окна | Закрываются пальцем |
| Таблицы и картинки | Не уезжают за край |
| Текст | Читается без увеличения |
Четвёртая строка — мелочь, которая заметно раздражает. Буквенная клавиатура в поле телефона заставляет человека переключаться вручную: тип поля задаётся один раз и больше об этом не думают.
Чем проверять
| Способ | Что даёт |
|---|---|
| Свой телефон | Основная проверка |
| Телефон коллеги другой марки | Другой браузер и размер |
| Режим устройства в браузере | Быстрая проверка вёрстки |
| Инструменты проверки скорости | Как грузится на мобильной сети |
| Записи сессий с мобильных | Как ведут себя реальные люди |
Вторая строка находит то, что не находит первая. Разные устройства и браузеры отображают страницу по-разному: две-три модели покрывают большую часть случаев, и для этого достаточно попросить коллег. Про скорость — в статье о том, чем проверить скорость сайта.
Частые проблемы
Встречается постоянно
- Телефон написан текстом, не ссылкой
- Кнопка ниже первого экрана
- Всплывающее окно не закрывается
- Таблица уезжает за край
- Картинка занимает весь экран
- Мелкий текст в подвале
Как проверить
- Нажать на номер
- Открыть и не прокручивать
- Попробовать закрыть пальцем
- Прокрутить вбок
Четвёртая строка слева ломает страницу целиком: если что-то уезжает за край, вся страница начинает прокручиваться вбок. Проверяется движением пальца влево-вправо на каждой странице — занимает секунды.
Разрыв в конверсии как индикатор
Открыть аналитику по устройствам
Раздельно.
Сравнить конверсию
Мобильные против компьютеров.
Посмотреть разницу по страницам
Где хуже всего.
Открыть эти страницы на телефоне
Причина обычно видна.
Небольшая разница между устройствами — норма: на телефоне чаще смотрят, а не покупают. Тревожит заметный разрыв на конкретных страницах при нормальном соотношении на остальных — это указывает на техническую проблему, а не на поведение.
Когда повторять проверку
| Событие | Что проверить |
|---|---|
| Любое обновление сайта | Формы и телефон |
| Новая страница | Весь сценарий |
| Добавили всплывающее окно | Закрывается ли |
| Поменяли шаблон | Все ключевые страницы |
| Раз в квартал | Основные сценарии |
Первая строка должна стать привычкой. Мобильная вёрстка ломается от мелких правок незаметно для того, кто их вносит с компьютера: пять минут с телефоном после каждого обновления дешевле недели потерянных заявок.
Частые вопросы
Достаточно ли уменьшить окно браузера?
Нет. В браузере не видно размера пальца, реальной скорости сети и того, что клавиатура закрывает половину экрана. Итоговая проверка делается на настоящем телефоне.
Что проверять в первую очередь?
Нажимается ли телефон, попадаете ли пальцем по кнопкам, заполняется ли форма до конца и закрываются ли всплывающие окна.
Как понять, что с мобильной версией проблема?
По разрыву конверсии между устройствами на конкретных страницах при нормальном соотношении на остальных. Небольшая общая разница — норма.
Как часто перепроверять?
После любого обновления сайта — хотя бы формы и телефон. Мобильная вёрстка ломается от мелких правок незаметно для того, кто вносит их с компьютера.
Читайте также
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
