Мобильная версия сайта - основные принципы разработки

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

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

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

После разработки десктопной версии необходимо подготовить мобильную. В рамках курса мы начинаем именно с большого экрана, а затем перестраиваем готовый дизайн под смартфон.

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

В проекте используем мобильный Frame шириной 510 px и контейнер шириной 480 px с боковыми отступами по 15 px.

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

Десктопная сетка из 12 колонок для узкого экрана становится избыточной.

В мобильной версии количество колонок можно сократить: например, использовать шесть, четыре, три или две в зависимости от конкретной композиции.

Главное — сохранить понятные направляющие и единый контейнер, относительно которого выстраивается основной контент.

Основной принцип адаптации — перевод горизонтальной композиции в вертикальную.

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

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

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

Не нужно автоматически уменьшать каждый элемент только потому, что экран стал меньше.

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

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

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

Исключением часто становятся большие заголовки, особенно на первом экране.

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

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

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

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

Например, внешний отступ блока в 100 px на узком экране может занимать слишком много пространства. В мобильной версии его можно уменьшить примерно до 80 px.

То же относится к расстоянию между заголовком и содержимым: вместо 60 px можно использовать около 40 px.

При этом не нужно уменьшать абсолютно все интервалы. В первую очередь пересматриваем крупные расстояния между самостоятельными смысловыми группами.

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

Поэтому второстепенные пункты переносим в бургер-меню, а на основном экране оставляем только наиболее важные элементы.

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

Скрытая информация не должна исчезать из сайта полностью: она просто переносится внутрь раскрывающегося меню.

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

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

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

Главное — не пытаться любой ценой повторить десктопную композицию пиксель в пиксель.

Некоторые декоративные детали на мобильном экране становятся лишними.

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

Мобильная версия не обязана содержать абсолютно каждый декоративный элемент десктопа.

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

Карточки, которые хорошо смотрелись на десктопе, на мобильном экране могут стать слишком высокими.

Если внутри много текста, простое уменьшение ширины приведёт к дополнительным переносам и сильно растянет страницу.

В таком случае можно изменить сам принцип карточки. Например, оставить изображение, заголовок, короткое описание и кнопку «Подробнее», а дополнительную информацию скрыть внутри следующего состояния.

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

Иногда пропорционального масштабирования недостаточно.

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

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

Адаптация — это не уменьшенная копия десктопа, а работающая версия интерфейса для другого формата экрана.

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

Например, если фотография относится к конкретному описанию, не стоит автоматически переносить её далеко вниз только потому, что в десктопе она находилась справа.

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

Порядок элементов определяется не только их координатами на десктопе, но и смысловыми отношениями.

Формы обычно хорошо адаптируются под мобильную ширину.

Поля ввода уменьшаются по ширине и последовательно располагаются друг под другом. Если на десктопе несколько элементов стояли в одной строке, на мобильном они переходят в вертикальный формат.

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

Логика заполнения должна оставаться понятной даже после перестройки.

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

Например, первый элемент первой строки остаётся первым, правый элемент этой строки становится следующим, после чего аналогично перестраивается вторая строка.

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

Принцип «слева направо, затем сверху вниз» работает в большинстве ситуаций, но не должен использоваться механически.

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

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

Главная цель — получить понятный мобильный интерфейс, а не буквально воспроизвести десктоп.

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

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

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

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

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

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

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

При адаптации удобно действовать последовательно.

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

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

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

Перейти к следующему уроку