Progressive enhancement oraz graceful degradation to dwa często spotykane obok siebie pojęcia. W języku polskim czasami są tłumaczone kolejno jako progresywne ulepszanie oraz wdzięczna degradacja. Jednak co to właściwie oznacza?
Progressive enhancement oraz graceful degradation to przeciwstawne sobie metody budowania stron internetowych, które są w pełni funkcjonalne dla każdego użytkownika.
Co to znaczy „metody budowania stron”? To, że metody odnoszą się do całego procesu tworzenia strony – mogą zostać zaadaptowane zarówno przez analityków, projektantów, jak i developerów.
Co to znaczy „dla każdego użytkownika”? Najczęściej terminy PE/GD są rozpatrywane w kontekście starszych/nowszych przeglądarek; czasami w kontekście rozdzielczości ekranu (responsywności strony).
Graceful degradation
Graceful degradation to proces tworzenia strony, podczas którego na początku jest ona przygotowana według możliwości nowszych przeglądarek. Następnie dostosowuje się ją (wdzięcznie degraduje) dla starszych wersji przeglądarek. W zależności od indywidualnych możliwości oraz ograniczeń przeglądarki, niektóre elementy strony zostają ukryte lub przekazane w innej formie, za pomocą mniej lub bardziej średniowiecznych rozwiązań, technologii. Dzięki temu strona na starszych przeglądarkach być może nie posiada tak wysokiego poziomu UX jak dla nowszych wersji. Najważniejsze jednak jest to, że jest nadal w pełni funkcjonalna dla użytkownika.
Wpadłam na ciekawy przykład GD: YouTube. YT stara się, aby filmiki były wyświetlane za pomocą HTML5. Jednak jeśli Twoja przeglądarka nie obsługuje nowych technologii, video jest odtwarzane za pomocą flasha. Jeśli nie masz flasha, widzisz informację „zainstaluj flasha lub zupdatuj przeglądarkę” tylko innymi słowami.
Spotkałam się też z inną definicją wdzięcznej degradacji, jako dostosowywaniu nieresponsywnej, budowanej tylko pod desktopy strony do wersji, która będzie czytelna oraz użyteczna na urządzeniach mobilnych. Zabiegi, jakie się stosuje dla wersji mobilnej, to m.in.: powiększanie przycisków, czcionek, dodawanie mobilnej nawigacji oraz ukrywanie części treści na stronie. Nic odkrywczego – same standardowe działania poprawiające przejrzystość oraz funkcjonalność strony.
Progressive enhancement
Progressive enhancement to myślenie przeciwstawne do degradacji, jak sama nazwa wskazuje – ulepszanie. Tworzysz stronę zapewniającą podstawowy poziom funkcjonalności, które są w stanie dostarczyć wszystkie przeglądarki. W kolejnym kroku rozbudowuje się stronę o nowe, dodatkowe funkcjonalności, które będą dostępne tylko dla nowszych przeglądarek.
Przykładem może być strona BBC News. Warto porównać stronę z włączonym oraz wyłączonym JS w przeglądarce. Obie wersje są w pełni funkcjonalne, posiadają takie same treści, lecz sposób ich przedstawienia diametralnie się różni.
Inna definicja mówi, że progresywne ulepszanie polega na rozpoczęciu projektowania strony w wersji dla urządzenia mobilnego. Następnie dodajesz nowe treści, zmieniasz układ strony dostosowując go do coraz szerszego docelowego ekranu.
Oczywiście ta metoda jest szeroko wskazana przy budowie współczesnych witryn. Wpływa na lepszą analizę początkową budowanego serwisu oraz szybszą, łatwiejszą developerkę.
Jak to wygląda w praktyce?
W kontekście wsparcia starszych przeglądarek… W pracy zawodowej, przed zastosowaniem poważniejszej technologii (np. service workers), która realnie ma wpływ na podstawową funkcjonalność serwisu, analizujemy jej wsparcie wśród wymaganych przeglądarek. To oczywiste. Jeśli wsparcia nie ma, szukamy innego rozwiązania. Brzmi jak PE. Jednak doświadczałam na własnej skórze wielu godzin łatania bugów na starszych przeglądarkach (głównie były to problemy ze stylowaniem lub drobnymi funkcjonalnościami). To już wygląda na GD.
W kontekście RWD… W pracy zawodowej nie projektuję stron, zazwyczaj dostaję gotowe makiety za zaprogramowania. Cóż, czasem makiet nie ma, czasem są, ale niekompletne. Ok, nigdy nie dostałam kompletnych makiet. Ciężko stwierdzić, czy korzystamy z jakiejkolwiek metodyki. Każdy element strony, jaki tworzymy, jest w wersji pierwotnej kierowany pod desktopa. Następnie myśląc o RWD dostosowujemy go do wersji mobilnej. Dopiero po całkowitym zakończeniu pracy nad konkretnym elementem przechodzimy do budowy kolejnego.
A jak to wygląda u Was? Czy Wy, programiści, korzystacie z jakiejkolwiek metodyki? Jeśli jesteś analitykiem, projektantem UX/UI – też daj znać, jak to wygląda u Ciebie!
Źródła i kopalnie dodatkowej wiedzy:
