Навіщо потрібна адаптивна верстка

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

Але!

Якщо ви часто користуєтесь смартфоном, то, напевно, стикалися з сайтами, якими фізично неможливо користуватися. Браузер відкриває «важку» десктопну версію з абсолютно незручною навігацією, маленькими кнопками і шрифтами, що погано читаються. Це означає, що сайт зверстан без застосування принципів адаптивної верстки. А це не тільки погіршує досвід користувача для відвідувачів, але і знижує позиції сайту в пошуковій видачі 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 Академії:

Звичайно ж, це далеко не єдиний спосіб перевірити та оцінити адаптивність сайту. Зате він простий, безкоштовний та надає всю необхідну інформацію. У тому числі може дати поради щодо покращення адаптивності. Тому користуйтеся ним у своїй роботі обов'язково!