Сайт сделан на ноутбуке — а смотрят с дивана: как проверить мобильную версию без паники
Вы провели выходные за ноутбуком. Выровняли кнопки, подобрали шрифты, полюбовались на свой сайт в Chrome — и всё выглядело прекрасно. А потом открыли ту же страницу с телефона, и половина текста уехала за край экрана, кнопка налезла на картинку, а меню превратилось в кашу.
Знакомо? Вы не одиноки. Примерно 60–70% трафика на новых сайтах приходит со смартфонов. Люди проверяют вас в очереди в Starbucks, в метро, на диване перед телевизором. И если на шестидюймовом экране сайт выглядит сломанным — для посетителя он сломанный, точка.
Сначала посмотрите на сайт их глазами
Прежде чем что-то чинить, нужно увидеть проблему. Есть три способа, от простого к точному:
Способ 1. Просто возьмите телефон. Откройте сайт в Safari или Chrome на своём смартфоне. Прокрутите всё сверху вниз. Честно скажите себе: удобно ли читать? Крупный ли текст? Легко ли попасть пальцем в кнопку?
Способ 2. Режим устройства в браузере. На компьютере нажмите F12 (или правая кнопка мыши → «Просмотреть код»), затем иконку телефона в левом верхнем углу панели. Браузер покажет, как страница выглядит на iPhone, Pixel или Galaxy. Переключайте модели и смотрите, не ломается ли вёрстка.
Способ 3. Тест «попросил жену открыть с дивана». Самый честный из всех. Дайте телефон человеку, который не делал этот сайт, и попросите: «Найди на моём сайте цену и запиши мне почту». Замолчите и наблюдайте. Где он завис, куда ткнул не туда, что не заметил — это и есть ваш настоящий список правок. Никакой платный аудит не покажет проблемы быстрее.
Что обычно «разъезжается» у новичков
По опыту, список у всех примерно одинаковый:
- Слишком мелкий текст. На компьютере 14px читается нормально, на телефоне — уже нет. Ставьте минимум 16px для основного текста.
- Кнопки-крошки. Палец — не курсор. Кнопки и ссылки должны быть высотой хотя бы 44 пикселя, иначе промахи гарантированы.
- Картинки без ограничений по ширине. Одна фотография на 3000 пикселей — и вся страница едет горизонтально.
- Горизонтальный скролл. Если страницу можно двигать влево-вправо — где-то есть элемент, который не помещается. Ищите таблицы, длинные ссылки, широкие вставки кода.
- Меню из десяти пунктов. На десктопе оно смотрелось солидно, на телефоне — это простыня. Сверните его в «бургер».
- Всплывающие окна во весь экран. Попап, который нельзя закрыть на телефоне, потому что крестик уехал за экран, — это гарантированный уход посетителя навсегда.
Чек-лист мобильной оптимизации на 20 минут
Пройдитесь по списку и отмечайте выполненное:
- Откройте сайт на реальном телефоне (не только в эмуляторе).
- Проверьте: страница не скроллится вбок.
- Основной текст — минимум 16px, заголовки заметно крупнее.
- Все кнопки легко нажимаются большим пальцем.
- Меню свёрнуто и открывается одним касанием.
- Формы: поля удобного размера, клавиатура не закрывает поле ввода.
- Картинки не обрезают важное и не растягивают страницу.
- Скорость: страница загружается за 3–4 секунды на мобильном интернете. Проверьте себя через Google PageSpeed Insights — там сразу покажут, что тормозит.
- Номер телефона и кнопка связи видны без прокрутки.
- Повторите тест «с дивана» с живым человеком после всех правок.
Если сайт сделан на конструкторе
Хорошая новость: Wix, Squarespace, WordPress с современными темами дают адаптивность «из коробки». Плохая новость: только в том случае, если вы не наставили поверх неё блоки вручную. Загляните в редактор — почти везде есть переключатель «мобильный вид». Откройте его и пройдитесь по каждой странице: конструкторы позволяют подправить отступы и размеры именно для телефонов, не трогая десктопную версию.
Главное правило
Не проектируйте «для компьютера и пусть телефон подождёт». Проектируйте для телефона, а компьютер пусть подождёт — он справится с чем угодно. Десять минут с телефоном в руках сегодня сэкономят вам половину посетителей завтра.
Сделали правки? Отлично. Теперь снова позовите того самого человека с дивана. Если он нашёл цену и оставил почту без вашей помощи — поздравляем, ваш сайт наконец работает для всех, а не только для вашего ноутбука.
