nav line

Responsive vs. adaptive design

Dva prístupy k návrhu webu, s ktorými sa stretávame v úlohe webového integrátora, na prvý pohľad veľmi podobné a v procese výroby často prelínajúce sa. Často sa stáva, že web postavený na responsive designe má prvky adaptive designu a naopak. V explicitnom význame týchto dvoch prístupov ale nájdeme podstatné rozdiely.

Responsive vs Adaptive

Responsive design

Responsive design je spôsob štýlovania stránky, pri ktorom server odosiela stále tú istú stránku bez ohľadu na zariadenie užívateľa a layout stránky sa mení priamo v prehliadači pomocou kaskádových štýlov na základe šírky zobrazovacej plochy. Výsledkom je, že na mobile vidí užívateľ ten istý obsah ako na desktope, alebo tablete, prispôsobený pre čo najlepšiu použiteľnosť.

Výhody:

  •  Pracujete s jedným kódom stránky, ktorý len upravujete pomocou CSS.
  • Oproti mobilnému webu máte na stránkach jeden merací kód na jednom mieste. Pomocou neho máte globálne štatistiky a vidíte z akých zariadení a s akým rozlíšením bola stránka videná.
  • Responsive design je vďaka orientácii na rozlíšenie, nie na zariadenie dobré dlhodobé riešenie, pretože hotový web nie je nutné dodatočne upravovať a optimalizovať pre nové zariadenia. Optimalizáciou prechádzajú len média pri update obsahu.
  • Web má rovnaké grafické prvky a poskytuje užívateľovi rovnaký zážitok na všetkých platformách.

Nevýhody:

  • Pri nesprávnej optimalizácii webu sa sťahuje na mobilných zariadeniach veľký objem dát
  • Oproti mobilnému webu je náročnejšie pridať na web média. Obrázky a videa je nutné upraviť pre každé rozlíšenie, optimalizovať videa... Vďaka tomu ale web beží na mobilných zariadeniach rýchlejšie a nemusí sťahovať zbytočne veľké množstvo dát.
  • Prejde nejaký čas a vy sa rozhodnete na webe spraviť zmeny. Vtedy sa ukazuje ďalšia nevýhoda responsive designu oproti webovej stránke s mobilnou verziou. Namiesto webu a mobilnej stránky musíte zmeny spraviť pre každý rozmer designu, ktorý ste si definovali pri vývoji, čo bude stáť viac času a peňazí.

Adaptive design

Adaptive design znamená optimalizovanie stránky pre každú platformu zvlášť a využitie všetkých jej výhod a možností, takže na každom zariadení by mal design korešpondovať so štandardným GUI danej platformy. Pri tejto metóde server posiela do zariadenia webovú stránku presne upravenú pre dané rozlíšenie a typ zariadenia, väčšinou využívajú kaskádové štýly relatívne jednotky, aby stránka presne zapadla do displeja užívateľa.

Výhody:

  • Oproti responsive designu, adaptive design je web optimalizovaný pre každú platformu zvlášť a využíva jej možnosti, vzory a funkcie.
  • Získate rýchle načítanie stránky vďaka serverovej detekcii zariadenia a odoslaniu prehliadaču dát upravených pre dané zariadenie.
  • Pri správnom nastavení by sa mal užívateľ možnosť prepnúť do “veľkej“ verzie webu určenej pre desktopy. Túto možnosť pri responsive designe nemáte.

Nevýhody:

  • Vývoj webu je časovo náročný, kvôli nutnosti optimalizovať stránku pre každú zvolenú platformu na frontende aj na backende. Pred samotným vývojom je kľúčové si stanoviť, pre ktoré platformy sa web bude optimalizovať.
  • Pri responsive designe musíte poznať html, css a testovať výsledok na displejoch s rôznymi veľkosťami. Pre adaptive design musíte mať výbornú znalosť všetkých platforiem pre ktoré chcete web upravovať, aby ste dokázali dobre využiť ich možnosti.

Každý z týchto dvoch prístupov má svoje silné a slabé stránky, vo veľa veciach sa ale výborne dopĺňajú. Práve preto je možné veľmi často tieto prístupy, alebo aspoň ich časti použiť v jednom projekte. Adaptive svojou orientáciou na zariadenia dáva ako doplnok ku responsive designu webovému integrátorovi skvelé možnosti prispôsobiť web presne podľa potrieb klienta a užívateľa.

Ohodnoťte článek

Responsive vs. adaptive design

Související články

Vyhledávání na blogu

Webová integrace

Webová integrace jako nová oblast pro business „velkých" webových agentur.

o webové integraci

Profily blogujících