Adaptive Web Design

Adaptacyjne projektowanie stron internetowych (ang. Adaptive web design (AWD)) – podejście do projektowania stron internetowych, które polega na dostosowywaniu wyglądu i funkcjonalności witryny w zależności od cech urządzenia, na którym jest wyświetlana. Celem AWD jest zapewnienie optymalnego doświadczenia użytkownika niezależnie od tego, czy korzysta z komputera, smartfona, tabletu czy innego rodzaju urządzenia.

AWD często jest mylone z projektowaniem RWD (responsywne projektowanie stron internetowych), a tak naprawdę jest jego alternatywą. AWD promuje tworzenie kilku wersji strony internetowej, a każda z tych wersji w zamyśle dostosowuje się do używanego obecnie urządzenia przez użytkownika. Najczęściej projektowana jest wersja mobilna (w opcji na telefony i tablety) i desktopowa (na komputery typu PC i laptopy). 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 responsywnym.

Projektowanie adaptacyjne było jedną z pierwszych strategii optymalizacji stron internetowych względem urządzeń mobilnych. Najczęściej wykorzystywano w tym celu całkowicie oddzielną witrynę internetową na urządzenia mobilne, a inną na komputery stacjonarne. Wersja mobilna witryny obsługiwana była w subdomenie (w większości przypadków wykorzystywano subdomenę trzeciego poziomu, oznaczoną jako „m”, dla przykładu http://m.wikipedia.org/). Coraz rzadziej można spotkać takie rozwiązania, jak dwie oddzielne statyczne witryny do wyświetlania na urządzeniach mobilnych i komputerach. Skrypty po stronie serwera są wykorzystywane do wyświetlania dynamicznie generowanych stron lub do dynamicznego decydowania, którą wersję strony statycznej wyświetlić. Większość stron internetowych stosuje techniki projektowania responsywnego lub adaptacyjnego. Warto jednak nadmienić, że użycie tych dwóch technik nie wyklucza się wzajemnie, a wręcz najlepsze praktyki dotyczące zaprojektowanej treści o najbardziej uniwersalnej czytelności wykorzystują kombinację tych dwóch technik, obsługując tym samym pełne spektrum sprzętu i oprogramowania.

Proces adaptacji oraz jej techniczna terminologia

Każdy projekt można określić jako projekt fixed width, a zadaniem programisty jest zbudowanie kilku wersji strony, które uzależnione są od szerokości okna przeglądarki lub innych parametrów, jak np. rodzaj wykorzystywanego urządzenia. Cały proces rozpoczyna się po stronie serwera który rozpoznaje te parametry i decyduje którą wersję strony przesyła klientowi. Strony mogą różnić się nie tylko HTML-em czy arkuszem stylów CSS, ale również jakością przesyłanych grafik. Właściwie nie ma ograniczeń co do wykorzystywanego typu układów do projektowania stron internetowych, a najpopularniejszy z nich – układ responsywny nie wymusza edytowania wielu stron podczas aktualizacji witryny. 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 typowe rozmiary i rozdzielczości ekranu. Jedyną różnicą jest sposób, w jaki projekt jest postrzegany z punktu widzenia zabezpieczenia lub urządzenia, a nie podejście do projektowania responsywnych witryn internetowych (RWD), które jest uniwersalne dla wszystkich. Termin AWD został po raz pierwszy użyty przez Aarona Gustafsona w jego książce Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement w maju 2011 r. Źródło tego pojęcia leży w metodyce budowania stron progressive enhancement (stopniowego ulepszania).

Projektowanie adaptacyjne opiera się na układzie “mobile separate” (ang. mobilny osobno), które w teorii jest taką samą koncepcją, co „mobile first” (ang. najpierw mobilne), który opiera się na dyskretnym JavaScript i stopniowym ulepszanie elastycznego projektowania witryn internetowych, z wyjątkiem tego, że układ AWD ma mieć oddzielny podstawowy układ mobilny w porównaniu z pojedynczym układem projektowania responsywnych witryn internetowych. Chociaż rynek smartfonów bardzo się rozwija, znaczna ilość użytkowników korzysta nadal z podstawowych telefonów komórkowych, których przeglądarki nie rozumieją JavaScript ani zapytań o media. W tym celu programiści tworzą podstawowy projekt mobilny i dokładają do niego dyskretny język JavaScript wraz ze stopniowymi ulepszeniami dla urządzeń. W ten sposób użytkownik korzystający z zaawansowanych urządzeń może cieszyć się pełną funkcjonalnością witryny, a tym samym strona nadal dobrze wygląda na starszych urządzeniach. Chociaż już od ponad dwóch dekad znane są dynamiczne praktyki internetowe, to dynamiczne projektowanie graficzne, w szczególności te dostosowane do urządzeń mobilnych to nadal prężnie rozwijająca się gałąź w sieci.

Definiując różnice pomiędzy RWD, a AWD istotnym jest także, aby zastosowane najnowsze technologie (przykładowo AJAX, HTML5 czy JavaScript) skupiały się wokół projektów responsywnych, które jest 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. “nieinteligentne” przeglądarki na urządzeniach mobilnych starszego typu). Zdecydowane przeniesienie się użytkowników sprzed monitora komputera stacjonarnego na rzecz urządzeń mobilnych sprawiało, że jedną z najważniejszych koncepcji podczas tworzenia strony internetowej jest projektowanie grafiki dostosowanej do urządzeń mobilnych i doprowadziło do powszechnego korzystania z RWD jednocześnie odchodząc od mało praktycznego AWD.

