Czy adaptacyjne projektowanie stron internetowych (AWD) ma jakąś przyszłość (i teraźniejszość)?

AWD – Adaptacyjne projektowanie stron internetowych często jest mylone z projektowaniem responsywnym, a nim tak do końca nie jest. Jest pewnego rodzaju alternatywą, a oba typy projektów siebie nie wykluczają. No i na tym moglibyśmy zakończyć ten artykuł, pozostawiając tytułowe pytanie bez odpowiedzi.

Od samego początku swojego istnienia, AWD promowało tworzenie kilku wersji witryny internetowej, a każda z nich może być zróżnicowana ze względu na używaną rozdzielczość, środowisko urządzenia lub np. rodzaj przeglądarki. Adaptive Web Design jest dobrym rozwiązaniem przy bardzo rozbudowanych witrynach, gdy nie możemy pozwolić sobie na ograniczenia w funkcjonalności strony, tak jak może mieć to miejsce przy projektowaniu stron w zamyśle RWD.

Wraz z pojawieniem się smartfonów, użytkownicy Internetu stopniowo przenosili się na urządzenia mobilne. Telefon przestał służyć jedynie do rozmów telefonicznych – teraz internet był zawsze pod ręką, jeśli tylko znajdowaliśmy się w zasięgu sieci. To właśnie projektowanie adaptacyjne to jedna z pierwszych strategii, którą zastosowano w celu dostosowania witryn internetowych do mniejszych urządzeń.
Pierwszą i najpopularniejszą z praktyk było utworzenie oddzielnej witryny internetowej na urządzenia mobilne, a odrębną na komputery stacjonarne. Zwyczajowo wersja mobilna strony znajdowała się w subdomenie trzeciego poziomu, oznaczoną zazwyczaj literą “m”. Przykładowo Facebook nadal posiada taką wersję mobilną: https://m.facebook.com/ na starsze urządzenia.

Jednakże Facebook w tej praktyce jest już raczej odosobniony, coraz rzadziej spotykamy tego typu rozwiązania, jak dwie odrębne, statyczne witryny które służą do wyświetlania ich na różnych urządzeniach.

Tutaj bohaterem pierwszego planu jest serwer który wykrywa rodzaj urządzenia, a znajdujące się na nim odpowiednie skrypty są wykorzystywane do wyświetlania dynamicznie generowanych stron lub do natychmiastowego decydowania, którą wersję strony statycznej wyświetlić.
W obecnych czasach dostosowanie strony do wyświetlania na różnych urządzeniach jest absolutnym must have, a wielu programistów uważa, że użycie zarówno projektowania responsywnego i adaptacyjnego się nie wyklucza, a wręcz jest najkorzystniejszą z praktyk “kłaniającej” się w stronę końcowego użytkownika, pozwalając na obsługę pełnego spektrum urządzeń i oprogramowania.

W projektowaniu AWD każdy projekt można określić jako layout fixed width, a zadaniem programistów jest zbudowanie różnych wersji strony dostosowanych do różnych szerokości okna przeglądarki lub innych parametrów, takich jak przykładowo rodzaj wykorzystywanego środowiska. Jak już wcześniej wspomnieliśmy, cały proces rozpoczyna się już po stronie serwera, który odpowiedzialny jest za rozpoznanie tych parametrów i przy pomocy skryptów przesłanie na urządzenie końcowe odpowiedniej wersji strony statecznej. Takie witryny mogą różnić się nie tylko kodem czy arkuszem stylów CSS, ale co ważne, również jakością przesyłanych grafik.

Typów układów wykorzystywanych do projektowania witryn internetowych jest wiele, a najpopularniejszy z nich – układ responsywny wypada tu najkorzystniej. Dlaczego? Odpowiedź jest prosta: nie wymusza edytowania wielu stron podczas aktualizacji witryny, dlatego udoskonalając naszą stronę nie tylko zyskujemy czas, ale i zachowujemy pieniądze. W efekcie, stosując projekt RWD mamy pełną kontrolę nad adaptacyjnym projektowaniem witryn internetowych, a projekt adaptacyjny będzie obsługiwał różne wersje witryny (lub strony) na różnych urządzeniach w oparciu o najczęściej stosowane rozmiary i rozdzielczości ekranu.

