Ваш сайт на мобилке хуже, чем Cyberpunk 2077 на релизе: почему вы теряете 70% продаж

Вчера попытался заказать пиццу с телефона. Через 20 минут борьбы с сайтом плюнул и заказал в другом месте через приложение. Сайт первой пиццерии был настолько неудобным на мобилке, что казалось, его делали специально, чтобы отпугивать клиентов. И это не единичный случай — 90% российских сайтов до сих пор делают для компьютеров, забывая, что их аудитория давно живет в смартфонах.

Цифры, от которых у веб-дизайнеров начинается экзистенциальный кризис

Держитесь крепче за свои айфоны, сейчас будет больно:

78% всего трафика в рунете приходит с мобильных устройств. Это данные Яндекс.Метрики за 2024 год. Семь из десяти ваших потенциальных клиентов заходят на сайт с телефона. А вы все еще рисуете красивые макеты для мониторов 1920×1080 и радуетесь, как классно смотрится.

53% пользователей уходят, если сайт грузится больше 3 секунд. Это быстрее, чем вы пропускаете рекламу на YouTube. У вас есть три секунды, чтобы показать хоть что-то полезное. Не успели? Пользователь уже у конкурентов.

88% не вернутся на сайт после плохого опыта на мобильном. Это как с играми — если на старте получил багованный продукт, второго шанса не будет. Вспомните судьбу Anthem или Babylon’s Fall.

Google с марта 2021 года полностью перешел на mobile-first индексацию. То есть поисковик смотрит сначала на мобильную версию вашего сайта. Нет нормальной мобилки? Добро пожаловать на 10-ю страницу выдачи, там уютно и тихо.

Средняя конверсия на десктопе — 3.9%, на мобильных — 1.4%. Разница почти в три раза! Но это не потому, что с телефона покупать неудобно. Это потому, что вы сделали процесс покупки похожим на прохождение Dark Souls голыми руками.

Топ-5 косяков мобильных версий: ошибки, за которые в геймдеве получают review bombing

1. Попап-апокалипсис: когда окон больше, чем контента

Захожу на сайт интернет-магазина электроники. Первое, что вижу — попап с предложением подписаться на рассылку. Закрываю. Второй попап — «Установите наше приложение!». Закрываю. Третий — «Разрешите отправку уведомлений». Четвертый — «Примите куки» (занимает половину экрана). Пятый — «У нас скидки!».

К моменту, когда я добрался до каталога, желание что-то покупать испарилось полностью. Это как в старых браузерных играх, где реклама занимала 90% экрана, а игра ютилась в маленьком окошке.

Решение простое: максимум один попап за сессию. И то — не сразу при входе, а через 10-15 секунд. Дайте человеку сначала понять, куда он попал.

2. Кнопки размером с пиксель: сложнее, чем попасть в голову с AWP

Правило большого пальца гласит: минимальный размер кликабельного элемента — 44×44 пикселя. Это рекомендация Apple еще с 2007 года. Прошло 18 лет, а российские сайты до сих пор делают кнопки «Купить» размером 20×15 пикселей.

Реальный пример: крупный маркетплейс одежды. Кнопки выбора размера настолько мелкие и расположены так близко друг к другу, что попасть в нужный размер с первого раза — это чистая удача. Промахнулся, выбрал XS вместо XL, не заметил, оформил заказ. Привет, возврат.

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

3. Горизонтальный скролл: ад для перфекциониста и обычного человека

Нет ничего хуже, чем контент, который уезжает за край экрана. Это раздражает сильнее, чем неровно наклеенная защитная пленка. Но почему-то каждый второй сайт грешит этим.

Обычно виноваты:

1. Таблицы, которые не адаптировали под мобильные экраны
2. Картинки с жестко заданной шириной в пикселях
3. Длинные неразрывные ссылки или слова
4. Видео-плееры с фиксированными размерами

Как проверить: откройте сайт на телефоне и проведите пальцем влево-вправо. Если что-то поехало — поздравляю, вы только что потеряли часть аудитории.

4. Формы-головоломки: когда регистрация сложнее, чем паззлы в Resident Evil

«Введите номер телефона» — казалось бы, что может быть проще? Но нет:

1. Поле не переключается на цифровую клавиатуру
2. Не работает автозаполнение
3. Маска ввода глючит и не дает ввести номер
4. Валидация срабатывает после каждой цифры
5. Нельзя вставить номер из буфера обмена

Отдельный круг ада — формы с капчей. Мелкие искаженные буквы на пестром фоне, которые и на компьютере-то сложно разобрать. А на экране телефона это просто издевательство.

Рекорд абсурда: сайт госуслуг одного региона, где для записи к врачу нужно заполнить 7 экранов формы. На каждом экране — по 5-6 полей. Если ошибся на последнем экране — начинай сначала, данные не сохраняются.

5. Меню-лабиринт: навигация как в старых RPG без карты

Бургер-меню — это хорошо. Но когда в нем 7 уровней вложенности, это превращается в квест. Реальный кейс: интернет-магазин строительных материалов.