Dynamiczne dostosowanie strony do rozmiaru ekranu i urządzenia

Koncepcja AWD wykrywa rozmiar ekranu podczas żądania HTTP GET jeszcze przed serwowaniem strony i ładuje odpowiednio dobraną, wcześniej zaprojektowaną stronę dostosowaną do końcowego urządzenia. W standardowym układzie zazwyczaj projektowano witrynę przystosowaną do sześciu typowych szerokości ekranu: 320, 480, 760, 960, 1200 i 1600. Niegdyś była to nie tylko powszechnie znana praktyka w przypadku optymalizacji urządzeń mobilnych, ale także świetny sposób na okres przejściowy pomiędzy monitorami typu CRT o niskiej rozdzielczości 4:3, a wysokiej rozdzielczości 16:9 w monitorach typu LCD. Pierwsze smartfony pojawiły się na przełomie tysiąclecia, a urządzenia takie jak BlackBerry miały bardzo zróżnicowane wymiary ekranu, jednocześnie posiadając ubogie przeglądarki w których brakowało zaawansowanych funkcji oraz wtyczek, których powszechnie używanych do tworzenia bogatych środowisk w przeglądarkach na komputerach typu PC. Dodatkowo transmisja danych była bardzo droga i wolna, więc programiści byli zmuszeni do zaprojektowania skromniejszych stron mobilnych z niższej jakości i mniejszą ilością grafik oraz ostrym zawijaniem tekstu (aby był czytelny i przejrzysty). Nie zapominajmy również, że tamtych czasach strony głównie zarabiały na wyświetlanych reklamach, które również wymagały odpowiedniego skalowania. Na początku milenium znaczniki HTML bardzo ograniczały możliwości pozycjonowania sekcji na stronie, a poruszanie się po nich na urządzeniach mobilnych również nie należało do najłatwiejszych zadań. Zdarzało się, że programiści dla każdej wersji musieli pisać stronę właściwie całkowicie od podstaw.

iPhone i 3G

Kolejnym kamieniem milowym w adaptacyjnym projektowaniu stron internetowych było pojawienie się iPhona oraz powszechną dostępnością urządzeń do sieci 3G, która diametralnie zmieniła prędkość i przepustowość połączenia. Tym samym, najczęściej stosowanym systemem dynamicznym o dwóch projektach stał się układ mobilny (zwykle ze wspomnianym już wcześniej prefiksem subdomeny „m”) zoptymalizowany pod kątem urządzenia marki Apple i układu pulpitu. Celem skrócenia ładowania wersji mobilnej usuwano takie treści jak filmy, a obrazy zazwyczaj był zmniejszane i traciły na jakości. Rozpoczęła się tym samym era ekranów dotykowych, gdzie największym wyzwaniem było stworzenie klikalnych linków i przycisków za pomocą palców, a układ stron nabrał zdecydowanego “oddechu”.

Android i 4G LTE

Zyskujący na popularności system operacyjny międzynarodowego giganta Google, Android, wprowadził wachlarz nowych rozwiązań na rynku smartfonów, jednocześnie dostosowując je do wdrażanego w tamtym czasie mobilnego łącza szerokopasmowego 4G LTE. Tym samym, programiści zaczęli odchodzić od praktyk obniżania jakości mobilnych multimediów oraz przycinania treści na projektowanych stronach. Oczywiście zdarza się, że niektórzy nadal używają tej koncepcji, aby całkowicie oddzielić projektowanie treści na ekranie dotykowym od projektowania na urządzenia typu PC lub laptop, jednakże responsywne projektowanie witryn internetowych na tyle się rozwinęło, że dzięki stosowanym powszechnie rozwiązaniom jedna strona może być dostosowana na wszystkie rozdzielczości i stosowane środowiska. Niektórzy programiści tworząc wygląd pod konkretne środowiska (Android, iOS, komputer stacjonarny), starają się modyfikować ikony oraz używane kolory. Praktyka skutkuje znacznie prostszym projektem i “czystszym” kodem strony, jednakże aktualizacja wymaga edycji wszystkich 3 szablonów, co skutecznie zniechęca do tego typu działań. Istnieją różne wariacje na temat tej koncepcji, które łączą ze sobą walory zarówno AWD, jak i RWD (np. “widoki” Django).

Zalety i wady

Korzyści wynikające z adaptacyjnego projektowania stron internetowych

• Lepsze odczucia użytkownika (UX) na urządzeniach, dla których zaprojektowano stronę lub aplikację.
• Szybkość ładowania strony lub aplikacji.
• Gwarancja poprawnego wyświetlania i zachowania na dedykowanych urządzeniach.

Wady wynikające z wykorzystywania AWD względem RWD

• AWD wymaga więcej czasu i większego budżetu niż RWD.
• Strona stwarza większe prawdopodobieństwo problemów z SEO (treść strony się powtarza na różnych jej wersjach, przez co może być np. wykluczona z wyszukiwań).
• Mniejsza przejrzystość i proces utrzymania kodu, utrudnione wprowadzanie ewentualnych zmian
• Mało produktywny proces testowania aplikacji.
• Utrudnione tworzenie linków wewnętrznych dla każdej z wersji.

Przypisy

Kategoria:Webmastering