Skąd się wziął termin AWD? Za autora tego nazewnictwa uważa się Aarona Gustafsona, który użył takiej terminologii w swojej książce Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement w maju 2011 r. Niezaprzeczalnie, źródło tego pojęcia leży w metodyce budowania stron PE, czyli progressive enhancement (stopniowego ulepszania).

Jakiś czas temu wspominaliśmy już o mobile first, a projektowanie adaptacyjne opiera się na bliźniaczym rozwiązaniu: mobile separate (tłum. mobilny osobno).
Rozwiązanie to opiera się na dyskretnym JavaScript i stopniowym ulepszaniu elastycznego projektowania witryn internetowych, z takim wyjątkiem, że układ AWD ma mieć oddzielny podstawowy układ mobilny w porównaniu z pojedynczym układem projektowania responsywnych witryn internetowych.

Mimo iż rynek smartfonów w ostatnich latach przeszedł spektakularną ewolucję, to pokaźna ilość użytkowników nadal korzysta z podstawowych telefonów komórkowych, których przeglądarki nie obsługują środowiska typu JavaScript ani zapytań o media. Rozwiązaniem na taką sytuację jest stworzenie podstawowego projektu mobilnego i dokładanie do niego dyskretny języka JavaScript wraz ze stopniowymi ulepszeniami dla urządzeń, które już je obsługują. W ten sposób strona jest atrakcyjna i funkcjonalna zarówno dla użytkownika korzystającego z zaawansowanych urządzeń, jak starszych modeli.

Chociaż w zeszłym roku wielu użytkowników powróciło przed monitory komputerów, co pokazują statystyki, ponieważ liczba użytkowników mobilnych spadła względem roku 2019, to nadal ponad 50% społeczeństwa korzysta z Internetu na smartfonach. Tym samym. projektowanie adaptacyjne pozwala na świetne dostosowanie witryny do innych urządzeń aniżeli stacjonarny monitor. Mimo, iż dynamiczne praktyki internetowe towarzyszą nam już od ponad dwóch dekad, to rozwój dynamicznego projektowania graficznego dostosowanego do urządzeń mobilnych właśnie w tych czasach odnotowuje najwyższy wzrost.

Próbując zdefiniować różnicę między RWD, a AWD warto zwrócić uwagę na zastosowane najnowsze technologie (przykładowo AJAX, HTML5 czy JavaScript) aby skupiały się wokół projektów responsywnych, które są zazwyczaj bardziej wydajne i efektywne niż adaptacyjne. W praktyce AWD stosowane jest jako uzupełnienie projektu responsywnego, gdzie technologie RWD nie mają możliwości być poprawnie zinterpretowane przez przeglądarkę (np. mniej inteligentne przeglądarki na urządzeniach mobilnych starszego typu).

Jak już wspomnieliśmy, ponad połowa użytkowników Internetu przegląda go na smartfonach, co w efekcie sprawiło, że podczas tworzenia stron internetowych, najważniejszą koncepcją jest zaprojektowanie grafiki dostosowanej do urządzeń mobilnych. Tym samym era projektowania responsywnego coraz skuteczniej zaczęła zastępować mało praktyczne projektowanie adaptacyjne.

Koncepcja projektowania AWD jest prosta: ma za zadanie wykrywać rozmiar ekranu już podczas żądania HTTP GET, jeszcze przed wyświetleniem wcześniej zaprojektowanej strony dostosowanej do tego urządzenia i jego parametrów. Wszystko dzieje się poza urządzeniem użytkownika i jest na tyle dynamiczne, że proces jest praktycznie niezauważalny.

W standardowym układzie przyjęło się, że programiści projektują stronę przystosowaną do sześciu najpopularniejszych szerokości ekranu: 320, 480, 760, 960, 1200 i 1600. Jak się z czasem okazało, nie była to tylko taktyka poprawnego wyświetlania projektu na urządzeniach mobilnych, ale także usprawniło płynne przejście z monitorów typu CRT (niska rozdzielczość 4:3), do monitorów ciekłokrystalicznych typu LCD (wysoka, nadal często stosowana rozdzielczość 16:9).

Na początku 2000 roku rozpoczęłą się prężna ekspancja smartfonów, a swój rozkwit przeżywała w kraju za oceanem marka BlackBerry, której urządzenia miały bardzo zróżnicowane wymiary ekranu. Warto przypomnieć także, że był wyposażone w ubogie przeglądarki w których próżno szukać zaawansowanych funkcji oraz wtyczek, których już wtedy powszechnie używanych do tworzenia bogatych środowisk w przeglądarkach dostosowanych do komputerów stacjonarnych.

