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

Мобильный и десктопный интерфейс — это два разных продукта с разной логикой, разными ограничениями и разными пользовательскими сценариями. Разберём, в чём конкретно.

Контекст использования — всё меняет

За ноутбуком человек сидит за столом, в тишине, с мышкой. У него есть время, внимание, точный курсор. За телефоном — всё наоборот. Он стоит в метро, держит поручень одной рукой, скролит большим пальцем. Или лежит на диване и лениво листает. Или идёт по улице.

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

Поэтому первое правило мобильного дизайна — упрощай, а не адаптируй.

Размер экрана и плотность информации

Типичный десктоп — 1440×900 пикселей и больше. Типичный смартфон — 390×844 (iPhone 14) или 360×800 (Android mid-range). Это примерно в четыре раза меньше рабочей площади.

При этом плотность информации на мобильном должна быть ниже, а не выше. Казалось бы, парадокс: места меньше, а информации надо показать столько же. Но если пытаться впихнуть всё — получается каша, которую никто не читает.

Как с этим работают:

  • Иерархия становится жёстче. На десктопе можно показать три блока информации в одном экране. На мобильном — один, максимум два. Всё остальное — скролл вниз или отдельный экран.
  • Текст крупнее, но короче. Минимальный размер читабельного текста на мобильном — 16px. Хедеры начинаются от 24px. При этом абзацы короче: длинные блоки текста на маленьком экране читать тяжело психологически, даже если технически всё помещается.
  • Изображения занимают всю ширину. На десктопе картинка может быть в колонке рядом с текстом. На мобильном она идёт на всю ширину, а текст — под ней. Это не ошибка, это правило.

Зоны досягаемости большого пальца

Это тема, про которую редко говорят, но она критически важна. Когда человек держит телефон одной рукой, его большой палец покрывает примерно нижние две трети экрана. Верхняя часть — «мёртвая зона»: туда сложно дотянуться, не перехватив телефон.

Выводы:

  • Основные кнопки действия (CTA, «Купить», «Позвонить», «Оформить») — внизу экрана, а не вверху.
  • Навигация — внизу (bottom navigation), а не в хедере. Это стандарт для мобильных приложений, и сайты постепенно туда движутся.
  • Мелкие интерактивные элементы в верхних углах — плохая идея. Крестик закрытия модального окна в верхнем правом углу — удобен на десктопе, неудобен на телефоне.

Гугл рекомендует минимальный размер касаемой области — 48×48dp. Это примерно 9мм — размер кончика пальца. Кнопки меньше этого размера пользователи промахиваются.

Навигация: гамбургер не всегда спасает

Десктопное меню с 7-8 пунктами на мобильный экран не влезает. Классическое решение — гамбургер-меню (три горизонтальные полоски). Оно работает, но у него есть минус: навигация скрыта. Пользователь не видит, что вообще есть на сайте, пока не нажмёт.

Альтернативы:

  • Bottom navigation bar — 3-5 иконок с подписями внизу экрана. Хорошо работает, если разделов немного.
  • Горизонтальный скролл вкладок — строка с категориями, которую можно скролить горизонтально. Часто используют в интернет-магазинах.
  • Сокращение навигации — на мобильном оставляем только 3-4 ключевых раздела. Остальное убираем в «Ещё» или в футер.

Главный принцип: пользователь должен попасть куда нужно за 1-2 касания.

Типографика и пространство

На десктопе дизайнеры часто любят «воздух» — большие отступы, много пространства между элементами. На мобильном этот воздух тоже нужен, просто устроен иначе.

Падинги по бокам — стандарт 16-20px. Меньше — элементы «прилипают» к краям экрана и неприятно смотрятся. Больше — рабочая область становится слишком узкой.

Межстрочный интервал (line-height) на мобильном нужно увеличивать: 1.5-1.6 для основного текста, 1.2-1.3 для заголовков. Мелкий текст с тесными строками на телефоне читается с напряжением.

Отдельный момент — интерактивные ссылки в тексте. На десктопе пользователь наводит мышь и видит, что ссылка кликабельна. На мобильном — только касается. Ссылки в тексте должны быть хорошо заметны и желательно подчёркнуты, иначе пользователь не поймёт, что это вообще кнопка.

Формы: упрощение до минимума

Заполнять форму на телефоне — боль. Клавиатура занимает половину экрана, приходится переключаться между полями, иногда всё уезжает и непонятно, где ты вообще находишься.

Правила для мобильных форм:

  • Минимальное количество полей. Если на десктопе просишь имя, email, телефон, компанию и должность — на мобильном оставь имя и телефон.
  • Правильный тип клавиатуры для каждого поля. inputmode="tel" показывает цифровую клавиатуру для телефона. inputmode="email" — клавиатуру с @. Это мелочь, которая сильно улучшает UX.
  • Большие поля ввода. Минимум 44px по высоте — чтобы было удобно попасть.
  • Кнопка отправки — на всю ширину, внизу формы.
  • Автодополнение там, где возможно.

Изображения и медиа

На мобильном канале часто используется мобильный интернет — не всегда быстрый. Грузить полноразмерные изображения 2000×1500px на телефон, который покажет их в 390px ширины — это потеря трафика пользователя и медленная загрузка.

Решение — атрибут srcset или тег <picture>: браузер сам выберет нужное изображение под размер экрана. Или современные форматы: WebP вместо JPEG, AVIF там, где поддерживается. Разница в размере файла — 30-50%.

