Меня зовут Максим, я веб-разработчик. Mobile-first — подход, когда сначала проектируешь мобильную версию, а потом адаптируешь для десктопа — был революцией десять лет назад. Но в 2026 году для некоторых бизнесов пора говорить о mobile-only: когда десктопная версия не «вторична», а вообще не нужна.
Звучит радикально? Давайте разберёмся.
Статистика, которая всё объясняет
Для ряда категорий бизнеса доля мобильного трафика давно перевалила за 80%. Вот что я вижу на своих проектах:
- Локальные услуги (парикмахерские, автомойки, доставка еды) — 85–92% мобильного трафика
- Малый бизнес в регионах — 80–88%
- Развлечения и мероприятия — 82–90%
- Одежда и аксессуары (розница) — 78–85%
Когда 9 из 10 посетителей приходят со смартфона — проектирование «от десктопа» становится пустой тратой ресурсов. Вы тратите время и деньги на версию, которой пользуется 10% аудитории.
Mobile-first vs mobile-only: в чём разница
Mobile-first: дизайн начинается с мобильной версии, потом адаптируется для планшетов и десктопа. Все три версии существуют и поддерживаются.
Mobile-only: проектируется и разрабатывается только мобильная версия. На десктопе сайт открывается, но отображается как мобильная версия (по центру экрана или растянутая). Или десктопная версия — минимальная адаптация без дополнительного проектирования.
Mobile-only не значит «сайт сломан на десктопе». Это значит, что весь UX-дизайн, все пользовательские сценарии, все тесты — оптимизированы под экран 6 дюймов. Десктоп — побочный эффект, а не приоритет.
Кому подходит mobile-only
Локальным бизнесам. Кафе, автосервис, салон красоты, прачечная — клиент ищет вас с телефона, когда ему нужна услуга здесь и сейчас. Он не сидит за компьютером и не изучает ваш сайт часами.
Бизнесам, завязанным на мессенджеры. Если основной канал коммуникации — WhatsApp или Telegram, сайт — это промежуточное звено между поиском и мессенджером. Человек нашёл сайт → посмотрел услуги → нажал «Написать в WhatsApp». Всё это — на телефоне.
Сервисам доставки. Клиент заказывает еду, продукты, товары — со смартфона. Десктоп-версия ему не нужна.
Мероприятиям и событиям. Лендинг мероприятия: программа, спикеры, билеты. Посетитель видит рекламу в Telegram → переходит на телефоне → покупает билет. Весь путь — мобильный.
Личным брендам. Визитка эксперта: фото, описание, портфолио, контакты. Ссылка в профиле Instagram/Telegram ведёт на сайт — а Instagram и Telegram открываются на телефоне.
Кому mobile-only НЕ подходит
B2B-компаниям. Закупщик на производстве изучает каталог за рабочим компьютером. Бухгалтер открывает документы на десктопе. B2B-сайт должен работать на всех устройствах.
Интернет-магазинам с большим каталогом. Фильтрация по 20 параметрам, сравнение товаров, детальные спецификации — всё это удобнее на большом экране.
Сложным веб-приложениям. CRM, ERP, личные кабинеты с аналитикой, дашборды — нужен десктоп.
Образовательным платформам. Длинные видеоуроки, конспекты, тесты — студенты часто предпочитают заниматься за компьютером.
Как проектировать mobile-only сайт
Навигация: максимально простая
Забудьте про мегаменю с подкатегориями. Mobile-only навигация:
- 4–5 основных разделов (не больше)
- Нижняя панель навигации (как в мобильных приложениях) — большой палец легко достаёт
- Минимум вложенности: идеал — всё в один уровень
Контент: вертикальный и фрагментированный
Длинный текст — в карточки или аккордеоны. Вместо абзаца на 10 строк — карточка с заголовком, которая раскрывается по тапу. Пользователь сам выбирает, что читать подробнее.
Визуальный формат: вертикальные видео, квадратные фотографии, инфографика, адаптированная под вертикальный экран.
Формы: минимум полей
Каждое лишнее поле в форме на мобильном — потеря конверсии. Минимум полей, автозаполнение, маски ввода (телефон, email), крупные кнопки.
Идеал для записи: имя + телефон + выбор услуги из списка. Три поля. Всё остальное — при необходимости потом.
Кнопки действий: в зоне большого пальца
Основная кнопка действия («Записаться», «Заказать», «Позвонить») — внизу экрана, в зоне большого пальца. Фиксированная, всегда видимая, достаточно крупная для уверенного нажатия.
Скорость: быстрее, чем приложение
Mobile-only сайт конкурирует с нативными приложениями. Скорость загрузки — менее 2 секунд на 4G. Анимации — плавные, 60 FPS. Оффлайн-режим через Service Worker — кешированный контент доступен даже без интернета.
PWA (Progressive Web App) — идеальный формат для mobile-only: сайт устанавливается на домашний экран, работает как приложение, не требует скачивания из App Store.
Технический стек
Фреймворк: Next.js с серверным рендерингом. Быстрая первая загрузка, хороший SEO.
CSS: Tailwind CSS с mobile-first утилитами (хотя проектируем mobile-only, Tailwind всё равно удобен). Никаких media queries для десктопа — всё под мобильный экран по умолчанию.
Производительность: Image optimization (next/image с AVIF/WebP), lazy loading, code splitting, минимальный JavaScript.
PWA: Service Worker для кеширования, manifest.json для установки на домашний экран, push-уведомления (с разрешения пользователя).
Стоимость mobile-only vs адаптивного сайта
Парадоксально, но mobile-only часто дешевле адаптивного сайта:
- Одна версия дизайна вместо трёх (мобильный, планшет, десктоп)
- Меньше тестирования (не нужно проверять на разных экранах)
- Проще поддержка (одна версия для обновлений)
Экономия — 20–30% от бюджета разработки.
Простой mobile-only сайт (визитка с каталогом услуг) — от 40 000 до 100 000 рублей.
Mobile-only с записью и оплатой — от 100 000 до 250 000 рублей.
Mobile-only PWA с личным кабинетом — от 250 000 до 600 000 рублей.
Как проверить, нужен ли вам mobile-only
Откройте Яндекс Метрику или Google Analytics и посмотрите долю мобильного трафика. Если больше 80% — mobile-only как минимум стоит рассмотреть. Если больше 90% — это ваш формат.
Далее посмотрите на поведенческие метрики: конверсия на мобильных vs десктоп, показатель отказов, среднее время. Если мобильные метрики значительно хуже десктопных — значит, ваш сайт плохо работает на телефонах, и mobile-only подход решит эту проблему.
Mobile-only — не для всех. Но для тех бизнесов, где аудитория живёт в смартфоне — это самый эффективный и экономичный подход к веб-разработке.