Мобильные версии сайтов

16.07.2026

Практические рекомендации по проектированию, дизайну, верстке и оптимизации

(А)

Проектирование

Основа удобной мобильной версии закладывается еще на этапе проектирования.

(01)

Отрисовывайте мобильную версию

Это позволит согласовать макет ещё до верстки и избежать лишних правок после неё.

не пропускайте этап проектирования мобильной версии;
при необходимости измените решения, что плохо работают в мобилке;
советую брать размер фрейма в Фигме — 390px. Нижний брейкпоинт в Тильде: 390px — если верстаем с автоскейлом, 360px — если по Window-контейнеру.

(02)

Первый экран

За несколько секунд пользователь должен понять, куда попал, что ему предлагают и что делать дальше.

показывайте главную мысль сразу;
не перегружайте первый экран лишней информацией;
если есть основное действие (CTA), разместите его на первом экране;
если позволяет контент, старайтесь делать первый экран высотой 100% экрана.

(03)

Следите за визуальной иерархией

На мобильном экране пользователь чаще сканирует страницу, чем читает её. Поэтому взгляд должен сразу цепляться за самое важное.

выделяйте главное с помощью размера, насыщенности и цвета;
не делайте все элементы одинаково заметными;
используйте свободное пространство для создания акцентов;
группируйте связанные элементы с помощью отступов.

(04)

Адаптируйте решения по необходимости

Изменяйте способ реализации идеи, если это сделает мобильную версию удобнее.

переставляйте элементы внутри блока и меняйте композицию;
собирайте карточки в слайдер;
сокращайте второстепенный контент;
используйте кнопку «Показать ещё» для большого объёма информации;
сохраняйте ключевой контент, если сайт ориентирован на SEO.

( B)
Читаемость

Даже хорошая композиция не спасёт страницу, если её неудобно читать на небольшом экране

(01)

Типографика

Размеры текста должны обеспечивать комфортное чтение, а не только хорошо выглядеть в макете.

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

Оптимальный размер наборного шрифта: 14−15px на 390px с автоскейлом, 16px по Window и Grid.

(02)

Свободное пространство

Свободное пространство помогает быстрее воспринимать информацию и делает страницу визуально легче.

оставляйте достаточно воздуха между смысловыми блоками;
используйте отступы для объединения связанных элементов;
не пытайтесь заполнить каждый свободный пиксель.

(03)

Контраст

Контраст помогает пользователю быстрее ориентироваться на странице и выделяет самое важное.

используйте контраст размеров для создания акцентов;
не делайте все элементы одинаково заметными;
следите за контрастом текста и фона;
используйте цвет для управления вниманием.

(04)

Размер элементов

Все элементы интерфейса должны быть хорошо заметны и удобны для взаимодействия.

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

Оптимальный размер иконок — 45−50px.

(С)
Взаимодействие

Как сделать мобильную версию удобной для использования, а не только красивой.

(01)

Правило большого пальца

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

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

(02)

Навигация

Пользователь должен в любой момент понимать, как перейти в нужный раздел или выполнить основное действие.

используйте бургер-меню или нижнее меню;
если навигация играет важную роль, сделайте её фиксированной;
используйте понятную иконку бургер-меню или дополните её подписью «Меню»;
не перегружайте меню большим количеством пунктов.

(03)

Формы

Каждое дополнительное поле увеличивает вероятность, что пользователь не отправит форму.

оставляйте только действительно необходимые поля;
используйте подходящий тип клавиатуры для телефона, e-mail и чисел;
делайте поля и элементы формы достаточно крупными;
показывайте понятные ошибки при заполнении.

(04)

Проверка

Не ограничивайтесь проверкой в браузере. Всегда тестируйте сайт на реальном устройстве.

По возможности проверяйте:

корректность отображения;
удобство взаимодействия;
работу анимаций;
поведение при скролле.

(D)
Технические рекомендации

При разработке мобильной версии важно учитывать технические особенности устройств, браузеров и контента, которые влияют на работу сайта.

(01)

Особенности браузеров

Мобильные браузеры могут по-разному отображать одни и те же элементы. Учитывайте их особенности ещё на этапе проектирования и верстки.

протестируйте сайт как минимум в Safari и Chrome;
учитывайте панели браузера при проектировании первого экрана;
используйте цвет системного интерфейса (theme-color), чтобы верхняя и нижняя панели выглядели частью сайта;
вместо 100vh используйте современные единицы высоты (100dvh), чтобы избежать скачков первого экрана.

(02)

Анимация

Не все анимации, которые хорошо работают на десктопе, одинаково хорошо подходят для мобильных устройств.

не перегружайте страницу большим количеством одновременных анимаций;
осторожно используйте фиксированные (fixed) элементы — на мобильных они могут вести себя нестабильно;
проверяйте плавность работы анимаций на реальном устройстве.

(03)

Медиафайлы

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

сжимайте изображения и видео перед публикацией;
используйте формат WebP для изображений;
не загружайте медиафайлы большего размера, чем они отображаются на сайте;
для фоновых видео на Tilda используйте Annexx «Конструктор видео» — по моему опыту, такой способ обеспечивает наиболее быструю загрузку на мобильных устройствах.

Подробнее про оптимизацию контента: t.me/spirina_design/419