Graceful degradation vs. progressive enhancement

Co je to graceful degradation? A co znamená progressive enhancement? Proč bychom neměli tyto metody ignorovat? Čím se vyznačují a kdy kterou z nich použít? To se dozvíte v dnešním článku.

Tento článek je překladem anglického originálu vydaného na portálu Dev.Opera.

Úvod

V tomto článku probereme rozdíly mezi dvěma vývojářskými přístupy: graceful degradation a progressive enhancement. Abychom se měli od čeho odpíchnout, začneme definicemi:

Graceful degradation

(Lze přeložit jako pozvolné degradování.) Poskytnout alternativní verzi funkcionality nebo upozornit uživatele na možné problémy a zajistit tak použitelnost produktu v různých prostředích.

Progressive enhancement

(Lze přeložit jako postupné vylepšování.) Začít se základní funkcionalitou a poté krok po kroku zlepšovat uživatelský prožitek s tím, že před aplikací daného vylepšení nejprve otestujeme jeho podporu.

Asi si říkáte, že oba tyto postupy znějí velmi podobně a že by vám měly nabídnout přibližně ten samý výsledek. Jsou zde ale rozdíly, o kterých byste měli vědět a na které se podíváme níže.

Nejprve ovšem vysvětlíme, proč tyto technologie vůbec potřebujeme. Poté se podíváme na podrobnější definici a na příkladu si obě metody srovnáme a řekneme si, kdy kterou z nich použít. Nejprve si ale pojďme říci, proč jsou podobné speciální přístupy k webovému vývoji potřeba.

„Mobilis in mobile“ – pohybujeme se v měnícím se prostředí

Tak jako kapitán Nemo z „20 000 mil pod mořem“, i weboví vývojáři se nachází v neustále se měnícím a kolísavém prostředí, které může být velmi nepřátelské k tomu, čeho se snažíme dosáhnout.

Web byl vymyšlen a definován tak, aby byl použitelný na jakémkoli zařízení s displejem, v jakémkoli jazyce a kdekoli chcete. Jediná věc, která se od uživatelů očekává je, že budou používat nějaké zařízení, které se může připojit na web, a rozumí protokolům používaným k přenosu informací – http, https, ftp, atd.

To znamená, že nemůžeme očekávat jakékoli nastavení nebo schopnosti koncových uživatelů. Také si můžeme být celkem jisti, že naše zkušenost jako webových vývojářů je zcela odlišná od té, kterou mají lidé, které chceme oslovit.

Neexistuje žádný povinný upgrade technologie potřebné pro přístupu k obsahu internetu. Lidé a firmy se budou držet určitého prostředí a nezmění ho jen proto, že my chceme, aby to udělali. Řada lidí chce web pouze konzumovat a technologie v pozadí je vůbec nezajímají – očekávají pouze, že budou schopni se dostat k obsahu, který jsme jim slíbili. Je na vývojářích operačního systému a prohlížečů, aby přiměli koncové uživatele udržovat jejich programy aktuální – my jako weboví vývojáři k tomu nemůžeme říct vůbec nic.

Tohle všechno vytváří velmi křehké vývojářské prostředí. Například kanceláře, kde je předinstalován 9 let starý prohlížeč s vypnutými skripty a pluginy (z důvodu bezpečnosti), s malým rozlišením na monitorech a počítači, které sotva zvládají tu tunu běžícího kancelářského softwaru, jsou celkem běžné.

Mohli bychom teď mávnout rukou a prohlásit, že takovým společnostem ujel vlak“, a že podporovat zastaralé technologie nedává žádný smysl. Ale tento přístup může způsobit, že zapomeneme, že tito lidé mohou být velmi důležití pro úspěch našich produktů. V mnoha případech prostě jen nemají dostatečná oprávnění ke změně jejich technického vybavení. A když dojde na přístupnost, věci jsou ještě více zřejmé: dyslektický uživatel nemůže porozumět našim složitým instrukcím a slepý uživatel nemůže „kliknout na zelené tlačítko pro pokračování“, i když jsme prohlásili, že je to nutné k užívání našich systémů.

Pracujeme v neznámých vodách a potřebujeme najít způsob, jak se tím vypořádat. A tady přichází na scénu jak graceful degradation, tak progressive enhancement.

Degrade gracefully

Ilustrační obrázek. Převzato ze SocialSignal.

Graceful degradation a progressive enhancement v kostce

