Статья
Мобильная версия сайта: что проверить
Большая часть посетителей открывает сайты с телефона, и судят о компании по тому, что видят на маленьком экране. Сайт, который отлично выглядит на мониторе, на телефоне может превращаться в мелкий текст и кнопки, по которым невозможно попасть. Разбираем, какой должна быть мобильная версия и как её проверить самому.
Отдельный сайт или адаптивный
Раньше для телефонов делали отдельный сайт на поддомене вроде m.site.ru. Сейчас почти всегда делают один сайт, который подстраивается под ширину экрана: на компьютере блоки стоят в несколько колонок, на телефоне — друг под другом. Такой сайт проще обновлять — правка делается один раз, а поисковики видят одну версию страницы.
Но «подстраивается» не значит «сжимается». Хорошая мобильная версия продумана отдельно: что показать первым, что убрать, где поставить кнопку.
Какие экраны учитывать
Ширина большинства телефонов — от 360 до 430 точек, планшетов — от 768. Проверять стоит хотя бы три размера: небольшой телефон, большой телефон и планшет. Дизайн для телефона рисуют на ширине около 375–390 точек, и вёрстка должна корректно работать на всём диапазоне, а не только на одном образцовом размере.
Что проверить
- Текст — основной не меньше 16 пикселей, читается без увеличения.
- Кнопки — не меньше 44 пикселей в высоту, с отступами, чтобы не промахнуться пальцем.
- Нет горизонтальной прокрутки — страница не «уезжает» вбок, таблицы и картинки помещаются в экран.
- Меню — понятная кнопка меню, пункты крупные, меню закрывается.
- Телефон нажимается и сразу открывает звонок, адрес — открывает карту.
- Формы — у поля телефона цифровая клавиатура, у поля почты — с «@», подписи полей видны.
- Главная кнопка под рукой — для магазинов и записи её часто закрепляют внизу экрана.
- Всплывающие окна закрываются, а не перекрывают весь экран без крестика.
- Скорость — мобильный интернет медленнее домашнего, тяжёлые картинки и видео особенно заметны. Как проверить, разобрано в статье «Скорость загрузки сайта».
Как посмотреть мобильную версию на компьютере
В Chrome, Яндекс Браузере и Edge откройте инструменты разработчика клавишей F12 и включите режим устройства: Ctrl+Shift+M на Windows или Cmd+Shift+M на Mac. Сверху можно выбрать модель телефона или задать ширину вручную.
Это удобно для быстрой проверки, но не заменяет настоящий телефон: на компьютере не видно, как работают касания, клавиатура и реальная скорость мобильного интернета.
Проверка на настоящих телефонах
- Откройте сайт со своего телефона через мобильный интернет, а не по Wi-Fi.
- Попросите посмотреть знакомых с другими телефонами: iPhone и Android отображают сайты по-разному.
- Пройдите путь клиента целиком: найти услугу, узнать цену, оставить заявку. Если где-то пришлось увеличивать текст или целиться в кнопку — это место нужно исправить.
Мобильная версия и поиск
Google оценивает сайты в первую очередь по их мобильной версии, а неудобная мобильная версия ухудшает поведение посетителей — они уходят быстрее, и поисковики это видят. Поэтому мобильная версия — не дополнение к сайту, а его главная версия.
Как это делаем мы
Версию для телефона мы проектируем отдельным сценарием, а не сжатой копией компьютерной: показываем макеты для обеих версий и правим до начала вёрстки. Перед запуском проверяем сайт в основных браузерах и на мобильных устройствах — это прописано в нашей оферте.
Если мобильную версию вашего сайта уже не спасти настройками, при редизайне мы собираем новый сайт на коде с дизайном для компьютера и отдельно для телефона и переносим на него страницы и тексты.