A Graceful Degradation és a Progressive Enhancement két tervezési módszertan, melyekkel a különböző képességű böngészőkön való megjelenítést kezelhetjük le.

A két módszertan nagyon hasonlít egymásra. Mindkettő lényege, hogy hogyan kezeljük le az oldalunk, alkalmazásunk egyes moduljait úgy, hogy a lehető legtöbb eszközön használható és elérhető legyen.

Graceful Degradation

A Graceful Degradation módszertanának a lényege, hogy a kódolás során új funkciókat használunk, viszont figyelünk arra is, hogy a kevésbé új eszközöknek – valamint egyéb eszközöknek, mint a képernyő felolvasók – biztosítsunk használható megoldást, megvalósítást.

A biztosított megoldásnak nem kell olyan tulajdonságokkal, funkciókkal bírnia, mint egy újonnan bevezetett funkciónak, azonban használhatónak kell lennie a kevésbé modern eszközökön is.

Ezt a szemléletet böngészők HTML feldolgozásával lehet talán a legegyszerűbben szemléltetni. Az új color tulajdonságú input mező segítségével színválasztót készíthetünk egy input mezőnkből, ami az operációs rendszer natív color picker-jét veszi alapul. Mindez csupán az újabb böngészőkben működik (nem is beszélve az Edge-ről), viszont használható marad a korábbi eszközökön is, mert a nem támogatott böngészők ezt a mezőt text mezőként értelmezik. A régebbi eszközökön kapunk egy mezőt, ahova értéket tudunk bevinni (tetszőleges szín megadási formában: HEX, RGB), azonban color pickert nem használhatunk.

Ki kell emelni, hogy ez a szemlélet nem egyezik egy specifikus böngészőre tervezés szemléletével. Igaz, hogy végeredményben úgy festhet, hogy a végterméket teljes valójában, csak az tudja használni, aki modern böngészővel rendelkezik, ki kell emelni, hogy funkcionálisan a terméknek működőképesnek kellene lennie a korábbi böngészőkben is, igaz vizuálisan, használhatóságot tekintve lehet eltérés.

Progressive Enhancement

A Progressive Enhancement módszer lényegében a Graceful Degradation fordítottja! Ahelyett, hogy az új funkciókat felhasználva – amiket nem támogatnak a korábbi böngészők – fejlesztenénk a projektünket, a tervezés során alulról, a sima HTML megjelenésből indulunk ki és ezt teszteljük az általunk támogatni kívánt korábbi és egyéb (felolvasó) eszközökön.

Például, ha egy tab-os megjelenítési megoldást szeretnénk kialakítani, akkor a tab váltáshoz szükségünk lenne JavaScript-re, ami a láthatósági állapotokat állítja be. Ebben az esetben elsőként el kell készítenünk a HTML sablont (CSS-el formázva úgy, hogy ne rejtsünk el semmit), majd ezután JS segítségével be kell állítanunk a megfelelő állapotokat, osztályokat, amik aztán elrejtik az éppen nem látható blokkokat. Ezzel a megoldással minden tartalom elérhető lesz olyan eszközökön is, ahol nincs JS, ahol van ott pedig teljes funkcionalitást kapunk.

Tehát, ott ahol lehetséges igyekszünk javítani a felhasználói élményen!

Összességében

Összességében a lényeges különbség a két módszertan között az, hogy a Graceful Degradation a modern böngészőket veszi alapul (tehát fentről lefelé épít), míg a Progressive Enhancement a legrégebbi általunk támogatott verziót (tehát lentről felfelé épít), valamint az egyéb eszközöket, mint a képernyő felolvasók. Mind a kettő hasznos szemlélet, azonban arról, hogy melyik a használhatóbb, megoszlanak a vélemények. Általában igaz, hogy a választást az éppen aktuális projekt határozza meg!

További információk

Elmélet, Front-end,