Jednoduchou definici jste již viděli výše. V této části vám poskytnu techničtější popis obou metod a podíváme se, co vlastně obnáší je používat.

Takže, graceful degradation je způsob vybudování funkcionality tak, že poskytnete určitou úroveň uživatelského prožitku v moderních prohlížečích, ale také ji necháme postupně degradovat na nižší úroveň uživatelského prožitku ve starších prohlížečích. Tato nižší úroveň není tak přívětivá pro návštěvníky vašich stránek, ale stále jim poskytuje základní funkcionalitu, když chtějí vaše stránky použít. Stránky se zkrátka nerozsypou.

Progressive enhancement je podobná metoda, ale jde na problém z druhé strany. Nejprve vytvoříte základní úroveň uživatelského prožitku, kterou budou schopny zobrazit všechny prohlížeče, a poté vytvoříte pokročilejší funkcionalitu, která bude automaticky dostupná pro prohlížeče, jenž ji umí použít.

ČTĚTE K TÉMATU: Musí naše webové stránky vypadat zcela stejně ve všech prohlížečích?

Jinými slovy, graceful degradation začíná od určité úrovně komplexity a snaží se předcházet chybám snižováním uživatelského prožitku, zatímco progressive enhancement začíná od naprosto základní funkčnosti a umožňuje konstantní vylepšování pro budoucí prostředí. Postupně degradovat tedy znamená dívat se zpátky, zatímco postupně vylepšovat znamená dívat se dopředu a přitom stát nohama na pevné zemi.

Graceful degradation vs. progressive enhancement – příklad

Pojďme se podívat na příklad ukazující oba přístupy v praxi.

Odkaz pro vytisknutí stránky

Můžeme se dohadovat o tom, že odkazy umožňující uživatelům vytisknout stránku jsou k ničemu – stisknutí ikony tiskárny v prohlížeči udělá to samé. Ale uživatelská testování ukazují, že jako poslední krok v rezervačním procesu (například na stránkách aerolinií) jsou dobré jako potvrzení o proběhlé akci. Uživatelé cítí, že mají věci ve svých rukou a získají dojem, že úspěšně dokončili to, co začali.

Problém s odkazem „vytiskni tuto stránku“ je, že nemáme možnost vyvolat tuto akci přímo pomocí tlačítka v HTML – musíme použít JavaScript. V JavaScriptu je to jednoduché – objekt window v prohlížeči má metodu print(), která při zavolání dá pokyn k tisku. Pravděpodobně nejběžnější způsob, jak to provést, je použít pseudo protokol  javascript:

<p id="printthis">
  <a href="javascript:window.print()">Vytiskni tuto stránku</a>
</p> 

Tohle samozřejmě funguje, pokud je JavaScript dostupný a povolený a prohlížeč podporuje příkaz print. Ale pokud JavaScript povolen není (například na některých mobilních zařízeních), odkaz fungovat nebude a klikáním na něj se nic nestane. To je problém, protože jako vývojáři webu jste vašemu návštěvníkovi tuto funkci slíbili. Pokud klikne návštěvník na odkaz a nic se nestane, bude se cítit zmatený, oklamaný a právem vás bude obviňovat ze špatného uživatelského prožitku.

Aby tento problém vyřešili, používají weboví vývojáři přístup graceful degradation: řekni uživateli, že odkaz nemusí fungovat a proč tomu tak je a možná dokonce navrhni náhradní řešení. Běžný trik spočívá v použití elementu noscript. Cokoli v tomto elementu bude zobrazeno, pokud cílový uživatel nemá povolen JavaScript. V našem případě by to mohlo vypadat třeba takto:

<p id="printthis">
  <a href="javascript:window.print()">Vytiskni tuto stránku</a>
</p>
<noscript>
  <p class="scriptwarning">
    Pro tisk stránky je třeba mít zapnutý JavaScript.
    Zapněte si JavaScript ve vašem prohlížeči.
  </p>
</noscript> 

Tomuto se běžně říká postupně degradovat – vysvětlíme uživateli, že něco je špatně, a jak to obejít. Bohužel ale předpokládáme, že uživatel vašich stránek:

  • ví, co je JavaScript
  • ví, jak jej povolit
  • má práva a možnost ho povolit
  • nevadí mu, že musí zapnout JavaScript jen kvůli tisku jednoho dokumentu

O něco lepší by možná byl následující přístup:

<p id="printthis">
  <a href="javascript:window.print()">Vytiskni tuto stránku</a>
