Адаптивний веб-дизайн — дизайн веб-сторінок, що забезпечує оптимальне відображення та взаємодію сайту з користувачем незалежно від роздільної здатності та формату пристрою, з якого здійснюється перегляд сторінки.
Метою адаптивного веб-дизайну є практичне відображення інформації та зручна навігація на всіх пристроях із доступом до інтернету (від стаціонарних ПК до мобільних телефонів). За технологією адаптивного веб-дизайну не потрібно створювати окремі версії веб-сайту. Один сайт може працювати на всьому спектрі пристроїв.
Підходи до побудови
Існує два підходи до побудови адаптивного веб дизайну. Розробка починається або з мобільного інтерфейсу, а далі відбувається адаптація інтерфейсу для інших розширень, або, навпаки, розробка починається від вигляду на екранах стаціонарних ПК і закінчується інтерфейсом на мобільних телефонах.
Область перегляду сторінки може бути монітором, екраном мобільного або яким завгодно пристроєм. Щільність пікселів на різних екранах також різна, тому потрібні гнучкі одиниці вимірювання, що працюють всюди. Адаптивний дизайн – саме той випадок, коли відносні одиниці вимірювання на зразок відсотків стають дійсно корисними. За допомогою відсотків можливо поставити блоку ширину в 50%, і на будь-якому пристрої він буде займати лише половину екрану.
Контрольні точки дозволяють змінювати розташування блоків на сторінці тільки в разі використання екрану з певними розмірами. Наприклад, на стаціонарних комп’ютерах на сторінці буде три колонки, а на мобільних телефонах – тільки одна. Контрольні точки визначає контент сторінки, тобто розробник поступово, починаючи від певної точки, змінює розмір і коли розташуванню контенту потрібні зміни встановлює контрольну точку. Існує інший підхід, який базується на створення контрольних точок для найбільш поширених пристроїв, проте зважаючи на збільшення кількості нестандартних розширень екранів цей підхід не є популярним.
Для тестування адаптивного веб-дизайну існують такі основні способи.
Мобільні емулятори. Емулятор дозволяє перевірити адаптивність і функціональність веб-сайту на різних мобільних платформах, таких як iPhone, IPAD, Android і BlackBerry, фактично не використовуючи самого пристрою. Мобільні емулятори можуть допомогти визначити проблеми веб-сайту і дозволять прийняти коригуючі заходи, щоб зробити сайт візуально привабливим та функціональним на мобільних пристроях.
Веб-сервіси для тестів. Сайти, такі як BrowserStack, надають доступ до стаціонарних і мобільних пристроїв, щоб веб-розробники могли тестувати свої адаптивні веб-дизайни. Браузери Firefox та Chrome у своєму функціоналі дозволяють моделювати вигляд веб-дизайну на найпопулярніших пристроях.
Зміна розміру браузеру. При розробці сайту, щоб швидко перевірити поведінку сайту, достатньо змінити розмір вікна браузера. Це корисно для швидкої перевірки зміни коду, проте цей метод не варто порівнювати з усіма іншими, адже є надто багато аспектів, які не враховує даний тип перевірки.
Люк Вроблевскі запропонував зібрання шаблонів адаптивного веб-дизайну.
Використані джерела інформації: