У цій статті ми спробуємо розібратися, в чому ж різниця між двома принципами створення сторінки на основі «чуйного» веб-дизайну: Progressive Enhancement і Graceful Degradation.
Graceful degradation
Graceful degradation, або «відмовостійкість» - це більш широке поняття, яке застосовується, не тільки в веб-дизайні. У загальному сенсі передбачає здатність системи працювати навіть в разі відмови деяких її компонентів. І чим серйозніше відмова призводить до погіршення якості роботи системи або роботи з системою, але при цьому основний функціонал системи залишається робочим.
Часто для проходження цим принципом доводиться переробляти логіку серверної обробки форм. Однак, такий підхід буде окупатися, якщо задуматися про відмовостійкості ще на етапі планування форми.
Дотримання принципу graceful degradation дозволяє користувачам (а кожен користувач - це потенційний клієнт) мати можливість роботи з сайтом в будь-яких ситуаціях.
Progressive Enhancement
Прогресивне поліпшення є принцип, який укупі з «mobile first» створює теоретичну основу для «чуйного» (адаптивного) веб-дизайну. Уже його назва говорить, що він позиціонує створення веб-сторінки поетапно, циклічно, за принципом «від простого - до складного». На кожному з заздалегідь намічених етапів зовнішній вигляд сторінки повинен ставати красивіше, краще і зручніше, проте весь функціонал повинен бути доступний спочатку.
Є більш окремим випадком graceful degradation, так як всі побудовані на ньому веб-сторінки будуть повністю відповідати принципу graceful degradation.
Зазвичай створення сторінки за принципом прогресивного поліпшення складається з наступних етапів:
Спробуємо застосувати цей підхід на практиці. Розробимо і оформимо найпростішу форму входу на сайт. На першому етапі створимо форму логіна на чистому HTML. Форма не так красива, але вона повністю функціональна. Нижче наведено код сторінки і результат відображення в браузері:
Тепер на другому етапі додамо формі стиль застосувавши до неї таблицю стилів, що містить тільки ті правила, які застосовуються до CSS без спеціальних властивостей. Додамо колір фону, відступи, вирівнювання. Тепер форма виглядає краще:
Тепер додамо правила з специфікації CSS3. Додамо закргленія до блокам, тіні для полів введення тексту, стилізуємо кнопку, за допомогою нових селектор приберемо непотрібний відступ зверху. Отримаємо поліпшену форму:
На останньому етапі можемо створити AJAX-запит, щоб користувач міг зайти на сайт без необхідності перезавантажувати сторінку.
При цьому на кожному конкретному етапі (за підтримки його браузером) буде відображатися повністю функціональна сторінка. Але якщо браузер підтримує більш досконалі технології, то сторінка стає тільки краще.
Яким принципом слідувати?
Якщо сайт максимально ефективно вибудувати за концепцією graceful degradation, то вийде приблизно те ж саме, що і було б при використанні progressive enhancement. Так в чому ж тоді різниця?
Тому progressive enhancement виник у відповідь на неякісний graceful degradation. Проектувати такі інтерфейси стало простіше і якісніше, тому що є чітко сформульовані етапи створення інтерфейсу.
В адаптивному дизайні є поняття «mobile first», яке в чомусь відповідає поняттю progressive enhancement, так як закликає діяти від простого до складного, від мобільних екранів до настільних ПК. Саме тому ключ до правильного застосування адаптивного веб-дизайну залежить від уміння розробника застосовувати принципи progressive enhancement і mobile first.