</p>
<noscript>
  <p class="scriptwarning">
    Vytiskněte si kopii pro potvrzení.
    Zvolte ve vašem prohlížeči ikonu "Tisk",
    nebo vyberte položku "Tisk" z nabídky "Soubor".
  </p>
</noscript> 

Tak se zbavíme některých zmíněných problémů, ale předpokládáme, že funkce print je ve všech prohlížečích stejná. Plus stále zůstává tento fakt – problém s tímto přístupem je, že nabízíme určitou funkcionalitu s vědomím, že nemusí fungovat, a poté to musíme vysvětlovat. Technicky tlačítko „vytiskni“ nepotřebujeme, což je důvod, proč při použití progressive enhancement nepředpokládáme, že bude fungovat.

Pokud bychom měli tento problém vyřešit za použití progressive enhancement, první krok by byl zjistit, zda tu není možnost vytisknout stránku bez skriptování. Což není, a proto není odkaz ten správný HTML element, který bychom měli použít. Pokud chcete poskytnout funkci, která je dostupná pouze s JavaScriptem, měli byste použít button (tlačítko): dle definice button existuje proto, aby podporoval skriptovací funkcionalitu. Specifikace W3C k tomu říká:

stisknutelná tlačítka: stisknutelná tlačítka nemají žádné přednastavené chování. Každé takové tlačítko může být ovládáno skriptem na straně klienta. Pokud dojde k dané události (například uživatel stiskne tlačítko, pustí jej atd.), spustí se daný skript.

Druhý krok je nepředpokládat, že uživatel má zapnutý JavaScript a že prohlížeč umí tisknout. Místo toho prostě řekneme uživateli, že by si měl dokument vytisknout a způsob již necháme na něm:

<p id="printthis">Thank you for your order. Please print this page for your records.</p> 

Tohle funguje v každém případě. Pro zbytek funkcionality použijeme unobtrusive (nevtíravý) JavaScript, kterým přidáme tlačítko „tisk“, pokud jej uživatel podporuje.

<p id="printthis">Thank you for your order. Please print this page for your records.</p>
<script type="text/javascript">
(function(){
  if(document.getElementById){
    var pt = document.getElementById('printthis');
    if(pt && typeof window.print === 'function'){
      var but = document.createElement('input');
      but.setAttribute('type','button');
      but.setAttribute('value','Print this now');
      but.onclick = function(){
        window.print();
      };
      pt.appendChild(but);
    }
  }
})();
</script> 

Všimněte si, jak opatrný tento skript je – nepředpokládáme v něm vůbec nic.

  • celou funkcionalitu jsme zabalili do anonymní funkce a rovnou ji zavolali ( function(){})()) – nenechali jsme po sobě žádnou globální proměnnou
  • testujeme podporu DOM a zkoušíme získat element, do kterého chceme přidat tlačítko
  • poté otestujeme, zda element existuje a jestli má prohlížeč objekt window a metodu  print
  • pokud je obojí v pořádku, vytvoříme nové tlačítko a aplikujeme na něj window.print(), jako akci po kliknutí
  • v posledním kroku vložíme tlačítko do našeho odstavce

Toto bude fungovat pro každého uživatele na jakémkoli technickém zázemí. Nikdy jsme uživateli neslíbili element, který nefunguje – místo toho jej ukážeme pouze ve chvíli, kdy funguje.

Kdy co použít

Možná jsem idealista, ale opravdu nemám rád myšlenku graceful degradation. Vytvořením něčeho a poté zajištěním, že to bude aspoň trošku chodit v různých prostředích (a nebo chci-li, aby uživatel upgradoval), totiž předpokládám spoustu věcí o uživatelově prostředí či jeho možnosti upgradovat.

Osobně často používám Blackberry, když na notebooku nemohu chytit WiFi, a opravdu mě vytáčí, když mi webová stránka řekne, že potřebuje povolený JavaScript a měl bych si jej zapnout. Nemůžu a přesto rozhodně jsem právoplatný uživatel té webové stránky – zvláštně pokud platím spoustu peněz za GPRS nebo EDGE za přístup.

Každopádně graceful degradation přichází v úvahu v následujících pár situacích:

  • Vylepšujete starý produkt a nemáte čas, přístup nebo porozumění produktu pro to, abyste vše změnili.
  • Prostě nemáte čas dokončit produkt s plným progressive enhancement (často je to známka špatného plánování nebo toho, že dochází peníze).
  • Váš produkt je jeden z krajních případů, například stránka s ohromným trafficem, kdy každá milisekunda výkonu znamená rozdíl v milionech dolarů.
  • Váš produkt je svou povahou tak závislý na skriptování, že má mnohem větší význam udržovat „základní“ verzi, než nějakou vylepšovat (mapy, emailový klient, RSS čtečka).

Ve všech dalších případech, progressive enhancement je to, co udělá vás i vaše uživatele šťastnější:

  • V jakémkoli prostředí poskytnete produkt, který funguje.
  • Když vyjde nový prohlížeč nebo se rozšíření prohlížeče stane velmi rozšířeným, můžete vylepšit svůj produkt ještě o další úroveň bez toho, aniž byste se dotkli originálního řešení – graceful degradation by vás nutila ke změně originálního řešení.
  • Umožníte technologii, aby byla tím, čím být má – prostředek k rychlejšímu dosažení našeho cíle, ne „nutnost“ k dosažení cíle.
  • Pokud potřebujete přidat novou funkcionalitu, můžete to udělat poté, co zjistíte, zda jsou na určité úrovni podporované potřebné technologie, nebo tuto funkcionalitu můžete přidat do úplně základní kostry a vylepšit v sofistikova­nějších prostředích. V každém případě údržba probíhá na jednom místě a ne na dvou. Udržovat produkt, který používá progressive enhancement, aktuální, je mnohem méně práce, než udržovat dvě verze.

Shrnutí

Někdo možná řekne, že progressive enhancement i graceful degradation se snaží udělat tu samou věc: udržovat náš produkt použitelný pro každého uživatele. Progressive enhancement je sofistikovanější a zároveň stabilní cesta jistoty, ale zároveň zabere trošku více času a přidá práci. Graceful degradation můžeme použít mnohem jednodušeji jako rychlou opravu stávajících produktů; znamená to složitější údržbu, ale nevyžaduje to na začátku tolik práce.

Tento článek je překladem textu Graceful degradation versus progressive enhancement, jehož autorem je Christian Heilmann a je zde zveřejněn s laskavým svolením Opera Software.

Graceful degradation nebo progressive enhancement?

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 59

Přehled komentářů

mekele dik
Petr Staníček RE: Graceful degradation vs. progressive enhancement
martin graceful
Martin Hassman Re: graceful
Martin Hassman Re: graceful
Borek Bernard Re: graceful
pepak Re: graceful
Borek Bernard Re: graceful
Martin Hassman Re: graceful
Borek Bernard Re: graceful
Martin Hassman Re: graceful
Borek Bernard Re: graceful
Martin Hassman Re: graceful
Jan Molič RE: Graceful degradation vs. progressive enhancement
mekele RE: Graceful degradation vs. progressive enhancement
karmi RE: Graceful degradation vs. progressive enhancement
Ondřej Mirtes GD vs. PE
Hoween Re: GD vs. PE
Martin Hassman Technická poznámka
Hoween Re: Technická poznámka
Honza Re: Technická poznámka
Jan Jelínek Re: Technická poznámka
Hoween Re: Technická poznámka
Brbla Re: Technická poznámka
Ondřej Mirtes Re: GD vs. PE
Hoween Re: GD vs. PE
Hoween Absence definice
Langi Re: Absence definice
Hoween Re: Absence definice
Anonymní Redakčně smazáno
Karell Re: Absence definice
Hoween Re: Absence definice
Karell Re: Absence definice
Hoween Re: Absence definice
Karell Re: Absence definice
Martin Hassman Re: Absence definice
Hoween Re: Absence definice
Martin Hassman Re: Absence definice
Karell Re: Absence definice
Martin Hassman Re: Absence definice
Chamurappi Re: Absence definice
Hoween Re: Absence definice
Hoween Re: Absence definice
Karell Re: Absence definice
Martin Hassman Re: Absence definice
Karell Re: Absence definice
Hoween Re: Absence definice
Karell Re: Absence definice
Hoween Re: Absence definice
Brbla Re: Absence definice
N Re: Absence definice
Anonymní Redakčně smazáno
karf Tisk přes odkaz
wind0z3_sux Redakčně smazáno
MicMic RE: Graceful degradation vs. progressive enhancement
Roman Problém v příkladu
hotovson jaka je souvislost?
bauglir Kdy se toto rozdělení vyplatí
Taurus terminologie
Zdroj: https://www.zdrojak.cz/?p=2955