70% трафика — мобильные устройства. Это не прогноз на будущее, это реальность прямо сейчас. Если ваш сайт неудобен на смартфоне — вы теряете 70% потенциальных клиентов.
Мы составили чек-лист из 15 пунктов. Проверьте свой сайт и найдите точки роста.
Критические ошибки
1. Мелкий текст
Если пользователю приходится увеличивать страницу, чтобы прочитать — это провал. Минимальный размер шрифта на мобильных: 16px для основного текста, 14px для второстепенного.
Как проверить: Откройте сайт на телефоне. Читается без зума? Если нет — исправляйте.
2. Маленькие кнопки
Палец — не курсор мыши. Минимальный размер кнопки: 44×44 пикселя. Расстояние между кнопками: минимум 8px.
Как проверить: Попробуйте нажать на все кнопки большим пальцем. Попадаете с первого раза?
3. Горизонтальная прокрутка
Ничто так не бесит, как сайт, который нужно прокручивать вбок. Контент должен помещаться в ширину экрана.
Как проверить: Прокрутите страницу вниз. Появляется горизонтальный скролл? Это баг.
4. Неработающие формы
Поля съезжают, клавиатура перекрывает кнопку отправки, выпадающие списки не работают.
Как проверить: Заполните все формы на сайте с телефона. Всё работает?
5. Долгая загрузка
На мобильных интернет часто медленнее. Если сайт грузится 5+ секунд — половина уйдёт.
Как проверить: PageSpeed Insights, вкладка Mobile. Оценка ниже 50 — критично.
Навигация и структура
6. Нечитаемое меню
Мелкие пункты, много уровней вложенности, меню не помещается на экран.
Решение: Гамбургер-меню с крупными пунктами. Максимум 2 уровня вложенности.
7. Отсутствие поиска
На большом сайте или в интернет-магазине поиск критичен. На мобильных особенно — листать каталог неудобно.
Решение: Заметная иконка поиска в шапке. Поиск с подсказками.
8. Далеко до кнопки действия
Пользователь пролистал страницу, хочет оставить заявку — а кнопка где-то наверху.
Решение: Фиксированная кнопка внизу экрана или плавающая кнопка.
9. Сложная навигация в каталоге
Фильтры не работают, сортировка скрыта, карточки товаров слипаются.
Решение: Адаптивные фильтры (выезжающая панель), крупные карточки, понятная сортировка.
Контент и медиа
10. Тяжёлые изображения
Картинки по 3 МБ на мобильном интернете — это катастрофа.
Решение: Адаптивные изображения (разные размеры для разных экранов), формат WebP, lazy load.
11. Автоплей видео
Видео запускается автоматически, жрёт трафик и тормозит страницу.
Решение: Видео по клику. Или хотя бы без звука и с возможностью остановить.
12. Нечитаемые таблицы
Таблица на 10 колонок не помещается на мобильный экран.
Решение: Горизонтальный скролл для таблицы (не для всей страницы), или переформатирование в карточки.
Интерактивные элементы
13. Попапы, закрывающие контент
Всплывающее окно на весь экран, крестик в углу размером 5 пикселей.
Решение: Попапы должны легко закрываться. Крестик минимум 44×44px. Или свайп вниз для закрытия.
14. Hover-эффекты
На десктопе при наведении появляется дополнительная информация. На мобильных hover не работает.
Решение: Показывать информацию сразу или по тапу.
15. Слайдеры без свайпа
Слайдер, который переключается только стрелками. А стрелки мелкие.
Решение: Поддержка свайпов. Это стандарт для мобильных.
Как проверить адаптацию комплексно
Инструменты:
- Google Mobile-Friendly Test — базовая проверка
- Chrome DevTools — эмуляция разных устройств
- Реальные устройства — ничто не заменит тест на настоящем телефоне
Что проверять:
- Разные размеры экранов (iPhone SE, iPhone 14, Samsung Galaxy)
- Разные браузеры (Safari, Chrome)
- Разную ориентацию (вертикальная, горизонтальная)
Стоимость мобильной адаптации
Если сайт изначально не адаптирован:
- Базовая адаптация: 30 000 — 70 000 ₽
- Полная переработка: 70 000 — 150 000 ₽
Если делаете новый сайт — адаптация входит в стоимость. Экономить на этом нельзя.
Главное правило
Делайте сайт Mobile First. Сначала продумайте мобильную версию, потом адаптируйте под десктоп. Не наоборот.
Это сложнее, но результат стоит того. Сайт, удобный на телефоне, будет удобен везде.
