«Дизайн — это не то, как оно выглядит. Дизайн — это то, как оно работает». — Стив Джобс
А в 2026-м «работает» — значит работает в первую очередь в кармане у клиента. Не на вашем 27-дюймовом мониторе, где вы гордо открываете свой сайт и любуетесь.
🤔 Mobile-first в 2026: развенчиваем главное заблуждение
Давайте честно. Когда я спрашиваю нового клиента, готов ли его сайт к мобильным, он открывает ноутбук, тыкает пальцем в экран и говорит: «Ну вот же, всё уменьшается, всё видно». И смотрит на меня с таким лицом, будто вопрос закрыт.
А дело в том, что «всё уменьшается» и «mobile-first» — это две очень разные истории. Меня вот что удивляет: базовую вещь путают до сих пор, в 2026 году, когда с телефонов заходит большинство посетителей.
Разберёмся без тумана. Адаптивность — это когда сайт не разваливается на маленьком экране. Картинки ужимаются, колонки перестраиваются, ничего не вылезает за край. Это минимум, гигиена. Mobile-first — это подход, при котором мобильную версию проектируют первой, а десктоп — уже потом, как расширение. Сначала думаем про палец и узкий экран, а не про мышку и простор.
«Мой сайт открывается на телефоне — значит, всё в порядке»
Открываться и быть удобным — не одно и то же. Сайт может «открываться», но кнопки мимо пальца, текст мелкий, а оформление заказа растянуто на три экрана.
«Мобильная версия удобна сама по себе, а не как ужатый десктоп»
И ещё важный момент: поисковые системы давно смотрят на сайт глазами телефона. Индексируется именно мобильная версия. То есть для поиска ваш сайт — это его мобильный вид, а не тот красивый десктоп.
📊 Core Web Vitals 2026: почему INP заменил FID
Если говорить по существу, все технические требования к мобильной версии сегодня крутятся вокруг трёх метрик — Core Web Vitals. Звучит страшно, на деле — три простых вопроса к вашему сайту: быстро ли грузится, не прыгает ли вёрстка, быстро ли отвечает на нажатия.
И вот тут случилось главное изменение последних сезонов. Старую метрику FID (она мерила только самый первый отклик страницы) окончательно проводили на пенсию. Вместо неё теперь INP — Interaction to Next Paint. Разница принципиальная: INP смотрит не на первое касание, а на отзывчивость в течение всей вашей сессии. Нажали на фильтр, открыли карточку, добавили в корзину — если хоть где-то подтормаживает, метрика это поймает.
LCP ≤ 2.5 с
Загрузка основного контента. Сколько ждёт человек, пока увидит главное на экране.
CLS ≤ 0.1
Стабильность вёрстки. Когда кнопка «прыгает» в момент нажатия — это как раз плохой CLS.
INP ≤ 200 мс
Отзывчивость на действия. Новая метрика вместо FID: реакция на всё, что вы нажимаете.
Почему это бьёт именно по мобильным? Всё просто: у телефона процессор слабее, чем у ноутбука. Тяжёлые скрипты, которые на десктопе отрабатывают незаметно, на смартфоне превращаются в те самые задержки при нажатии. Вы на своём мониторе их не увидите. А клиент с телефоном в маршрутке — увидит и уйдёт.
Разгрузить страницу, убрать лишний JavaScript, привести INP в зелёную зону — это уже не «украшательство», а часть оптимизации скорости сайта, без которой в мобильную выдачу лучше не соваться.
👆 Тач-эргономика: почему кнопки «мимо пальца» бесят
Расскажу историю. Пришёл ко мне клиент с классической жалобой: «Люди заходят с телефона и тут же уходят, не пойму почему». Я открыл его сайт на своём телефоне, дошёл до товара, потянулся к кнопке «В корзину» — и не попал. Промахнулся пальцем. Попробовал ещё раз — задел соседнюю ссылку и улетел в другой раздел.
Кнопка была высотой пикселей двадцать и стояла вплотную к другой. На десктопе мышкой — идеально. На телефоне пальцем — мучение. Я вот для себя давно решил: тестировать всегда на реальном телефоне, а не в эмуляторе браузера. Потому что палец — это не курсор, у него нет пиксельной точности.
Что проверить в тач-эргономике мобильной версии
☐ Кликабельные элементы не меньше 44–48 px по высоте — чтобы палец попадал без прицеливания
☐ Между кнопками и ссылками есть отступы — соседний элемент не должен ловиться случайно
☐ Основные действия — в зоне большого пальца (нижняя и средняя часть экрана), а не только сверху
☐ Формы — в один столбец, поля крупные, с автоподстановкой где можно
☐ Шрифт основного текста от 16 px — иначе Safari на айфоне сам зумит страницу при тапе в поле
Мелочь? Вот и клиент так думал. А по факту это была одна из причин, по которой люди у него не покупали. Кстати, подобные вещи хорошо ловятся, когда проходишь UX-аудит сайта — просто садишься и проходишь путь клиента руками, без дизайнера и без теории.
⚡ Скорость мобильного сайта: где вы теряете клиентов
Теперь про боль, от которой у меня до сих пор дёргается глаз. Мобильный интернет — это не всегда бодрый 5G. Это ещё и 4G в метро, две палки за городом, лаги в торговом центре в час пик. И вот на этом соединении каждая лишняя секунда загрузки стоит вам живых посетителей. Человек не будет ждать. Он закроет вкладку и уйдёт к конкуренту, который открылся быстрее.
А теперь честно скажу, что меня в этом бесит больше всего. Приходит сайт, а на нём — карусель на весь экран, пять сторонних виджетов, чат, всплывашка, две системы аналитики и шрифты, которые грузятся откуда-то с другого конца интернета. И владелец искренне недоумевает: «Почему тормозит?». Да потому что вы навесили на телефон вес десктопа и ещё сверху добавили.
Что тормозит мобильную версию
Неоптимизированные картинки в десктопном весе, тяжёлые слайдеры, лишние шрифты, гроздь сторонних скриптов — чаты, виджеты, счётчики.
Что реально помогает
Форматы WebP и AVIF, ленивая загрузка, критический CSS, отказ от виджетов-паразитов. Не «ускорить всё», а убрать лишнее.
Скажу про готовые решения без прикрас. В нормальном шаблоне на 1С-Битрикс базовая оптимизация уже заложена — кэширование, сжатие, адекватная работа с картинками. Проблема обычно не в шаблоне, а в том, что его потом «докручивают» кастомом и по дороге убивают всё, что работало. Так что скорость — это ещё и дисциплина: не тащить на сайт всё подряд.
Если хотите копнуть в конкретные приёмы — у меня есть отдельный разбор про то, как повысить скорость работы сайта. А если сайт уже готовят к серьёзному трафику, скорость идёт в связке с общим SEO-продвижением — по отдельности «разогнать и забыть» не выйдет.
🛒 Мобильный UX магазина: 3 точки слива конверсии
Разберу на типичной картине — такую я вижу в мобильных магазинах чаще всего. Каталог тяжёлый, корзина растянута на три экрана, а перед оплатой сайт вдруг требует зарегистрироваться. И вот на каждом из этих мест теряются люди. Не потому что товар плохой — потому что дойти до покупки физически неудобно.
Обычно всё сливается в трёх точках. Пройдёмся по ним по порядку.
Карточка товара
Фото не листается пальцем, характеристики спрятаны в какую-то гармошку, кнопка покупки уехала вниз. Человек не понимает, что он берёт — и уходит подумать. Навсегда.
Корзина и оформление
Длиннющая форма на десяток полей, без автоподстановки, с обязательной регистрацией. На телефоне заполнять это — пытка. Половина бросает на середине.
Оплата
Не подтягиваются удобные мобильные способы — СБП, кошельки, оплата в один тап. Человек уже готов заплатить, а вы предлагаете ему вводить 16 цифр карты на ходу.
И вот что приятно: когда это чинишь, магазин буквально оживает. В готовых решениях (загляните в готовые интернет-магазины) всё это уже сделано по-человечески из коробки — листаемые фото, короткое оформление, современные способы оплаты. Остаётся настроить под конкретный товар. Хотите закрепить эффект — вот подборка приёмов, как увеличить конверсию сайта.
🧭 Mobile-first на практике: план действий владельцу
Хватит теории. Что конкретно делать вам, если вы владелец бизнеса и всё вышесказанное вас слегка придавило? Вот честный план по шагам, без магии.
Пошаговый план приведения мобильной версии в порядок
☐ Возьмите свой телефон и пройдите путь клиента до оплаты. Именно свой телефон, а не эмулятор. Всё, где вы споткнулись — уже задача.
☐ Прогоните сайт через PageSpeed Insights в мобильном режиме и посмотрите Core Web Vitals: LCP, CLS, INP.
☐ Почините очевидное: тяжёлые картинки, мелкие кнопки, раздутую форму оформления заказа.
☐ Не гонитесь за «100 из 100». Это ловушка перфекциониста, которая съедает бюджет без отдачи.
И тут важно сказать прямо, чтобы не было иллюзий. Метрики — это гигиена, а не волшебная кнопка. Я регулярно слышу: «Сделаем идеальные показатели — и попрём в топ». Так не работает. Хорошие Core Web Vitals убирают барьеры, но никаких гарантий позиций они не дают. И мы у себя в студии таких гарантий не даём — ни-ко-гда. Кто обещает вам топ за деньги, тот либо не понимает, как устроен поиск, либо понимает слишком хорошо.
Пара слов о том, как это устроено у нас — без навязывания. Готовое решение на Битриксе стартует за один день, демо доступно ещё до покупки (то есть вы видите сайт заранее, риска почти нет). Лицензии — 1С-Битрикс и шаблон Aspro — берём 100% предоплатой: мы просто не можем закупать их за свой счёт под клиента, иначе останемся с неликвидом, если человек передумает. А вот настройку и доработку под ваш товар делаем гибко, небольшими итерациями — не всё сразу.
Если сайт уже есть и его надо готовить к трафику — это отдельная подготовка к продвижению. А если только запускаетесь и хотите без месяцев разработки — смотрите в сторону быстрого запуска сайта.
💡 Итог: мобильная версия — витрина, а не копия
Если совсем коротко и образно. Десктопная версия — это ваш шоу-рум: просторно, красиво, можно всё рассмотреть. А мобильная версия — это витрина у входа, мимо которой человек идёт по улице с телефоном в руке. Если витрина неудобная, тусклая, тормозит — он просто пройдёт мимо. И не важно, какой шикарный у вас шоу-рум внутри: до него ещё надо захотеть дойти.
Mobile-first в 2026 — это не модный тренд, о котором можно поспорить за кофе. Это базовая гигиена. Кто её игнорирует, тот тихо платит за это трафиком, заявками и деньгами — просто не сразу это замечает.
Нет. Отдельная m-версия — это подход из прошлого десятилетия, сейчас он скорее вредит: два сайта надо синхронизировать, и что-нибудь всегда отстаёт. Правильный путь — один адаптивный сайт, спроектированный по принципу mobile-first.
Зависит от состояния сайта: где-то хватит правок кнопок и картинок, где-то честнее пересобрать на нормальном шаблоне. В готовых решениях большая часть требований уже заложена, поэтому предметный разговор проще всего начать с демо — вы сразу видите, за что платите.
Нет, и это принципиально. Никаких гарантий позиций мы не даём. Хорошие метрики мобильной версии убирают технические барьеры и делают сайт удобным — но ранжирование зависит от десятков факторов. Метрики это гигиена, а не рычаг, которым можно «дожать» топ.
Хотите сайт, которому mobile-first не страшен с первого дня?
Посмотрите наш каталог готовых решений — демо доступны до покупки, запуск за один день, базовая оптимизация под мобильные уже внутри.
