Progressive Enhancement
Чи все-таки Graceful Degradation?
Не можна просто так взяти та розповісти про progressive enhancement, не згадавши про graceful degradation. У чому різниця між цими поняттями? Як уже говорилося в раніше статті, graceful degradation можна перекласти, як поступова деградація. Це дуже широке поняття, але в контексті Інтернету його можна розуміти як стійкість до відмов клієнтських веб-інтерфейсів, серверної частини сайтів і так далі. У цій статті graceful degradation буде розумітися як стійкість до відмови клієнтських веб-інтерфейсів.
Що таке progressive enhancement? Найчастіше цей термін перекладають як прогресивне поліпшення. Прогресивне покращення передбачає, що веб-інтерфейси повинні створюватися поетапно, циклічно, від простого до складного. На кожному з етапів повинен виходити закінчений веб-інтерфейс, який буде кращим, красивішим і зручнішим за попередній. Можна сказати, що зараз таких етапів чотири:
На другому етапі документ оформляється за допомогою старого доброго CSS і набуває більш акуратного вигляду: з'являється сітка сторінки, задаються параметри шрифту елементів, фонові зображення тощо.
На третьому етапі застосовуються нові можливості сімейства специфікацій CSS3, і документ доводиться до блиску: напівпрозорі плашки, круглі куточки, тіні. Також за допомогою CSS3 можна додати різні анімаційно-декоративні фішечки: поступове згасання або усунення елементів, підсвічування полів форм тощо.
Резюмуємо призначення описаних етапів:
Можна сказати, що веб-інтерфейс, створений сумлінно та якісно, відповідно до підходу graceful degradation, поводитиметься так само, як і веб-інтерфейс, побудований відповідно до progresive enhancement. Тобто progressive enhancement — ценіщо інше, як graceful degradation, доведений до досконалості. Все ж таки відзначимо ключові відмінності цих понять:
- Graceful degradation — ширше поняття, ніж progressive enhancement, обмежений лише веб-інтерфейсами. Progressive enhancement – це наше, рідне, вебове.
- Progressive enhancement задає вектор руху (починай із простого!), а для graceful degradation це не так важливо.
- Progressive enhancement наполягає на важливості змісту, а для graceful degradation воно на другому плані.
Загалом, progressive enhancement — це суворіша і послідовніша ідеологія розробки веб-інтерфейсів.
Чому з'явився Progressive Enhancement
Раніше говорилося, що якщо взяти і відповідно до graceful degradation максимально якісно зробити веб-інтерфейс, то вийде те саме, що і при застосуванні progressive enhancement. То навіщо ж було вигадувати цей акцій?
Відповідь проста: мало хто робив graceful degradation дуже якісно. Це засмучувало справді висококласних та відповідальних розробників. Адже сказати, що «я молодець і роблю graceful degradation» міг майже будь-який, але витрати сил і часу у різних розробників розрізнялися на порядки.
Коротше кажучи, така халтура з стійкістю до відмови набридла «правильним» розробникам, треба було щось робити. Прогресивне сприяння виникло як реакція на погане величезне деградація. Тепер дійсно хороші розробники та дизайнери можуть робити progressive enhancement, а погані не можуть, оскільки це складніше та трудомісткіше. Заодно новий підхід ввібрав у себе найкращі практики з graceful degradation.
Практичний приклад
На першому етапі створимо форму за допомогою чистого HTML. Так, формане така красива, зате функціональна. Отриманий код та результат зображені на малюнку:
На другому етапі за допомогою найпростішого CSS зробимо форму гарнішою: додамо фон, розміри, відступи. Тепер форма виглядає краще:
На третьому етапі використовуємо деякі нові CSS властивості, щоб надати формі блиск. Додамо закруглення за допомогою border-radius, тіні для елементів за допомогою box-shadow, використовуємо CSS-градієнти для оформлення кнопки і таке інше. Використовуємо деякі просунуті селектори, щоб позбутися зайвих відступів. Результат досить добрий:
На найпростішому прикладі ми показали, як працює підхід progressive enhancement. До речі, цей приклад можна «помацати наживо» в інтерактивній демонстрації на HTML Academy.
Логінем будемо за допомогою AJAX, значить з формою морочитися не треба, використовую div . Круглі куточки та тінюшки… Це проблема. Для полів введення використовую input без кордонів, а фоном задам картинку з рамкою та тінями. Кнопку зроблю за допомогою div, на тлі повішу картинку кнопки з градієнтом та тінями. Класно! І в старому IE буде гарно виглядати, і лише кілька картинок вирізати.
Progressive Enhancement та Responsive Design
Одночасно з'явився схожий підхід, який має назву mobile first. Українською його назву можна перекласти, як «спочатку для мобільних». По суті, це той самий адаптивний дизайн, але з обов'язковою вимогою: завжди розпочинати проектування адаптивного інтерфейсу з мобільної версії.
Співвідношення підходів responsive design і mobile first дуже схоже на співвідношення graceful degradation і progressive enhancement.Перший підхід у парі загальний, а другий підхід приватний і додає до першого додаткові вимоги: «починай із простого HTML», «починай проектувати з мобільної версії», «погладь кота».
Озвучені підходи добре поєднуються один з одним і добре один одного доповнюють. І незабаром усі топові виконавці заявлятимуть: «Ми робимо mobile first + progressive enhancement».
Навіщо ви це прочитали
Знаючи про цей підхід та розуміючи його роботу, ви можете ставити завдання виконавцю коректніше. Застосування progressive enhancement розробниками вашого сайту заощадить вам гроші і час.