Разработка адаптивного веб-дизайна

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

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

Мобильные версии сайтов и «Резиновая» вёрстка

Предшественником адаптивного веб-дизайна была «резиновая» вёрстка. Тогда ширина элементов сайта менялась при изменении ширины страницы. «Резиновая» вёрстка делала удобным просмотр простых сайтов с разных экранов, но для сложных интерфейсов проблема оставалась. Если на странице было много элементов, при сжатии размера под расширение экрана смартфона, шрифт становился очень мелким.

Крупные компании уже тогда могли позволить себе разработку мобильной версии сайта. В таких случаях интерфейс сразу разрабатывался под разрешения экранов смартфонов. Примеры мобильных версий сайтов: «Яндекс. Маркет», Lamoda, YouTube, «ВКонтакте».

Разработка мобильной версии предполагает, что разработчики создают два разных сайта: для больших экранов и для смартфонов. Создать один сайт с использованием адаптивной вёрстки намного дешевле. Дизайнер разрабатывает макеты под разные разрешения экранов, а разработчик прописывает в коде, как сайт должен отображаться в зависимости от размера экрана. Кстати, начать свой путь в IT ты можешь прямо сейчас в Kata. Понятные материалы и поддержка опытных менторов. Переходи по ссылке, чтобы узнать подробнее!

В России и во всём мире люди чаще выходят в интернет с мобильного телефона. В РФ мобильная доля веб-трафика составляет 42% по данным Datareportal. Это значит, что бизнес делает акцент в своих рекламных кампаниях на мобильные устройства. Сложно представить, что у какого-то популярно интернет-магазина нет удобной мобильной версии сайта. Если сайт отображается плохо с мобильных устройств, это несёт огромные убытки для компании, потому что пользователи сегодня не готовы долго ждать и разбираться в сложном интерфейсе. Например, 53% пользователей закрывают страницу, если её загрузка занимает более 3 секунд, такое исследование провели Akamai и SOASTA. При поиске нужной информации на сайте счёт тоже идёт на секунды. В то же время, задача бизнеса: удержать пользователя на сайте. Если интерфейс выглядит и работает плохо с мобильного устройства, сделать это, как и повысить продажи, не получится.

Теория

Основной инструмент адаптивной вёрстки — медиа-запросы и мета-тег viewport. Медиа-запросы Это наборы правил в файле стилей CSS. Они активируют код для определённого формата отображения сайта в зависимости от разрешения экрана пользователя, типа устройства, соотношения сторон и так далее. Мета-тег viewport задаёт параметры области просмотра.

Еще два ключевых инструмента адаптивной вёрстки: свойства CSS Flexbox и Grid. Они позволяют управлять расположением элементов на странице, расстоянием между ними, размерами, порядком и так далее. Как правило, Flexbox используют для простых макетов, где элементы располагаются в один ряд, а Grid — для более сложных многоуровневых интерфейсов.
Практика

Разберём на практике адаптивную вёрстку на примере одного элемента интерфейса сайта Kata Academy.

На экране компьютера этот элемент выглядит так:

Это простой интерфейс, поэтому будем использовать Flexbox. Далее разберём пошагово.

В данном примере мы рассмотрим работу медиа-запросов на flex-контейнере. В примере у нас есть 3 блока:

• сам flex-контейнер с классом “flex-container”,
• flex-элемент с классом “flex-element”,
• и блок с числом, его класс “number”.

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

Интересующие нас и в дальнейшем меняющиеся стили на десктоп-версии имеют вот такой вид кода:

Чтобы влиять на стили на различных устройствах, необходимо использовать медиа-запросы. В коде они записываются как “@media …”
Сами по себе медиа-выражения имеют большой спектр функциональности, в нашем же случае мы рассмотрим их использование в контексте ширины окна просмотра (мета-тег “viewport”). Этим мета-тегом мы меняем следующие параметры блоков:

• задний фон (background-color),
• направление оси flex-контейнера (flex-direction),
• внутренние отступы (padding), отступ между flex-элементами (gap).

После применения данного медиа-запроса, наша страница выглядит так:

Обратите внимание, как меняется поведение верстки, если мы увеличим ширину области просмотра хотя бы на 1рх. Напоминание: ограничение в медиа-запросе выглядит как (max-width: 400px).

Что такое адаптивный веб-дизайн и в чём его отличие от обычного дизайна сайта?

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

Почему адаптивный веб-дизайн так важен для современных сайтов?

Потому что более 60% пользователей заходят на сайты с мобильных устройств. Адаптивность влияет на удобство, конверсии, SEO и поведенческие метрики. Поисковики, включая Google, дают приоритет мобильным версиям страниц.

С чего начать создание адаптивного дизайна для сайта с нуля?

Начни с мобильной версии (Mobile First), задай flex/grid-сетку, пропиши media queries для ключевых разрешений (320px, 768px, 1024px и т. д.). Используй относительные единицы (em, %, vh, vw) и проверяй верстку на разных устройствах.

Какие технологии и инструменты помогают реализовать адаптивный веб-дизайн?

HTML5, CSS3 (media queries, flexbox, grid), фреймворки вроде Bootstrap или Tailwind, DevTools для тестирования, Figma для адаптивных макетов. Также полезны Lighthouse и BrowserStack для проверки.

Чем адаптивный веб-дизайн отличается от мобильной версии сайта?

Адаптивный дизайн — это единый сайт, который подстраивается под экран. Мобильная версия — это отдельный сайт (m.site.ru), который требует поддержки двух версий. Сегодня в приоритете — адаптивность, а не отдельные мобильные сайты.