Видео — ещё болезненнее. Автовоспроизведение видео на мобильном — плохая идея, если оно не отключено по умолчанию. Поставь постер (превью-кадр) и дай пользователю самому решать, смотреть или нет.

Десктоп-паттерны, которые на мобильном ломаются

Несколько конкретных примеров того, что работает на десктопе и не работает на мобильном:

Hover-эффекты. На десктопе при наведении мыши появляется подсказка, меняется цвет кнопки, вылезает дополнительный текст. На мобильном hover не существует. Любая информация, которая показывается только при наведении — на телефоне недоступна. Всё важное должно быть видно сразу.

Сложные дропдауны в формах. Стандартный select на десктопе — нормально. На мобильном браузер открывает нативный пикер, который выглядит по-разному на iOS и Android. Для сложных выборов лучше делать кастомный интерфейс — например, модальное окно с крупными кнопками-вариантами.

Таблицы. Таблица с 6 колонками на мобильном либо не помещается, либо становится нечитаемой. Решения: горизонтальный скролл таблицы, переверстка в карточки, или показ только ключевых колонок с возможностью развернуть.

Фиксированные элементы (fixed position). Фиксированный хедер на десктопе — удобно. На мобильном он «съедает» 60-80px экранного пространства. На маленьком экране это ощутимо. Лучше делать хедер, который прячется при скролле вниз и появляется при скролле вверх.

Всплывающие окна на весь экран. Поп-ап на 400×500px на десктопе смотрится нормально. На мобильном он должен быть либо на весь экран (bottom sheet), либо компактным, чтобы пользователь понимал: под ним есть страница, к которой можно вернуться.

Mobile-first: проектируй с телефона

Есть подход, который называется mobile-first: сначала проектируешь мобильную версию, потом расширяешь до десктопа. Не наоборот.

Почему это работает лучше:

  1. Ты вынужден расставлять приоритеты. Когда места мало, приходится решать, что важно, а что нет. Это полезная дисциплина.
  2. Мобильная версия — это базовый слой CSS. Добавлять стили для широкого экрана через min-width проще, чем перетирать десктопные стили через max-width.
  3. Статистика. По данным Statcounter, в 2025 году больше 58% мирового веб-трафика — мобильный. В России цифры похожие. Мобильный пользователь — это уже основной пользователь, а не исключение.

Google тоже индексирует сайты через mobile-first indexing: при ранжировании в поиске оценивается именно мобильная версия.

Производительность как часть дизайна

На десктопе пользователь прощает 3 секунды загрузки. На мобильном — 2, если хорошо. По данным Google, 53% пользователей покидают страницу, если она грузится дольше 3 секунд.

Это значит, что мобильный дизайн неотделим от производительности:

  • Нет тяжёлых анимаций, которые дёргаются на слабом железе.
  • Шрифты подключаются через font-display: swap, чтобы текст показывался сразу, а не ждал загрузки.
  • Критический CSS инлайнится, некритический — откладывается.
  • Изображения — с lazy loading, то есть загружаются, только когда докрутили до них.

Всё это решается на этапе разработки, но закладывается в дизайне: если дизайнер нарисовал 8 анимированных блоков на главной, разработчик должен либо реализовать это производительно, либо объяснить, почему это плохая идея.

В REEXY при разработке мобильных версий сайтов мы проверяем PageSpeed Insights на старте и после сдачи — это позволяет поймать тяжёлые места до того, как они стали проблемой в продакшне.

Тестирование на реальных устройствах

Эмулятор в браузере — полезный, но недостаточный инструмент. Он не воспроизводит реальное касание, не показывает, как выглядит клавиатура iOS поверх формы, не передаёт ощущение от скролла.

Перед сдачей мобильной версии нужно проверить её руками минимум на двух устройствах: одном iPhone и одном Android. Особенно внимательно — формы, навигацию и всё, что появляется/исчезает по взаимодействию.

Отдельно стоит проверить на старых устройствах — iPhone SE (2020) с маленьким экраном 4.7" или Android с 4GB RAM. Это не экзотика, это реальные пользователи.

Что делать с существующим сайтом

Если сайт уже есть и мобильная версия у него плохая — есть два пути.

Первый — переверстать адаптив. Это имеет смысл, если сайт относительно свежий и просто не получил должного внимания в части мобильного дизайна.

Второй — делать новый сайт с mobile-first подходом с нуля. Это имеет смысл, если сайту несколько лет, он строился без расчёта на мобильный трафик, и косметическим ремонтом тут не обойтись.

Стоимость разработки нового сайта у REEXY начинается от 2 000 ₽ за сайт-визитку и от 3 500 ₽ за лендинг. Для бизнеса с реальными задачами и нормальным мобильным трафиком — это вполне доступный порог входа.

Итого: чек-лист мобильного дизайна

Короткий список того, что нужно проверить в мобильной версии:

  • Текст не мельче 16px, заголовки от 24px
  • Касаемые элементы не меньше 48×48px
  • Основные CTA-кнопки в нижней части экрана
  • Нет информации, доступной только через hover
  • Формы упрощены до минимума с правильными типами клавиатуры
  • Изображения адаптированы по размеру (srcset или picture)
  • Нет таблиц без горизонтального скролла или переверстки
  • Тест на реальных устройствах пройден
  • PageSpeed на мобильном — выше 70 баллов

Мобильный дизайн — это не «сжатый десктоп». Это отдельный продукт с другой логикой. Чем раньше это понять, тем меньше переделок потом.