С 2024 года более 70% трафика в РФ — мобильный, а поисковики индексируют сайты по мобильной версии. Делайте mobile-first: проектируйте сначала под 360px, используйте breakpoints 768/1024/1280/1536, проверяйте на реальных устройствах. Избегайте трёх главных ошибок — мелкого шрифта, тап-целей меньше 44px и блоков, выходящих за экран.
Почему mobile-first — не мода, а необходимость
В 2026 году мобильный трафик в РФ составляет 70–80% практически во всех нишах, кроме узкого B2B-сегмента. Яндекс и Google индексируют сайты по мобильной версии (mobile-first indexing), а в выдаче ранжируют с учётом мобильного UX.
Сайт, который плохо работает на смартфоне, теряет дважды:
- Поведенческие факторы — высокий показатель отказов, низкое время на сайте, низкая конверсия.
- Ранжирование — поисковики снижают позиции за плохой мобильный опыт.
Подробнее о влиянии UX на SEO — в материале «Design и структура сайта».
Что такое mobile-first
Mobile-first — это подход, при котором дизайн и вёрстку начинают с мобильной версии и постепенно расширяют для больших экранов. Это противоположность подходу «сначала десктоп, потом ужимаем».
Принцип mobile-first в коде выглядит так:
/* Базовые стили для мобильных */
.container {
padding: 16px;
font-size: 16px;
}
/* Усиление для планшетов и выше */
@media (min-width: 768px) {
.container {
padding: 32px;
}
}
/* Десктоп */
@media (min-width: 1024px) {
.container {
padding: 64px;
}
}
Базовый CSS оптимизирован под мобильные — браузер на смартфоне не грузит «десктопные» стили и тут же их переопределяет. Это даёт прирост скорости на мобильных.
Breakpoints в 2026 году
Точные точки перелома зависят от контента, но есть устоявшийся набор:
| Breakpoint | Устройство | Что меняется |
|---|---|---|
| 360–400px | Маленький смартфон | Базовая вёрстка, одна колонка |
| 768px | Планшет | Две колонки, больше отступов |
| 1024px | Ноутбук | Многоколоночная сетка, расширенное меню |
| 1280px | Десктоп | Полная версия, боковые панели |
| 1536px | Большой экран | Контейнер по центру, максимальная ширина |
Content-based breakpoints
Лучший подход — не привязываться к устройствам, а ориентироваться на контент. Когда на каком-то размере строка становится слишком длинной или колонка слишком узкой — добавляйте breakpoint. Это называется content-based breakpoints.
Пример: если в карточке товара при ширине 600px описание выглядит сжатым — это и есть точка перелома, независимо от устройства.
Подходы к мобильной вёрстке
| Подход | Что это | Когда использовать |
|---|---|---|
| Responsive (адаптивный) | Одна вёрстка под все экраны через media queries | По умолчанию для 90% сайтов |
| Adaptive (отдельные версии) | Разные вёрстки под разные группы устройств | Крупные порталы с разными сценариями |
| Отдельный m.domain | Полностью отдельный мобильный сайт | Редко — только для гигантов вроде Авито |
В 2026 году в 95% случаев выбирают responsive с mobile-first подходом. Это дешевле, проще в поддержке и не создаёт проблем с дублирующимся контентом.
Типичные ошибки мобильной вёрстки
1. Мелкий шрифт
Шрифт меньше 16px на мобильных — это автоматически «приближение» для пользователя. Правило: основной текст 16–18px, заголовки — от 24px.
2. Маленькие тап-цели
Кнопки и ссылки меньше 44×44px тяжело попасть пальцем. Apple и Google рекомендуют минимальный размер тап-цели 44px. Между соседними ссылками оставляйте 8–10px отступа.
3. Контент выходит за экран
Горизонтальная прокрутка на мобильном — сигнал «сайт сломан». Проверяйте через DevTools на ширине 360px: нигде не должно быть вылезающего контента.
4. Сложные hover-эффекты
На мобильных нет hover. Меню с подменю по наведению становятся недоступными. Заменяйте hover на tap и предусматривайте альтернативные способы взаимодействия.
5. Всплывающие окна на весь экран
Pop-up, который занимает весь экран и закрывается крестиком в углу, на мобильном — катастрофа. По возможности откажитесь от них или сделайте легко закрываемыми.
6. Долгая загрузка на 3G/4G
Мобильный интернет медленнее домашнего, и многие пользователи ограничены по трафику. Оптимизация изображений, лёгкие шрифты, ленивая загрузка — обязательны. Подробнее — в «Скорость сайта и SEO».
7. Формы без нужных атрибутов
Поля ввода без inputmode, autocomplete, правильного type заставляют мобильного пользователя набирать с неправильной клавиатуры. Это раздражает и снижает конверсию форм.
Чек-лист мобильной оптимизации
- Шрифты: основной текст от 16px, заголовки от 24px.
- Тап-цели: минимум 44×44px, отступы между ними.
- Горизонтальная прокрутка: нет ни на одном блоке при 360px.
- Меню: гамбургер с понятной иконкой, подменю по тапу.
- Формы: правильные
inputmode, крупные поля, минимум шагов. - Изображения: WebP/AVIF, lazy load, адаптивные размеры.
- Pop-up: легко закрываются, не перекрывают контент.
- Тесты: проверка на реальных Android и iOS устройствах, не только в DevTools.
Как тестировать мобильную версию
| Инструмент | Что проверяет |
|---|---|
| Chrome DevTools (device mode) | Вёрстка на разных размерах |
| PageSpeed Insights | Mobile-friendly и CWV |
| BrowserStack, LambdaTest | Тесты на реальных устройствах |
| Физический смартфон | Реальный UX, не всегда совпадает с DevTools |
Самая частая ошибка тестирования — проверять только в DevTools. Реальный смартфон ведёт себя иначе: другой тач, другие шрифты, другой тормозной движок. Всегда проверяйте на 2–3 физических устройствах.
Mobile-first в 2026 году — это не опция, а базовый стандарт. Если сайт не сделан по mobile-first, он теряет и мобильных пользователей, и позиции в выдаче.
Комментарии · 0