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

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

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

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

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

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

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

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

Важность адаптивной вёрстки для бизнеса

В России и во всём мире люди чаще выходят в интернет с мобильного телефона. В РФ мобильная доля веб-трафика составляет 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).

Читай и другие полезные статьи в блоге Kata Academy:

• Введение во frontend: с чего начать создание своего первого сайта

• ТОП-30 бесплатных курсов по Frontend-разработке на JavaScript с нуля

• Переговоры о зарплате для начинающих разработчиков: как и когда просить больше