Путь до нужного товара:

1. Нажать на бургер
2. Выбрать «Каталог»
3. Выбрать «Стройматериалы»
4. Выбрать «Материалы для отделки»
5. Выбрать «Напольные покрытия»
6. Выбрать «Ламинат»
7. Выбрать производителя

Семь тапов только чтобы добраться до списка товаров! Это дольше, чем загрузка GTA Online.

Как проверить свой сайт: спидран по тестированию за 5 минут

Шаг 1: Откройте Chrome DevTools (F12 на компьютере)

Нажмите на иконку с телефоном и планшетом в верхней панели. Выберите iPhone 12 или Samsung Galaxy S20. Это покажет, как примерно выглядит ваш сайт на современных смартфонах.

Важно: эмулятор — это не реальное устройство. Он не покажет проблемы с производительностью, настоящую скорость загрузки и особенности тач-интерфейса.

Шаг 2: Проверьте скорость загрузки

Зайдите на PageSpeed Insights от Google. Вставьте адрес своего сайта. Если оценка для мобильных меньше 50 — это красная зона. Меньше 30 — катастрофа.

Основные пожиратели скорости:

1. Неоптимизированные изображения (используйте WebP, а не PNG для фотографий)
2. Много JavaScript (каждая библиотека — это +1 секунда к загрузке)
3. Внешние шрифты (системные шрифты грузятся моментально)
4. Видео на главной (серьезно, зачем?)

Шаг 3: Пройдите свой же путь клиента

Возьмите телефон и попробуйте:

1. Найти конкретный товар
2. Добавить его в корзину
3. Оформить заказ

Засеките время и посчитайте количество кликов. Если больше 2 минут и 10 кликов — пора переделывать.

Шаг 4: Проверьте базовый чек-лист

1. Текст читается без зума (минимум 16px)
2. Кнопки не меньше 44×44 пикселей
3. Между кликабельными элементами есть отступы
4. Нет горизонтального скролла
5. Формы переключают правильную клавиатуру
6. Важная информация видна без скролла
7. Меню открывается и закрывается нормально
8. Попапы можно закрыть с первого раза
9. Видео и картинки адаптируются под экран
10. Страница грузится меньше 3 секунд

Именно понимание этих базовых вещей лежит в основе современного веб-дизайна, ориентированного на продажи — когда каждый элемент работает на то, чтобы пользователь совершил целевое действие, а не ушел к конкурентам.

От эпик фейла до читерского успеха: реальные кейсы

Фейл № 1: Интернет-магазин техники «ТехноДом»

Компания потратила 8 месяцев и 3 миллиона рублей на редизайн. Дизайнер работал на MacBook Pro с внешним монитором. Все макеты утверждались на большом экране в переговорке.

Результат запуска:

1. На iPhone карточки товаров наезжали друг на друга
2. Фильтры в каталоге не работали — слишком мелкие чекбоксы
3. В корзине кнопка «Оформить заказ» уезжала за пределы экрана
4. Конверсия с мобильных: 0.3%
5. Возвраты: 60% (люди случайно заказывали не то)

Комментарий владельца через месяц после запуска: «Мы думали, что бытовую технику покупают с компьютера, сидя дома. Оказалось, 65% заказов люди делают в обеденный перерыв с телефона».

Фейл № 2: Сервис доставки суши «Роллы-San»

Решили выделиться на фоне конкурентов. Сделали сайт с параллакс-эффектами, анимированным меню и 3D-моделями роллов, которые крутятся при наведении.

Проблемы:

1. На средних телефонах все тормозило как Crysis на офисном компьютере
2. 3D-модели вообще не загружались на половине устройств
3. Оформление заказа растянулось на 12 экранов
4. Каждый переход сопровождался анимацией по 2-3 секунды

Итог: проиграли локальному конкуренту с простым сайтом на конструкторе.

Успех: Маркетплейс handmade товаров «Своими руками»

Небольшой проект, который изначально делали mobile-first. Логика была простая: «Наша аудитория — молодые мамы. Они сидят в соцсетях с телефона, оттуда и к нам приходят».

Что сделали правильно:

1. Огромные кнопки «В корзину» — промахнуться невозможно
2. Оформление заказа на одной странице без перезагрузок
3. Умная форма адреса с подсказками от DaData
4. Фото товаров оптимизированы — грузятся моментально
5. Простое меню из 5 пунктов без вложенности

Результаты:

1. Конверсия с мобильных: 5.7% (выше, чем с десктопа!)
2. Средний чек вырос на 40% после добавления быстрых рекомендаций
3. 70% покупателей возвращаются повторно

Мифы о мобильной разработке: отмазки, которые стоят вам денег

Миф 1: «Наша аудитория — офисные работники, они с компьютеров сидят»

Даже если ваш B2B-сервис продает промышленные станки, помните: решение о покупке принимает живой человек. Он едет в метро, стоит в пробке, ждет в аэропорту. И в эти моменты у него в руках смартфон, а не ноутбук.

