Разрабатываем мобильную версию сайта на практике

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

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

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

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

Первым адаптируем хедер.

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

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

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

После адаптации создаём отдельный мастер-компонент мобильного хедера и задаём ему понятное имя с указанием разрешения.

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

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

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

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

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

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

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

Только когда элемент действительно мешает мобильной композиции, от него можно отказаться.

Блоки с простыми карточками перестраиваются значительно быстрее.

Карточки располагаем друг под другом, объединяем через Auto Layout и растягиваем до ширины мобильного контейнера с помощью Fill container.

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

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

Внешние вертикальные отступы блоков сокращаем примерно со 100 до 80 px, а расстояния между заголовком и контентом — примерно с 60 до 50 px.

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

Стили можно разделить по папкам:

• 1920 / Header / H2
• 510 / Header / H2

Аналогично можно организовать Layout Grid и другие настройки, которые отличаются между разрешениями.

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

Так структура Figma сразу показывает, какие параметры относятся к десктопу, а какие — к мобильному макету.

Не каждый компонент удаётся адаптировать простым растягиванием.

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

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

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

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

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

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

Главный ориентир — не буквальное повторение десктопа, а сохранение смысла, иерархии и стилистики.

На мобильном экране декоративные круги, стрелки и другие элементы начинают сильнее конкурировать с контентом.

Поэтому часть из них можно уменьшить, переместить или полностью убрать.

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

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

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

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

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

Так маркер останется рядом с первой строкой текста независимо от количества переносов.

Форма заявки перестраивается значительно проще, если её структура была заранее собрана через Auto Layout.

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

Если какой-то элемент не реагирует на изменение ширины, проверяем все уровни вложенности: достаточно одного внутреннего Auto Layout с Fixed width, чтобы вся система перестала растягиваться.

После корректной настройки форма практически не требует ручной перестройки.

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

В блоке контактов карту переносим под текстовую информацию и уменьшаем до ширины контейнера.

Контакты располагаем вертикально, уменьшаем крупные десктопные интервалы и проверяем Fill container у всех вложенных текстовых групп.

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

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

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

Проверяем:

• одинаковые боковые отступы;
• размеры заголовков;
• вертикальный ритм;
• положение изображений;
• висячие предлоги и союзы;
• границы фоновых изображений и градиентов;
• Fill container у вложенных Auto Layout;
• правильный порядок блоков;
• отсутствие лишних элементов за пределами Frame.

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

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

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