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

  • (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/

Новости

Как сделать красивую снежинку из бумаги
Красивые бумажные снежинки станут хорошим украшением дома на Новый год. Они создадут в квартире атмосферу белоснежной, зимней сказки. Да и просто занимаясь вырезанием из бумаги снежинок разнообразной

Фольгированные шары с гелием
Для начала давайте разберемся и чего же выполнен фольгированный шар и почему он летает дольше?! Как вы помните, наши латексные шарики достаточно пористые, поэтому их приходится обрабатывать специальным

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

Пиротехника своими руками в домашних
Самые лучшие полезные самоделки рунета! Как сделать самому, мастер-классы, фото, чертежи, инструкции, книги, видео. Главная САМОДЕЛКИ Дизайнерские

Аниматоры на детские праздники в Зеленограде
Уж сколько раз твердили миру…Что готовиться ко дню рождения нужно заранее, а не бегать в предпраздничный день угорелой кошкой. Нельзя впихнуть в 24 часа дела, рассчитанные на недели. К празднику нужно

Как сделать из бумаги самолет
 1. Самолеты сделанный по первой и второй схеме являются самыми распространенными. Собирается такое оригами своими руками достаточно быстро, несмотря на это самолет летит достаточно далеко за счет свое

Надувные шарики с гелием с доставкой
На праздники часто бывают востребованы воздушные шарики, надутые гелием. Обычно, их покупают уже готовыми (надутыми) и привозят на праздник. Или, приглашают специалистов, которые приезжают и надувают

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

Суши доставка меню
В последние годы японская кухня стала очень популярной в нашей стране. И найти современного человека, который бы никогда не пробовал суши и роллы очень сложно. Но как правильно кушать суши палочками

Обеденные группы для маленькой кухни
Любой дом начинается с кухонной комнаты, а хороший дом - с уютной кухни. Уютной назвать кухню можно, если все в ней гармонично подобрано в соответствии с вашими вкусами и в едином стиле. Многие люди