Статистика LinkedIn: 57% B2B-покупателей изучают поставщиков с мобильных устройств. Ваш красивый PDF с презентацией не откроется нормально на телефоне? Минус потенциальный клиент.

Миф 2: «У нас есть адаптивный дизайн, этого достаточно»

Адаптивность — это когда сайт технически помещается на экран телефона. Но это не значит, что им удобно пользоваться. Это как сказать, что Dark Souls проходится на клавиатуре — технически да, но зачем себя мучить?

Настоящий mobile-first — это когда вы сначала думаете о мобильных сценариях использования, а потом уже добавляете фичи для десктопа.

Миф 3: «PWA — это сложно и дорого»

Progressive Web App — это не ракетостроение. Базовую PWA можно сделать за пару дней. Она будет:

1. Работать офлайн
2. Отправлять пуш-уведомления
3. Устанавливаться на главный экран как приложение

Стоимость разработки PWA в 5-10 раз меньше, чем нативного приложения. А пользователи получают почти тот же опыт.

Миф 4: «Мобильные пользователи не покупают, только смотрят»

Это было правдой в 2010 году. Сейчас, по данным Яндекс.Кассы, 42% всех онлайн-платежей проходят с мобильных устройств. Apple Pay и Google Pay сделали покупку с телефона проще, чем с компьютера — не нужно вводить данные карты.

Что делать прямо сейчас: квест по спасению конверсии

Этап 1: Диагностика (10 минут)

Прямо сейчас возьмите телефон и зайдите на свой сайт. Попробуйте купить собственный товар или услугу. Не подглядывайте в десктоп-версию, не используйте прямые ссылки — действуйте как обычный пользователь.

Критерии провала:

1. Процесс занял больше 2 минут
2. Пришлось сделать больше 10 кликов
3. Вы злились хотя бы один раз
4. Пришлось использовать зум

Этап 2: Быстрые фиксы (можно сделать за день)

Увеличьте кнопки. Минимум 44 пикселя в высоту. Особенно важно для кнопок «Купить», «В корзину», «Оформить заказ».

Уберите hover-эффекты. На телефоне нет курсора. Все, что появляется при наведении, должно быть видно сразу или появляться по клику.

Упростите формы. Уберите необязательные поля. Добавьте правильные типы инпутов (tel для телефона, email для почты). Включите автозаполнение.

Оптимизируйте картинки. Используйте сервисы типа TinyPNG или Squoosh. Картинка товара не должна весить больше 200 КБ.

Этап 3: Серьезный подход (1-2 недели)

Если быстрые фиксы не помогли, пора браться за дело серьезно:

1. Редизайн критических страниц в mobile-first подходе. Начните с главной, каталога и корзины — это 80% всего трафика.
2. Внедрите AMP или PWA. Для контентных сайтов — AMP, для интернет-магазинов — PWA.
3. Упростите навигацию. Максимум 2 уровня вложенности в меню. Все остальное — через поиск.
4. A/B тестирование каждого изменения. Не гадайте, что сработает — проверяйте на реальных пользователях.

Что нас ждет в 2026 и почему десктоп окончательно умрет

Складные экраны изменят все

Samsung Galaxy Fold, Xiaomi Mix Fold, Huawei Mate X — это уже реальность. К 2026 году складные смартфоны станут массовыми. Ваш сайт должен будет адаптироваться под экраны, которые меняют размер на лету.

Voice UI — конец традиционных интерфейсов

«Алиса, закажи пиццу» — и никаких сайтов. Голосовые помощники уже умеют делать покупки. К 2027 году до 30% всех заказов будут делаться голосом.

AR в мобильном вебе

WebXR API уже поддерживается в Chrome и Edge. Скоро примерка одежды или расстановка мебели через камеру телефона станет стандартом.

Супер-аппы съедят веб

WeChat в Китае, Grab в Юго-Восточной Азии — это не просто приложения, а целые экосистемы. Заказ такси, еды, оплата счетов, переписка — все в одном месте. Традиционные сайты становятся не нужны.

Прогноз: к 2027 году 90% всех покупок будут совершаться с мобильных устройств. Оставшиеся 10% — это бухгалтеры, которые печатают накладные.

Вместо выводов

Если вы дочитали до сюда с телефона — респект. Значит, хотя бы наш текст оптимизирован нормально.

Челлендж для смелых: скиньте в комментарии ссылку на самый ужасный мобильный сайт, который вы встречали. Автору самого эпичного фейла проведу бесплатный аудит и расскажу, что там можно починить.

Вопрос дизайнерам: когда вы в последний раз тестировали свои макеты на реальном смартфоне, а не в эмуляторе?

Вопрос всем: с какого устройства вы сейчас читаете DTF? Спорим, больше 70% ответят «с телефона»?

P.S. Эта статья написана и отредактирована полностью на смартфоне. Потому что в 2025 году работать можно откуда угодно, если сайты не тормозят и кнопки нормального размера.