Адаптивна верстка

Опрацюйте теоретичний матеріал:

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

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

Адаптивна верстка — підхід, що передбачає зміну дизайну залежно від поведінки користувача, розміру екрана, платформи і орієнтації девайса.

Основні техніки реалізації

Підлаштовуючи сайт під мобільні пристрої, застосовують певні інструменти. Розглянемо основні елементи та способи їх реалізації, щоб верстка вийшла дійсно адаптивна.

Регулювання розширення екранів

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

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

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

І хоча з зображеннями справа йде трохи складніше, ніж з текстом, вони можуть маштабуватися, обрізатися або зовсім зникати виходячи з того, який тип контенту вимагається під пристрій.

Плаваюча сітка

Основоположною ланкою як зробити сайт адаптивним є макети на основі сітки. При цьому адаптивність верстки забезпечується застосуванням саме гнучкої сітки. Разом з нею між елементами постійно буде інтервал, а через свої пропорції вони зможуть підлаштовуватися під певну ширину екрану.

Медіа-запити

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

Тестування створених сайтів

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

Гумова верстка

Макету і окремим його складовим надаються розміри, подані у відсотках, таким чином вміст сторінки розтягується. Для того, щоб розтягнути сайт і на 6-дюймовий екран смартфона і 42-дюймовий екран телевізора необхідно встановити максимальний і мінімальний розміри ширини (властивості max-width і min-width відповідно).

Адаптивна верстка принципово відрізняється від фіксованої та гумової.

На відміну від фіксованої, де елементи мають фіксовані розміри, адаптивність дає змогу їм масштабуватися і перерозподілятися залежно від роздільної здатності екрана. Це суттєво підвищує зручність перегляду на різних пристроях.

Порівняно з гумовою версткою, де елементи змінюються пропорційно ширині екрана, адаптивна верстка керує розподілом елементів гнучкіше. Вона використовує медіа-запити для точного визначення характеристик пристрою, що дає змогу створювати більш точні та ретельно адаптовані макети.

Основна відмінність полягає в тому, що адаптивна верстка активно реагує на безліч параметрів пристрою, забезпечуючи оптимальну візуальну і функціональну взаємодію з користувачем на всьому спектрі гаджетів.

Брейкпоінт

Прив’язка до конкретних пристроїв з певною роздільністю екрану.

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

Які переваги несе в собі адаптивність веб сайту?

Якщо ви хочете, щоб ваш ресурс утримував першість у пошукових системах, до його розробки слід підійти серйозно. На даний момент далеко не всі хочуть переходити зі звичайної мобільної версії. Але якщо подивитися з боку СЕО просування, можна сказати, що адаптивні сайти мають ряд важливих переваг, а саме:

• гарантія того, що клієнт добре бачитиме ваш контент на будь-якому гаджеті;

• підвищення видимості ресурсу в пошукових системах;

• один сайт – одна адреса, через що авторитет ресурсу не потрібно формувати з нуля.

Опрацюйте відео-урок:

Виконайте інтерактивну вправу.

Скрін виконаної вправи прикріпіть до цього завдання.

Практичне завдання:

Спробуйте свої сили в грі Flexbox Froggy, де потрібно допомагати жабеняті Фрогі та його друзям написанням css-коду.

Пройдіть перші шість рівнів.

https://flexboxfroggy.com/#uk

Скріншоти 3, 5, 6 рівнів результату прикріпіть до цього завдання.