Адаптивная верстка сайта на HTML: что это и почему она так необходима

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

История возникновения

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

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

Читайте также:

Система Mobile First от Google

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

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

К плюсам этого метода относят:

• Сохранение целостности внешнего вида. Благодаря готовым макетам размер текста останется удобным для чтения, картинки будут сразу показываться полностью, а элементы оформления не начнут смещаться.
• Относительную простоту реализации. Не нужно разрабатывать с нуля отдельный сайт — достаточно настроить несколько шаблонов отображения для уже существующего.
• Помощь в расширении аудитории сайта. Сейчас, по данным «Яндекса», около 66% пользователей выходят в интернет с мобильных устройств. Страницы, с которыми неудобно взаимодействовать, попросту не будут им интересны. Однако если ваш сайт получит адаптивную верстку, велика вероятность, что на него придут новые посетители.
• Приоритет в поисковой выдаче. Способность адаптироваться под разные экраны — важный параметр сайта, на который обращают внимание поисковые роботы «Яндекса» и Google. Если адаптивная верстка выполнена качественно, выше вероятность, что ресурс получит хорошую позицию на поиске.

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

Как сделать адаптивную верстку

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

1. Подготовка к работе: выбор шаблонов и брейкпоинтов

Перед началом работы необходимо определиться с основными размерами экранов (брейкпоинтами) и выбрать подходящие фреймы в Figma.

1.1. Основные брейкпоинты

Брейкпоинты — это точки перехода, при которых дизайн адаптируется под новый размер экрана. Чаще всего используются следующие значения:

1.2. Выбор фреймов в Figma

Откройте Figma и создайте новый файл.

В панели инструментов выберите Frame (F).

В правой панели (или при создании фрейма) выберите один из стандартных шаблонов:

• Mobile: iPhone 14 (375×812), Samsung Galaxy S21 (360×800)
• Tablet: iPad Mini (768×1024), iPad Pro (1024×1366)
• Desktop: MacBook Pro (1440×900), iMac (1920×1080)

Либо введите размер вручную (например, 375×667 для мобильного вида).

2. Создание макета: с чего начать?

Существует два подхода:

• Desktop First – сначала создается версия для ПК, затем она адаптируется под меньшие экраны.
• Mobile First – сначала проектируется мобильная версия, затем расширяется для больших экранов.

Рекомендуется Desktop First, так как:

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

2.1. Создание десктопной версии

Создайте фрейм шириной 1440px (стандарт для ПК).

Разместите основные элементы:

• Шапка (header)
• Навигационное меню
• Основной контент (текст, изображения, карточки)
• Футер (footer)

Используйте Auto Layout для гибкости (чтобы элементы автоматически подстраивались).

2.2. Адаптация под планшеты (992px)

Дублируйте десктопный фрейм (Ctrl+D).

Измените ширину на 992px.

Внесите правки:

• Уменьшите отступы (padding).
• Измените расположение блоков (например, меню может превратиться в бургер).
• Упростите сложные элементы (например, уменьшите количество колонок в сетке).

2.3. Адаптация под мобильные устройства (375px)

Дублируйте предыдущий фрейм.

Установите ширину 375px.

Внесите изменения:

• Вертикальное расположение элементов.
• Скрытие второстепенных блоков.
• Увеличение кнопок и текста для удобного тапа.

3. Основные принципы адаптивности

3.1. Гибкая сетка (Grid)

Используйте Columns (колонки) с процентной шириной.

Пример:

• Десктоп: 4 колонки.
• Планшет: 3 колонки.
• Мобильный: 1 колонка.

3.2. Медиа-запросы (в Figma — Constraints & Auto Layout)

Constraints (ограничения) позволяют элементам растягиваться или фиксироваться.

Auto Layout автоматически выравнивает элементы при изменении размера.

3.3. Гибкие изображения

Используйте Fill Container, чтобы изображения масштабировались.

Для фоновых картинок применяйте Cover или Contain.

3.4. Адаптивная типографика

Используйте относительные единицы (rem, em) или динамический шрифт.

Пример:

• Заголовок: 32px (десктоп) → 24px (мобильный).
• Текст: 16px → 14px.

4. Тестирование адаптивности

• Просмотр в реальном времени (View → Presentation Mode).
• Использование Figma Mirror для проверки на смартфоне.
• Экспорт в браузер (Figma → Share → Embed → Open in Browser).

5. Дополнительные инструменты

Figma Plugins:

• Breakpoints – автоматическое создание адаптивных фреймов.
• Responsive – помогает тестировать адаптацию.
• Autoflow – упрощает создание связей между экранами.

6. Работа с компонентами и стилями

6.1. Создание переиспользуемых компонентов

В Figma компоненты позволяют создавать библиотеку элементов для многократного использования:

