Зачем нужна адаптивная верстка

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

Но!

Если вы часто пользуетесь смартфоном, то наверняка сталкивались с сайтами, которыми физически невозможно пользоваться. Браузер открывает «тяжелую» десктопную версию с абсолютно неудобной навигацией, маленькими кнопками и плохо читаемыми шрифтами. Это означает, что сайт сверстан без применения принципов адаптивной верстки. А это не только ухудшает пользовательский опыт для посетителей, но и снижает позиции сайта в поисковой выдаче Google. 

Итак, сегодня мы поговорим о принципах адаптивной верстки, о техниках ее применения, а также о том, как можно легко проверить любой сайт на адаптивность. Рекомендуем статью к ознакомлению в первую очередь тем, кто изучает Frontend, а также проходит наш онлайн-курс «Web-дизайн с нуля до крутого портфолио»!

Что такое адаптивная верстка?

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

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

Техники для адаптации основных элементов веб-страниц

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

Гибкий макет (Flexible layout)

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

target ÷ context = result

То есть, мы делим ширину элемента на ширину экрана и получаем нужное нам значение в процентах. Например, наш макет имеет ширину 1000 пикселей и состоит из двух блоков — слева 250 пикселей и справа 530 пикселей.

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

Таким образом сайт будет масштабироваться до любого размера экрана. Блок слева при этом будет занимать 25% от ширины, а справа — 53%. Не больше и не меньше.

Гибкие изображения (Flexible media)

С изображениями, видео и другими видами медиа еще проще — их можно легко масштабировать, используя специальное свойство:

{max-width: 100%}

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

Гибкие встроенные медиа (Flexible Embedded Media)

Max-width — удобное и полезное свойство, однако оно не будет работать, если вы используете на странице встраиваемые медиа. Например, если вы встроите на страницу видео с YouTube, max-width в отношении не сработает. А верстка по сути окажется сломана. 

Чтобы все сделать правильно, необходимо выполнить несколько шагов:

1. Встраиваемый элемент нужно разместить внутри родительского.
2. Родительский элемент обязан иметь ширину 100% и высоту 0. Таким образом он будет автоматически масштабироваться в зависимости от ширины области просмотра.
3. В нижней части родительского элемента нужно установить отступ, значение которого соответствует соотношению сторон видео. Так высота родительского элемента будет пропорциональной его ширине.

Давайте для лучшего понимания посмотрим, как это выглядит на практике!

Допустим, у нас есть видео с YouTube, имеющее соотношение сторон 16:9. Используем формулу гибкого макета и делим 9 на 16. Получаем значение 0,56%.

Далее пишем код и не забываем расставить position relative и absolute для родительского и дочернего элементов:

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

Медиа-запросы (Media queries)

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

Интересный факт! Сегодня техника media queries применяется не только в верстке сайтов, но также на телевидении, печати и даже в разработке 3D-очков. Это по праву очень перспективный и функциональный метод адаптивной верстки, хотя назвать его простым невозможно.

В верстке вам доступно несколько способов применения медиа-запросов:

1. Применение правила @media внутри таблицы стилей.
2. Импорт новой таблицы стилей с применением правила @import.
3. Ссылка на таблицу стилей из HTML-документа.

Но мы все же рекомендуем использовать именно первый метод — правило @media внутри таблицы стилей. Это наиболее простой способ, который, к тому же, сокращает количество дополнительных HTML-запросов и в целом упрощает процесс.

Mobile first

Ну и напоследок, пожалуй, главный принцип современной верстки — mobile first. В основе этого принципа лежит правило, согласно которому сначала верстается мобильная версия сайта, а уже после этого используется техника media queries для добавления стилей с учетом увеличения области просмотра на гаджетах с большим размером экрана.

У этого принципа есть несколько веских преимуществ:

1. Удобство для пользователя
2. Быстрая загрузка страниц
3. Приоритет в ранжировании поисковыми системами

Однако необходимо учитывать и некоторые недостатки такого подхода. Во-первых, из-за технической сложности разработки верстка mobile first — это довольно длительный и не самый дешевый процесс. Во-вторых, этот принцип ставит некоторые ограничения в плане визуального оформления. Да, сегодня в тренде минимализм, который идеально ложится на принципы mobile first. Но это рано или поздно изменится, и тогда перед разработчиками будет стоять задача, как при довольно ограниченных возможностях создавать mobile-friendly сайты с учетом новых трендов.

Является ли ваш сайт Mobile-Friendly?

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

Например, вот так выглядит отчет по адаптивности сайта Wezom Академии:

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