Responsive Design vs. Adaptive Design?

Responsywne to responsywne tamto… cały czas słyszymy to słowo, które właściwie stało się hasłem wywoławczym współczesnego web design’u, a mnie osobiście powoli zaczyna irytować. Z czym mam problem? Otóż większość stron nazywanych responsywnymi wcale nimi nie jest… Zacznijmy od początku…

Czym jest ta responsywność?

W dużym skrócie – jest to tworzenie stron internetowych opartych o płynne układy elementów konstrukcyjnych.

W kwestii definicji RWD najczęściej odwołuje się do artykułu Responsive Web Design napisanego przez Ethan’a Marcotte na łamach alistapart.com w 2010 roku. Tam znajdziemy informacje, które współcześnie legły u podstaw ideii responsywnych stron internetowych, ale pamiętać trzeba, że samo pojęcie jest o kilka lat starsze.

Można powiedzieć, że:

RWD = fluid layout + mediaqueries

Dodać warto, że pod określeniem 'fluid layout’ powinno się rozumieć stosowanie nie tylko procentowego grida, ale również relatywne jednostki wielkości czionek, elastyczne zdjęcia i filmy.

Proste prawda?

Adaptive design

Czym jest więc adaptive design? Właściwie to tym co w większości nazywa się (nieprawidłowo) responsywnym 'dezajnem’. Problem polega na tym, że te dwa pojęcia dość mocno pomieszano co sprawiło, iż większość osób stosujących adaptywne podejście uważa, że tworzy strony responsywne.

Autorem pojęcia adaptywnego projektowania jest Aaron Gustafson, który w książce Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement wyłożył podstawy projektowania adaptywnego. Co ciekawe (podobno) idea zakorzeniona była w pojęciu stopniowego ulepszania i miała służyć realizacji takiego właśnie podejscia do tworzenia stron internetowych.

Różnice i konsekwencje

To na czym polegają najbardziej realne róznice między responsywnym a adaptywnym projektowaniem stron? Otóż w przypadku podejścia adaptywnego tworzymy tak na prawdę kilka layoutów i stosując mediaqueries zmieniamy wielkości elementów oraz układ strony gdy okno przeglądarki osiągnie określony breakpoint (punkt łamnia w wolnym tłumaczeniu). Można też oczywiście stosować  @media screen  lub JavaScript do wykrywania urządzeń moblinych albo łączyć te wszystkie techniki w celu najbardziej optymalnego 'pokrycia’ różnych przypadków. Jednak sednem sprawy jest to, że tak na prawdę tworzymy kilka 'layoutów’ używając CSS do manipulacji elementami HTML.

Responsywne projektowanie stron zakłada, że konstrukcja strony i wszystkich jej elementów jest płynna, więc nie tworzy się kilku 'layoutów’, ale jeden, który elastycznie dostosowuje się do dostępnej przestrzeni. Nadal stosuje się reguły @media , ale mają one subsydiarny charakter i nie służą do tego by na nowo definiować kolejne 'wersje’ strony. Właściwie można powiedzieć, że podstawowym założeniem jest napisanie takiego arkusza stylów by w regułach  @media  znalazło się jak najmniej deklaracji.

Mówiąc krótko – responsywna strona to strona oparta o fluid layout, a strona adaptywana to zbiór layoutów fixed width.

Konsekwencją stosowania podejścia adaptywnego jest konieczność tworzenia kilku 'wersji’ strony i dość oczywisty problem, że nigdy do końca nie pokryje się zakresu wszystkich możliwych rozdzielczości. Konsekwencją stosowania podejścia responsywnego jest to, że trochę traci się kontrolę nad wyglądem i układem strony i trzeba pogodzić się z tym, że projekt będzie musiał poddać się zasadzie elastyczności.

Skąd ten ambaras?

Teraz kiedy już wiemy, że strony nazywane responsywnymi są często tak na prawdę stronami adaptywnymi warto wyjaśnić skąd się wziął ten ambaras pojęciowy. Niestety nie mam dobrego wyjaśnienia. Może to po prostu pomyłka? Może w drodze uproszenia wrzucono je do jednego worka, a akurat słowo 'responsywny’ stało się bardzie popularne? Szczerze nie wiem.

Natomiast możemy sobie pospekulować dlaczego to podejście adaptywne (a.k.a. 'responsywne’) stało się bardziej popularne. Branża tworzenia stron internetowych, nazwijmy ją umownie web design’em, jest w dużej mierze zdominowana przez uwagę na projektowanie graficzne. Jest to do tego stopnia zauważalne, że właściwie projektowanie graficzne utożsamiane jest z projektowaniem stron internetowych.

Niestety jeśli projektowanie graficzne ma mieć kontrolę nad całym procesem podejście elastyczne w postaci projektowania stron responsywnych jest bardzo trudne. Dzieję się tak głównie ze względu na to, że nie da się w programach graficznych zaprojektować wyglądu strony elastycznej (jeśli się da to proszę o kontakt – sprostuję). Oczywiście są możliwe pewne uproszczenia. Można chociażby zaprojektować wygląd strony w tzw. desktopowej rozdzielczości i później zaufać deweloperowi, który będzie ją płynnie 'ściskał’ na mniejszych rozdzielczościach, ale to niestety nie zawsze wchodzi w grę. Czasami, dlatego że osoby tworzące projekty graficzne chcą mieć większą kontrolę nad wyglądem strony na urządzeniach mobilnych (czy po prostu na mniejszych rozdzielczościach), czasami ze względu na podobne potrzeby klienta. Powodów może być wiele.

Na pewno warto pamiętać o tym, że projektowanie adaptywne będzie bardziej czasochłonne i pewnie bardziej kosztochłonne niż umiejętnie przeprowadzony projekt responsywny (fluid layout). Chyba warto pamiętać o tym podczas następnej wyceny.

Image courtesy of 2nix at FreeDigitalPhotos.net

Tagi: adaptive web design • featured • Responsive Web Design • web design