• Выделите элемент и нажмите Ctrl+Alt+K (Create Component)
• Для адаптивности создавайте варианты компонентов (Variants)
• Пример: кнопка с разными размерами для мобильных и десктопных версий

6.2. Текстовые и цветовые стили

Единые стили упрощают адаптацию дизайна:

7. Продвинутые техники адаптации

7.1. Адаптация сложных элементов

Приемы для нестандартных компонентов:

• Навигация: преобразование меню в бургер-иконку
• Таблицы: горизонтальный скролл или карточное представление
• Галереи: изменение количества колонок

7.2. Микровзаимодействия и анимации

Для адаптивных прототипов:

1. Создайте отдельный фрейм для анимированного состояния
2. Используйте Smart Animate для плавных переходов
3. Оптимизируйте анимации для мобильных устройств

8. Совместная работа и передача макетов

8.1. Организация файла

Рекомендации по структуре:

• Папки: /Desktop, /Tablet, /Mobile
• Именование: «Шапка_Десктоп», «Шапка_Мобильная»
• Комментарии через функцию Comment (Ctrl+Alt+M)

8.2. Экспорт ресурсов

Настройки для разработчиков:

• Экспорт в 1x, 2x, 3x для ретина-дисплеев
• Использование Figma Mirror для предпросмотра
• Копирование CSS-свойств через панель Inspect

9. Частые ошибки и решения

10. Дополнительные ресурсы

• Плагины: Breakpoints, Responsify
• Инструменты тестирования: BrowserStack, Responsinator
• Книга: «Адаптивный дизайн» Итана Маркотта

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

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

• Все версии должны иметь один дизайн оформления. Это касается таких элементов как цвет фона, шрифт текстов, начертание логотипов. Если в верстке сайта для мобильного устройства они будут отличаться от десктопных, пользователь может решить, что попал на страницу мошенников, и поспешит уйти.
• Функционал версий должен совпадать. Важно проследить, чтобы при отображении страницы на мобильном устройстве сохранились все необходимые фильтры, кнопки и формы заказа, способы показа контента. Иначе пользователи не задержатся надолго.
• Содержание версий не может отличаться. Открывая одну и ту же страницу с компьютера и с телефона, пользователь должен видеть одинаковую информацию. Если данные не будут совпадать, это снизит доверие к сайту.
• Иерархию элементов следует сохранить. Иными словами, если в десктопной версии сначала идет заголовок, затем текст, а после него форма заказа, в мобильной должно быть точно так же.
• Высота и ширина элементов, на которые можно нажимать, в верстке для мобильного устройства должны быть больше 44 пикселей. В противном случае посетитель сайта просто не сможет попасть пальцем по кнопке или строке меню.
• Для мобильной верстки не нужно много колонок. Обычно достаточно от одной до четырех. В десктопных версиях их около 12, а на планшетах — шесть.
• Важно учитывать особенности расположения контента. На десктопах отдельные информационные блоки (например, карточки с товарами) размещаются горизонтально, в несколько рядов, а на смартфонах — вертикально, в одну колонку. Так их лучше видно на небольшом экране и не возникает неудобств с прокруткой.
• Не стоит забывать о всплывающих подсказках, которые упрощают навигацию по сайту. В мобильной версии важно выбрать такой значок для их вызова, на который легко нажать пальцем.

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

• Изображениями. Чтобы они поместились на экране мобильного устройства, потребуется кадрирование либо пропорциональное уменьшение. Первый способ стоит использовать только в том случае, если при обрезке не теряются важные элементы картинки. Он особенно пригодится, когда большое место отведено надписи — из-за уменьшения без обрезки она может стать слишком мелкой. А при отсутствии текста на изображении лучше использовать пропорциональное уменьшение. Тогда картинка на мобильном устройстве будет видна целиком и никакой важный элемент не пострадает.
• Шрифтами. Их размер измеряется количеством пикселей в букве по вертикали и часто обозначается термином «кигель». На десктопах обычно используются шрифты размером от 16 до 18 пикселей для основного текста, и 14-15 — для подписей к картинкам. Однако с маленьких экранов текст 14-15 кигеля трудно читать, поэтому при подготовке версий, предназначенных для смартфонов, лучше использовать более крупные шрифты.
• Заголовками. Создание макета часто начинается еще до завершения всех текстов, которые будут размещены на сайте. Из-за этого дизайнер может оставить слишком мало свободного места под заголовок, и позже верстку придется корректировать. Чтобы такие меры не потребовались, сделайте отступ достаточно крупным — тогда поместится любой текст.
• Длиной строк. Мобильные устройства имеют узкие, вытянутые вверх экраны, поэтому строки текста располагаются на них во всю ширину, не оставляя по бокам свободного пространства. Однако с десктопными версиями так не получится — строки, растянутые от одной границы экрана до другой, будет тяжело читать. Их оптимальная длина для десктопов — 60-70 символов с пробелами, а для мобильных устройств — 40-60.

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