Być może niewiele osób jeszcze pamięta, ale transmisja danych była bardzo droga i wolna, więc programiści byli zmuszeni do zaprojektowania okrojonych stron mobilnych z czytelniejszymi treściami i mniejszą ilością grafik. Warto też mieć na uwadze, że grafiki wykorzystywane w wersji mobilnej były zdecydowanie niższej jakości. Warto przypomnieć również, że początek milenium to zarobki stron na wyświetlanych reklamach, które również potrzebowały korzystnego skalowania.
Dwie dekady temu znaczniki HTML bardzo ograniczały możliwości dowolnego rozmieszczenia sekcji na stronie, a poruszanie się po stronie na urządzeniach mobilnych również nie należało do najłatwiejszych zadań. (Obecnie jest to dużo prostsze przez zastąpienie ekranów oporowych pojemnościowymi).

Pamiętamy jeszcze te czasy, gdy programiści dla każdej wersji musieli pisać stronę właściwie całkowicie od podstaw, tak aby w pełni je dostosować do stosowanego urządzenia.

Bardzo istotnym kamieniem milowym dla AWD było pojawienie się iPhona oraz wprowadzenie powszechnej dostępności do sieci 3G, która całkowicie zrewolucjonizowała korzystanie z Internetu na urządzeniach mobilnych. Prędkość, przepustowość, a nawet koszta transmisji danych stały się akceptowalne dla końcowego użytkownika, a minuta spędzona na serfowaniu po necie nie powalała na kolana. Pamiętacie jeszcze te czasy, gdy przypadkiem na telefonie dotknęło się klawisza z “globem”, po czym gorączkowo starało się cofnąć na telefonie polecenie, aby nie zostały naliczone dodatkowe opłaty?

Wprowadzenie sieci 3G zachęciło twórców witryn do stosowania systemu dynamicznego składającego się z dwóch projektów, stacjonarnego oraz układu mobilnego (zwykle ze wspomnianym już wcześniej prefiksem subdomeny „m” ) zoptymalizowany pod kątem iPhona,. Wkrótce po tym rozpoczęło się istne zatrzęsienie na rynku mobilnym, a świat został “zalany” urządzeniami z ekranami dotykowymi. Od teraz największym wyzwaniem dla programistów było stworzenie klikalnych linków i przycisków za pomocą palców, a układ stron nabrał zdecydowanego “oddechu”, tak aby korzystanie ze strony na opornościowym ekranie było po prostu przyjemne.

iPhone bardzo szybko zyskał na rynku poważnego konkurenta: Google wprowadziło środowisko Android, które mogą do dziś stosować różne marki telefonów (środowisko iOS jest zamknięte i korzystają z niego urządzenia Apple). Wspomniany system wprowadził niewyobrażalną ilość nowych rozwiązań na rynku smartfonów, jednocześnie mocno dostosowując je do wdrażanego w tamtym czasie mobilnego łącza szerokopasmowego 4G LTE.

To bardzo ważny kamień milowy dla projektowania witryn Internetowych. Deweloperzy przestali obniżać jakość wersji mobilnych oraz okrajania treści na projektowanych stronach. Oczywiście zdarza się, że niektóre strony nadal używają tej koncepcji, aby całkowicie odseparować projektowanie treści na ekranie dotykowym od projektu wykorzystywanego na urządzeniach typu PC.
Dzięki stosowanym powszechnie rozwiązaniom jedna strona może być dostosowana na wszystkie rozdzielczości i stosowane środowiska – w ten sposób wkraczamy w erę powszechnie stosowanego projektowania RWD, odchodząc tym samym od samodzielnie istniejącego AWD. Zdarza się, że deweloperzy rozdzielają projekty graficzne pod konkretne środowiska (Android, iOS, komputer stacjonarny), starając się modyfikować ikony oraz zastosowane w projekcie kolory. W praktyce przy projektowaniu strony stosuje się coraz “czystszy” kod strony, a projekt jest bardzo prosty. Istnieje jednak jedna istotna wada przy takim rozwiązaniu, a mianowicie pojawia się ona podczas konieczności aktualizacji strony: wymaga to od programisty edycji wszystkich 3 szablonów, co w naszym odczuciu skutecznie zniechęca do stosowania takich praktyk. Warto wspomnieć, że istnieją różne wariacje na temat tej koncepcji, które mogą połączyć ze sobą walory zarówno projektowania adaptacyjnego, jak i responsywnego (tutaj warto przywołać np. “widoki” Django).

