Наша совместная команда Banwar.org

Связаться с нами

  • (097) ?601-88-87
    (067) ?493-44-27
    (096) ?830-00-01

Статьи

Адаптивний веб сайт або чуйний - в чому різниця?

  1. Що таке чуйний дизайн
  2. Що таке адаптивний дизайн
  3. Плутанина у визначеннях
  4. особливості підходів

У даній статті ми поговоримо про те, що таке чуйний і адаптивний дизайн, і в чому полягає різниця між ними

У даній статті ми поговоримо про те, що таке чуйний і адаптивний дизайн, і в чому полягає різниця між ними.

З'явилися два принципово різних підходи до створення сайтів для мобільних пристроїв: Adaptive web design і Responsive web design.

Що таке чуйний дизайн

Що таке чуйний дизайн

Чуйний дизайн (Responsive web design або RWD) - підхід до створення дизайну, при якому сайт розробляється з розрахунком на те, щоб забезпечити найбільш просте його використання: зручний перегляд сайту з мінімумом ресайз і зайвих прокручувань - на найширшому спектрі пристроїв. Чуйний дизайн володіє наступними особливостями:

При верстці чуйного дизайну використовуються виключно HTML і CSS - без підключення JavaScript для визначення «отзвичівості» елементів дизайну.

Чуйна верстка визначає, як будуть виглядати елементи сайту на різних пристроях; проте ці елементи не ховаються / не замінюють один, а їх поведінка, так само як і виконувані ними функції, не змінюється.

Три основних принципи чуйного дизайну:

розташування всіх елементів в рамках модульної сітки;

всі елементи верстки та медіа-файли (в т.ч. зображення) є «гумовими» (flexible) - їх розміри залежать від розміру екрану;

робота з Media queries - модулем CSS3, що дозволяє задавати різні стилі (або навіть таблиці стилів) в залежності від дозволу екрану, його розмірів і інших харатеристик.

Чуйний дизайн створюється з використанням адаптивної розмітки (не плутати з адаптивним дизайном).

Адаптивна розмітка (adaptive layout) полягає в тому, що на сайті створюється кілька стилів, варіантів розташування елементів на модульній сітці і кілька варіантів стилів елементів дизайну. Ці варіанти змінюють один одного при зміні розмірів екрану, при цьому утворюються якісь точки переходу між різними видами розмітки / стилів сайту.

Чуйний дизайн не має на увазі роботи з об'єктною моделлю елементів на сторінці, не має на увазі зміну ієрархії / вкладеності блоків і об'єктів при зміні виду розмітки.

Що таке адаптивний дизайн

Що таке адаптивний дизайн

Адаптивний дизайн (Adaptive web design або AWD) - це дизайн, заснований на операціях з різними макетами сайту або його розміткою для забезпечення найкращого його використання на певних, заданих заздалегідь пристроях і дозволах екрану.

У разі адаптивного дизайну елементи сайту можуть ховатися, замінюватися іншими; можуть змінюватися поведінка і функції окремо взятих елементів веб-сайту.

В адаптивному дизайні повсюдно використовується JavaScript для управління поведінкою і функціями об'єктів на сайті.

Адаптивний дизайн вимагає роботи з об'єктною моделлю елементів на сторінці, має на увазі зміну їх ієрархії / вкладеності на різних пристроях.

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

Плутанина у визначеннях

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

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

особливості підходів

Кілька важливих аспектів, в плані яких чуйний і адаптивний дизайни кардинально відрізняються:

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

Складність розробки. Створення сайту з адаптивним дизайном вимагає від розробника вищого професійного рівня. Зокрема, ґрунтовного досвіду роботи з JavaScript.

SEO-аспект. З чуток, Google набагато більш лояльно ставиться до чуйним сайтам, ніж до адаптивним.

На практиці

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

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

https://itkeys.org/responsive-and-adaptive-design/
http://frontender.info/adaptive-vs-responsive-terminology/

Новости

Banwar.org
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.