Адаптивний веб-дизайн

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до: навігація, пошук
Приклад адаптивного дизайну

Адаптивний веб-дизайн (англ. Responsive web design) — дизайн веб-сторінок, що забезпечує оптимальне відображення та взаємодію сайту з користувачем незалежно від роздільної здатності та формату пристрою, з якого здійснюється перегляд сторінки.

Метою адаптивного веб-дизайну є практичне відображення інформації та зручна навігація на всіх пристроях із доступом до інтернету (від стаціонарних ПК до мобільних телефонів). За технологією адаптивного веб-дизайну не потрібно створювати окремі версії веб-сайту. Один сайт може працювати на всьому спектрі пристроїв.[1]

Популярність адаптивного веб-дизайну зростає з кожним днем так як вже зараз кількість мобільного трафіку сягає більше половини від всього інтернет трафіку.[2] Ця тенденція настільки поширена, що Google 21 квітня 2015 року запустив у своїй пошуковій системі алгоритм оцінки сайту на відповідність принципам «дружного» до мобільних пристроїв інтерфейсу.[3] Від цього показника залежить як високо сторінка буде представлена в результатах мобільного пошуку, а отже дана оцінка частково діє як штраф для сайтів, які не відповідають стандартам інтерфейсу для мобільних пристроїв.

Історія[ред.ред. код]

Першим сайтом, на якому був використаний макет, що змінювався відповідно до ширини браузера, став Audi.com,[4] запущений у кінці 2001 року. Сайт був розроблений компанією razorfish. У браузері Internet Explorer макет міг змінюватись динамічно із зміною розміру. Проте у Netscape сторінка повинна була перезавантажитись із сервера при зміні розміру браузера.

У травні 2010 року Ітан Маркотт ввів термін адаптивний веб-дизайн та описав основні принципи у статті «A List Apart».[1] Він також описав теорію і практичне застосування адаптивного веб-дизайну в своїй книзі під назвою «Responsive Web Design», яка була видана 2011 року.

Адаптивний дизайн був внесений другим номером до списку топ веб-дизайн тенденцій станом на 2012 за версією журналу «.net».[5] Mashable назвав 2013 роком адаптивного веб-дизайну.[6] Багато інших джерел рекомендували адаптивний дизайн як економічну альтернативу мобільним додаткам.

Основні принципи[ред.ред. код]

Desktop first (зліва) та mobile first (справа)

Підходи до побудови[ред.ред. код]

Існує два підходи до побудови адаптивного веб дизайну. Розробка починається або з мобільного інтерфейсу, а далі відбувається адаптація інтерфейсу для інших розширень (англ. mobile first), або, навпаки, розробка починається від вигляду на екранах стаціонарних ПК і закінчується інтерфейсом на мобільних телефонах (англ. desktop first).

Відносні одиниці вимірювання

Відносні одиниці вимірювання[ред.ред. код]

Область перегляду сторінки може бути монітором, екраном мобільного або яким завгодно пристроєм. Щільність пікселів на різних екранах також різна, тому потрібні гнучкі одиниці виміру, що працюють всюди. Адаптивний дизайн - саме той випадок, коли відносні одиниці виміру на зразок відсотків стають дійсно корисними. За допомогою відсотків можливо поставити блоку ширину в 50%, і на будь-якому пристрої він буде займати лише половину екрану.

Дизайн з контрольною точкою(зліва) та без(справа)

Контрольні точки[ред.ред. код]

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

Тестування[ред.ред. код]

Для тестування адаптивного веб-дизайну існують такі основні способи.

Мобільні емулятори[ред.ред. код]

Емулятор дозволяє перевірити адаптивність і функціональність веб-сайту на різних мобільних платформах, таких як iPhone, IPAD, Android і BlackBerry, фактично не використовуючи самого пристрою. Мобільні емулятори можуть допомогти визначити проблеми веб-сайту і дозволять прийняти коригуючі заходи, щоб зробити сайт візуально привабливим та функціональним на мобільних пристроях.

Веб-сервіси для тестів[ред.ред. код]

Сайти, такі як BrowserStack, надають доступ до стаціонарних і мобільних пристроїв, щоб веб-розробники могли тестувати свої адаптивні веб-дизайни. Браузери Firefox та Chrome у своєму функціоналі дозволяють моделювати вигляд веб-дизайну на найпопулярніших пристроях.

Зміна розміру браузеру[ред.ред. код]

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

Шаблони[ред.ред. код]

Люк Вроблевскі запропонував зібрання шаблонів адаптивного веб-дизайну.[7]

Mostly fluid

Найбільш гумовий (англ. mostly fluid)[ред.ред. код]

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

Column drop

Падіння колонок (англ. column drop)[ред.ред. код]

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

Layout shifter

Рухомий макет (англ. layout shifter)[ред.ред. код]

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

Tiny tweaks

Крихітні зміни (англ. tiny tweaks)[ред.ред. код]

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

Off canvas

Поза екраном (англ. off canvas)[ред.ред. код]

У всіх вищеперелічених шаблонах присутня тенденція до розміщення елементів контенту вертикально один під одним. Даний шаблон використовує інший підхід. Контент, який використовується рідко, наприклад елементи навігації або меню, розміщується за межами екрану і використовуються тільки тоді, коли це дозволяє зробити розмір екрану. На невеликих екранах контент можна відкрити за допомогою додаткової кнопки (часто використовується іконка гамбургера (англ. hamburger icon)).

Примітки[ред.ред. код]

  1. а б Marcotte, Ethan (May 25, 2010). Responsive Web design. A List Apart. 
  2. Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper. Cisco. January 30, 2015. 
  3. Official Google Webmaster Central Blog: Rolling out the mobile-friendly update. Official Google Webmaster Central Blog. 
  4. Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)."
  5. 15 top web design and development trends for 2012. .net magazine. January 9, 2012. 
  6. Cashmore, Pete (December 11, 2012). Why 2013 Is the Year of Responsive Web Design. 
  7. Wroblewski, Luke (March 14, 2012). Multi-Device Layout Patterns. 

Література[ред.ред. код]

  • Ethan Marcotte Responsive Web Design. — A Book Apart, 2011. — 143 с. — ISBN 978-0-9844425-7-7.
  • Ethan Marcotte Responsive Web Design. — М., 2012. — 159 с. — ISBN 978-5-91657-385-5.
  • Luke Wroblewski Mobile first. — М., 2012. — 176 с. — ISBN 978-5-91657-388-6.
  • Ben Frain Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd, 2012. — 324 с. — ISBN 9781849693189.
  • Aaron Gustafson Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. — Easy Readers, 2011. — 144 с. — ISBN 978-0-9835895-0-1.

Посилання[ред.ред. код]