Популярные ошибки мобильной вёрстки, которые мешают продажам

Более 60% интернет-трафика в Казахстане, России и Узбекистане сегодня приходится на смартфоны. Жители регионов открывают сайты в транспорте, в обеденный перерыв, в магазине перед покупкой и ждут моментальной загрузки и понятной навигации. Когда интерфейс «разваливается» на небольшом экране, посетитель закрывает вкладку за пару секунд и уходит к конкуренту.

При этом многие владельцы бизнеса до сих пор воспринимают мобильную версию как уменьшенную копию десктопа. Разработчики забывают про специфику тачскринов, ограничения сотовых сетей и привычки пользователей одной рукой. В результате на экране iPhone 14 SE и бюджетного Android появляется хаос из мелких кнопок, обрезанных картинок и горизонтальной прокрутки. На макете всё аккуратно, а в жизни — непригодно.

Каждый такой промах бьёт по конверсии, среднему времени на странице и позициям в поисковой выдаче. Яндекс и Google давно учитывают mobile-friendly факторы в ранжировании, а трафик из Директа и таргетированной рекламы сжигает бюджет, если посадочная страница работает плохо. Ниже — разбор пяти самых распространённых ошибок, которые встречаются в проектах разного уровня, с учётом актуальных трендов веб-дизайна для рынка СНГ.

Отсутствие адаптива под разные разрешения экранов

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

Решение элементарное: добавить строку <meta name="viewport" content="width=device-width, initial-scale=1"> в блок <head> сразу после открывающего тега. На сайтах, построенных на современных фреймворках вроде React, Vue, Tilda или 1С-Битрикс, этот мета-тег ставится по умолчанию. Но если вы поддерживаете самописный движок или устаревший шаблон, обязательно проверьте его наличие в первую очередь. Проверка занимает пять секунд, а эффект виден сразу: контент занимает всю ширину экрана и читается без зума.

Дополнительно полезно отказаться от фиксированных ширин в пикселях для крупных блоков и таблиц. Гибкие сетки на flexbox и grid с относительными единицами избавляют от большинства проблем с горизонтальной прокруткой и помогают масштабировать интерфейс плавно, без скачков на промежуточных диагоналях.

Что проверить сразу после публикации

• Корректно ли настроен <meta name="viewport">
• Содержит ли CSS медиа-запросы под типовые диагонали 360, 414 и 768 px
• Растягиваются ли блоки на всю ширину экрана без пустых полей
• Нет ли фиксированных ширин, которые ломают сетку

Слишком мелкие шрифты и неудобные кнопки

Гайдлайны Apple и Google рекомендуют держать базовый размер текста на уровне 16 пикселей, а высоту строки — не меньше 1.4. На практике встречаются макеты с body { font-size: 12px } и плотным line-height, которые отлично смотрятся на экране дизайнера, но распадаются на смартфоне. То же касается интерактивных элементов: минимальная комфортная зона нажатия — 44×44 px по Apple Human Interface Guidelines и 48×48 dp по Material Design. Ссылки в одну букву, иконки без отступов и тонкие кнопки в шапке — верный способ получить случайные тапы и раздражённых посетителей.

При проектировании адаптивной типографики удобнее использовать функцию clamp() или связку rem с медиа-запросами, чем подгонять размеры вручную под каждый брейкпоинт. Кнопки на мобильном разумно делать блочными на всю ширину карточки товара или действия — это снимает вопрос с попаданием пальцем и улучшает скролл. А в формах не забывайте про атрибут inputmode, который подсказывает системе нужную клавиатуру: цифровую для телефона, с символом @ для email.

Мельчайшая деталь, о которой часто забывают, — расстояние между соседними кликабельными элементами. Даже если каждая кнопка сама по себе достаточного размера, две кнопки впритык создают эффект «жирной мишени» с двумя разными действиями. Пользователь промахивается, злится и заодно отмечает для себя сайт как неудобный.

Тяжёлые изображения и медленная загрузка страниц

Большая фоновая картинка на два мегабайта, пять шрифтов из Google Fonts, три аналитических скрипта и видеоплеер с автозапуском — на десктопе такая страница открывается за полторы секунды, а на 3G — за пятнадцать. Мобильная аудитория в регионах далеко не всегда сидит в Wi-Fi, и именно на сотовых сетях решается, дождётся ли посетитель загрузки. По данным исследований, при превышении трёх секунд показатель отказов вырастает в полтора раза.

Оптимизация сводится к нескольким привычкам: использовать формат WebP или AVIF, подключать srcset и sizes, отдавать изображения через CDN и лениво грузить всё, что уходит ниже первого экрана, через loading="lazy". Бесплатные сервисы проверки скорости вроде PageSpeed Insights, GTmetrix и WebPageTest покажут, какие именно ресурсы тормозят рендеринг, и подскажут, что сжать в первую очередь. Полезно также проверить, как ведёт себя сайт при отключённом JavaScript: если без него страница пустая, архитектура нуждается в серьёзном пересмотре и, скорее всего, в серверном рендеринге.

Отдельного внимания заслуживают шрифты. Подключение пяти начертаний ради двух абзацев с заголовками бессмысленно — обычно хватает двух: обычного и жирного. Если дизайн требует акцидентного начертания, его лучше подключать только для крупных заголовков и только в виде font-display: swap, чтобы текст не «прыгал» при загрузке и не уезжал в правую сторону при переключении шрифта.

Навязчивые всплывающие окна поверх контента

Баннер «Подпишитесь на рассылку» через пять секунд, уведомление о cookie, форма сбора контактов поверх карточки товара, рекламный межстраничник перед переходом в каталог — в сумме получается четыре препятствия на пути к нужной информации. На десктопе это раздражает, а на смартфоне вынуждает закрывать по пять модальных окон подряд большим пальцем в неудобной позе. Поведенческие факторы ухудшаются мгновенно: посетитель возвращается к поиску и уходит к конкуренту, не совершив целевого действия.

Google официально наказывает сайты с навязчивыми interstitial'ами в мобильной выдаче, понижая их позиции. Яндекс придерживается похожих рекомендаций и подробно описывает ограничения в документации к Турбо-страницам. Если без всплывающих окон бизнес-процесс невозможен — например, при первом заходе в интернет-магазин нужно показать выбор города, — их показывают аккуратно: только по жесту пользователя, не закрывая первый экран целиком, с крупной и заметной даже на ярком солнце кнопкой закрытия.

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

Горизонтальная прокрутка и выезжающие за экран блоки

Когда на узком экране появляется горизонтальная полоса прокрутки, это почти всегда ошибка конкретного блока, а не особенность устройства. Причины типовые: таблица без overflow-x: auto, iframe с фиксированной шириной, картинка без max-width: 100%, или длинное нерусифицированное слово в тексте, которое не переносится. На десктопе всё выглядит нормально, а на 360 px страница превращается в качели — пользователь видит обрезанный текст и закрывает вкладку, так и не разобравшись, что предлагает компания.

Типовые правила CSS, которые закрывают большинство случаев

• img, iframe, video, table { max-width: 100%; height: auto; }
• pre, code, .long-word { word-break: break-word; overflow-wrap: anywhere; }
• Таблицы оборачивать в <div class="table-wrapper"> со стилем overflow-x: auto
• overflow-x: hidden на body допустимо только как временная мера, иначе реальные баги маскируются, а не устраняются

Финальная проверка обязательно должна включать просмотр на реальных устройствах. Эмуляция в Chrome DevTools удобна на этапе разработки, но не улавливает нюансы вроде выпадающих системных клавиатур и жестов «свайп назад». Полезно также прогонять страницы через автоматические валидаторы, например валидатор site4you, которые находят визуальные расхождения между макетом и реальным рендерингом, несоответствие контрастности и плохо читаемые шрифты на конкретных устройствах.

Если у вас нет под рукой россыпи гаджетов, попросите знакомых открыть сайт на своих телефонах в обычных условиях — в транспорте, в кафе, при разном освещении. Такой «полевой тест» вылавливает больше проблем, чем любая автоматика, и обходится почти бесплатно.