PromowanyWebdesign & UX

Responsive Design vs. Adaptive Design?

responsive and adaptive designResponsywne 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 designfeaturedResponsive Web Designweb design

komentarzy 25

  • Awatar
    Piotr Lewalski

    18 września 2014 11:16

    Bardzo dobry artykul, nie wiem jak np. mozna nazywac Skeletona resposnywnym gridem, skoro w kodzie sa same breakpointy i linijki z pikselami. Szlag mnie trafia.

    Odpowiedz
    • Awatar
      Mr.Mr

      18 września 2014 13:51

      Wstyd się przyznać, ale sam tak zrobiłem xD Nawe na łamach Webroad, ale to było dawno i nie prawda i przede wszystkim świadczy o tym jak duże jest zamieszanie terminologiczne.

      Odpowiedz
  • Awatar
    Comandeer

    18 września 2014 12:47

    Problem nazewnictwa jest bardzo prosty: zawsze dąży się do całkowitego ujednolicenia. Jeśli RWD i AWD służą temu samemu i używają podobnych narzędzi, to siłą rzeczy w końcu zostaną spięte do jednego pojęcia. Inna rzecz czy to zjawisko pozytywne.

    Jak dla mnie niepotrzebna kłótnia o nomenklaturę: strona ma działać na jak największej liczbie urządzeń (nie mówię „na wszystkich”, bo pewnie na jakiejś nowej lodówce Samsunga nie zadziała ;)) i… tyle. A jak to zostanie osiągnięte, to już de facto nie ma takiego znaczenia. Dlatego zamiast kłócić się i debatować czym jest AWD a czym RWD, proponuję mówić po prostu o GWD – Good Web Design ;)

    >Niestety jeśli projektowanie graficzne ma mieć kontrolę nad całym procesem podejście elastyczne w postaci projektowania stron responsywnych jest bardzo trudne.
    Zwłaszcza jeśli klient stwierdza, że layout przystosowany pod Full HD jest doskonałą bazą dla mobile first…

    >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.
    Problem polega na tym, że coś takiego jak „relatywna wielkość czcionki” (a może lepiej powiedzieć fontu? Ostatnio mnie za to zbesztano ;)) nie do końca istnieje. W teorii dla wszystkich przeglądarek domyślnie 1rem to 16px, ale… to nie jest nigdzie ustandaryzowane. W specyfikacji napisano, że domyślna wielkość czcionki to „wielkość średnia” (cokolwiek to znaczy), nie mniejsza niż n (które też nie jest dokładnie określone!) – dodatkowo wartość ta jest możliwa do zmiany przez użytkownika. Innymi słowy: oparcie całości typografii na samych relatywnych wielkościach czcionki może się nam odbić czkawką (co prawda w przypadkach rzadkich, ale zawsze). Stąd powiedziałbym inaczej: określiłbym na sztywno główny rozmiar czcionki (dla :root czy html) a na całej reszcie strony stosował jednostki relatywne. Może jest to pewne złamanie absolutnych zasad fluit layout, ale IMO jest to złamanie pozytywne ;) Tym bardziej, że przeglądarka i tak wszystko przelicza na piksele a jedyne, co robimy, to podajemy jej dokładną wartość jako bazę dla tych kalkulacji.

    >breakpoint(punkt łamnia w wolnym tłumaczeniu)
    Brzmi jak diagnoza chirurgiczna… ;) Nie lepiej „punkt zwrotny”? A najlepiej – po prostu breakpoint!

    Odpowiedz
    • Awatar
      Mr.Mr

      18 września 2014 13:55

      W pewnym sensie masz rację, jest to trochę spór o pietruszkę, przynajmniej z perspektywy usera (chociaż ciekaw jestem jak by wyszły testy A/B tej samej strony zrobionej w AWD i w RWD). Mimo wszystko jest to ‚spór’ bardziej na grunice dewelopersko-dezajnerskim w takim sensie, że dotyczy obu tych płaszczyzn.

      Natomiast ja nie chcę się kłócić. Chciałem tylko zaznaczyć, że fajnie by było gdyby używano w miarę precyzyjnych pojęć do opisu rzeczywistości (semantyka:)

      A co do go genezy to pewnie masz rację – skoro efekt jest zbliżony to mało kto przejmował się nazwami.

      Tak na koniec. Wydaje mi się jednak że RWD w znaczeniu z artykułu jest chyba bliższe seru dewelopera ;) Bardziej jakoś tak naturalnie to wychodzi…

      Odpowiedz
    • Awatar
      Dawid Partyka

      25 września 2014 08:21

      próbowałem zinterpretować terminy AWD i RWD pomijając jakiekolwiek definicje i wyszło mi, że oznaczają to samo.
      adapt — przystosowywać się — strony przystosowują się do medium, na którym są wyświetlane

      responsive — reagujący — strony reagujące na medium. jak? przez przystosowanie się.

      Doszedłem do wniosku, że nie będę na siłę stosował nowego terminu — pozostanę przy RWD (bo chyba był pierwszy, a w każdym razie jest popularniejszy).
      Poza tym jakoś nie widzę tego, by projektant mógł zdecydować czy chce robić AWD czy RWD, bo to zależy tylko od treści strony.

      A może za głupi na to jestem.

      PS. za to czepiam się kiedy ktoś stosuje terminy xhtml i html5;)

      Odpowiedz
  • Awatar
    Paweł Andrzejewski

    19 września 2014 12:47

    Całe życie w błędzie ;) @ Mr.Mr na pewno wciągnę Twój artykuł do pracy magisterskiej na temat RWD.

    Odpowiedz
    • Awatar
      Mr.Mr

      19 września 2014 14:58

      A proszę bardzo ;)

      Odpowiedz
  • Awatar
    Damian

    20 września 2014 11:56

    Świetny artykuł, oby tak dalej Panowie :D

    Odpowiedz
  • Awatar
    Dawid Partyka

    24 września 2014 07:28

    A można prosić o jakieś przykłady stron RWD, bo wszystko co mi przychodzi do głowy podchodzi jednak pod AWD

    Odpowiedz
    • Awatar
      Mr.Mr

      24 września 2014 14:38

      http://www.smashingmagazine.com/

      Odpowiedz
      • Awatar
        Dawid Partyka

        24 września 2014 16:13

        no dobra, to trochę nie rozumiem.
        „… 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” — na sm wyraźnie widzę breakpointy, a wersja „mobilna” wyraźnie różni się od „desktopowej”

        Odpowiedz
      • Awatar
        Mr.Mr

        24 września 2014 16:32

        ale to nie znaczy, że nie możesz stosować do płynnej strony @media, zresztą płynna strona nie oznacza, że robić na ekranie szerokości 360px miniaturkę tego co masz na desktopie bo to by było nieczytelne ;)

        Odpowiedz
      • Awatar
        Dawid Partyka

        24 września 2014 16:55

        nie czepiam się samego użycia @media a wyraźnych różnic między stroną min a max (znika nawet część treści),

        Odpowiedz
      • Awatar
        Mr.Mr

        24 września 2014 18:53

        Jasne, ale to właściwie oczywistość. Jeśli ekran jest mały to jest na nim mało miejsca ;) Nie do końca rozumiem w czym problem…

        Odpowiedz
      • Awatar
        Dawid Partyka

        24 września 2014 20:39

        no właśnie w tym, że prosiłem o przykład RWD, a ten co dostałem wygląda dla mnie jak to co określane jest w tekście jako AWD. Nie widzę różnicy, więc i sensu dwóch pojęć.
        Nie czepiam się specjalnie, mądrzejsze głowy nad tym myślały, więc coś w tym musi być, a ja staram się tylko to zrozumieć.

        Odpowiedz
      • Awatar
        Mr.Mr

        24 września 2014 23:16

        nie wiem… może te różnice nie są tak wyraźne… 0_o

        http://boxesandlines.co.uk/ a to?

        Odpowiedz
      • Awatar
        Dawid Partyka

        24 września 2014 23:41

        hmm, a jak się ma max-width do fluid layout — albo inaczej — czy jeśli layout ma max-width (tak jak SM czy ostatni przykład) to nadal może być kwalifikowany jako fluid?
        getbootstrap.com to AWD czy RWD?

        Odpowiedz
      • Awatar
        Mr.Mr

        25 września 2014 09:08

        Wiesz co to jest tak, że nie ma jakiś sztywnych granic, przynajmniej nie w praktyce. Teoretycznie można wyróżnić jakieś idealnie płynne strony i idealnie ‚adaptywne’ (nazwijmy to tak), ale to są raczej teoretyczne skrajności. W przyrodzie trzeba szukać przeważających cech, ideii tkwiącej w budowie grida itd. W każdym razie może to z tego właśnie wynika to zamieszanie pojęciowe.

        Odpowiedz
      • Awatar
        Dawid Partyka

        25 września 2014 09:24

        No właśnie o to mi chodzi. Po co tworzyć zamieszanie? Po co szukać?
        One name to rule them all:)

        Odpowiedz
      • Awatar
        Mr.Mr

        25 września 2014 09:47

        Chociażby po to żeby wiedzieć… :) Druga sprawa jest taka, im mimo tego, że w naturze takie skrajne podziały to jednorożce (mało kto widział) to jednak podejście do projektowania i myślenia o stronie zupełnie inne.

        Odpowiedz
  • Awatar
    Hajmus

    16 października 2014 12:57

    Świetny artykuł. Jednak podejście AWD z pewnością będzie popularniejsze ze względu na koszty, mało kto będzie proponował klientowi 3 strony w cenie podobnej do AWD.

    Odpowiedz
  • Awatar
    Peter Nalepa

    4 lutego 2015 15:36

    chyba nie ma sensu na siłę separować tych 2 pojęć, zaprojektowanie porządnej mobilnej strony to efekt użycia zarówno RWD jak i adaptywności – sam stricte-RWD na 4-calowych smartfonach nie da się w wielu przypadkach zastosować, a z kolei „czysty AWD” to relatywnie kupa roboty… sztuka więc polega na tym, żeby z głową korzystać z obu rozwiązań;)

    Odpowiedz
  • Awatar
    Krystian Dabrowski

    15 lutego 2015 15:17

    Wygrywaj nagrody bez ceny minimalnej, nowy serwis aukcyjny zaprasza.
    Dopki sam nie przetestowalem, podchodzilem do niego sceptycznie. Mi
    udalo sie wygrac PS 4 za 71,20 PLN. O to dowod ze to na prawde dziala.

    http://i62.tinypic.com/2kho5k.jpg

    Zapraszam serdecznie. K

    http://adf.ly/12Holb

    Odpowiedz
  • Awatar
    Mariusz

    6 lutego 2016 20:11

    Szczerze mówiąc, nawet nie wiedziałem, że są takie dwa podejścia do projektowania.

    Odpowiedz
  • Awatar
    ksiadz

    12 lipca 2016 11:30

    Mimo wszystko wolę adaptive webdesign, bo po co mam wszystko rzucać dla jakiejs idei? czemu google jednak faworyzuje responsive web design? tak właściwie jak to google pojmuje? według pixeli? że jest lepsze?
    by niepelnosprawny,org

    Odpowiedz

Zostaw odpowiedź