Мобильная версия сайта: размеры экранов, как сделать и проверить
Сайт на компьютере выглядит отлично, а заявок мало — частая причина в мобильной версии: мелкий текст, кнопки, по которым не попасть, форма под клавиатурой. Разбираю, под какие размеры делать мобильную версию, как посмотреть её на компьютере и что проверить.
- Большая часть посетителей сайтов услуг приходит с телефона — смотрите свою долю в Метрике.
- Проверяйте ширины 360, 375–393 и 430 px для телефонов и 768 px для планшета.
- Сайт делают адаптивным: одна версия перестраивается под экран.
- Посмотреть мобильную версию на компьютере: F12, затем Ctrl+Shift+M.
Почему мобильная версия важнее компьютерной
У большинства сайтов услуг посетителей с телефонов больше, чем с компьютеров. Откройте в Метрике отчёт «Технологии → Устройства» — увидите долю своих. Если на телефоне сайт неудобен, вы теряете большую часть заявок, даже если на компьютере всё выглядит идеально. Поэтому дизайн разумно начинать с мобильной версии или хотя бы проверять её на каждом этапе.
Размеры экранов
Ширины, которые стоит проверить, px
Делать отдельный макет под каждую модель не нужно. Достаточно, чтобы сайт аккуратно выглядел на диапазоне 360–430 px и на планшете.
Как сделать мобильную версию
- Адаптивная вёрстка — стандарт: блоки перестраиваются под ширину экрана. Колонки встают друг под друга, шрифты и отступы уменьшаются.
- На конструкторе — у Тильды стандартные блоки адаптивные сами, а в Zero Block мобильные размеры настраивают вручную.
- Отдельная мобильная версия на поддомене — устаревший подход, сейчас почти не нужен.
Если сайт старый и на телефоне выглядит как уменьшенная копия компьютерной версии — это повод для редизайна, а не для заплаток.
Как открыть мобильную версию на компьютере
В Chrome и Яндекс Браузере
- 01F12Открыть инструменты разработчика
- 02Ctrl+Shift+MВключить режим устройства
- 03МодельВыбрать телефон или ввести ширину
- 04ОбновитьПерезагрузить страницу
Режим устройства показывает раскладку, но не заменяет живой телефон: проверьте сайт и на настоящем смартфоне — с реальной скоростью интернета и пальцем вместо мыши.
Чек-лист проверки
- Нет горизонтальной прокрутки.
- Текст читается без увеличения: основной шрифт от 16 px.
- Кнопки — не меньше 44 px по высоте, не слипаются.
- Первая кнопка видна на первом экране.
- Телефон и мессенджеры нажимаются и открываются.
- Формы удобно заполнять, для телефона открывается цифровая клавиатура.
- Меню открывается и закрывается.
- Картинки не обрезаны и не тяжёлые.
- Всплывающие окна не закрывают весь экран.
- Сайт быстро грузится на мобильном интернете — подробнее в статье «Скорость загрузки сайта».
Остальные проблемы удобства — в статье «Юзабилити сайта».
Частые вопросы
Как открыть мобильную версию сайта на компьютере?
В Chrome или Яндекс Браузере нажмите F12, затем Ctrl+Shift+M — включится режим устройства, где можно выбрать модель телефона или задать ширину экрана.
Нужна ли отдельная мобильная версия сайта?
Обычно нет. Сейчас делают адаптивные сайты: одна версия перестраивается под ширину экрана. Отдельная мобильная версия на своём адресе усложняет поддержку и SEO.
Как Яндекс проверяет мобильную версию?
В Яндекс Вебмастере есть инструмент проверки мобильных страниц: он показывает, оптимизирована ли страница для телефонов.