Niektórzy nie wiedzieli nawet, że są to różne podejścia do projektowania. W ostatnich latach granica pomiędzy tymi koncepcjami niemalże się zatarła.
Inni zaś zauważyli, że powszechnie uznano, że to, co nazywamy projektowaniem responsywnym, wykorzystuje zdecydowanie mniej (zazwyczaj jeden) układów stron niż standardowy projekt adaptacyjny.

Wspomnieliśmy już, że projektowanie responsywne przeżywa obecnie swoje złote czasy, a to dlatego, że jest zdecydowanie bardziej wydajnym rozwiązaniem, mając na uwadze fakt, iż producenci smartfonów wprowadzają coraz to nowsze, konkurencyjne rozwiązania. Deweloperom coraz trudniej przewidzieć z jakimi wymaganiami systemowymi spotka się strona podczas jej eksplorowania. .
Jeszcze dwadzieścia lat temu rynek smartfonów nie był tak obfity w rozwiązania, urządzenia był powtarzalne – dlatego programiści mogli bez problemu ogarnąć pełne spektrum urządzeń w koncepcji AWD, dostosowując wielkość czcionki, jakość i ilość obrazów lub filmów.
Powróćmy jeszcze na chwilkę do ery iPhona, która sprawiła, że witryny mobilne trafiły do urządzeń z ekranami dotykowymi, a deweloperzy i graficy już wtedy zauważyli, że elastyczny projekt responsywny jest dużo korzystniejszy niż stała siatka projektu adaptacyjnego. Do procesu tworzenia strony coraz częściej wykorzystuje się specjalistów UX/UI designerów, którzy dbają o dobre wrażenie z korzystania portal przez użytkownika końcowego.

Zacznijmy może od wad, których względem koncepcji RWD jest więcej. Przede wszystkim AWD jest bardziej czasochłonne i kosztowne aniżeli projektowanie responsywne. Strona nie jest dostosowana pod wymagania SEO, ze względu na powtarzalność treści na różnych jej wersjach. To, co utrudnia pracę programistów to proces utrzymania czystości kodu i brak możliwości wprowadzania zmian jednocześnie na różnych wersjach. Testerzy aplikacji również mają często podwójną, a nawet potrójną robotę, a linki wewnętrzne to zmora na każdym etapie pracy nad stroną.
Jednak AWD da się też lubić. Za co? Wrażenia użytkownika są dużo lepsze, jeśli korzysta z urządzenia dla którego dostosowano aplikację. To co warto mieć też na uwadze, to szybkość działania strony – nie jest ona obciążona różnymi wersjami czy opcjami. Z zalet warto też zauważyć, że projektując w myśl koncepcji AWD mamy gwarancję poprawnego zachowania się witryny na dedykowanych urządzeniach.

Na pewno z tego rozwiązania powinny korzystać większe witryny, dla których budżety nie mogą ograniczać funkcjonalności, a pozytywne wrażenia użytkownika to priorytet. Dopóki z wersji mobilnych korzystają tacy giganci jak Facebook czy Wikipedia nie ma szans o mówieniu “końca ery AWD”. Tak jak wspomnieliśmy, nie wyklucza się do to jednak z “wielkim bum” na projektowanie responsywne.
Jakie według nas rozwiązanie jest najkorzystniejsze? Nie da się jednoznacznie odpowiedzieć na to pytanie. Wszystko zależy od założeń projektowych i wspomnianego wcześniej budżetu przeznaczonego na te cele.
Jeśli posiadacie stronę, która świetnie wygląda w wersji desktopowej i nie chcecie ingerować w jej wygląd, warto zrobienie odrębnej wersji mobilnej, czyli zaprojektować ją w myśl koncepcji AWD.

Przy dużym budżecie i projektowaniu aplikacji od zera, która będzie w pełni zoptymalizowana, to również rozsądnych wydaje się koncepcja designu adaptacyjnego.W innych przypadkach, w szczególności przy prostych stronach firmowych postawilibyśmy na ekonomiczniejsze, ale równie efektywne rozwiązanie projektu responsywnego. Wielu deweloperów preferuje zastosowanie obu tych technik, aby nie ograniczać się w żaden sposób.