Responsive design

Responsive design je způsob stylování stránky, při kterém server nerozlišuje zařazení a neustále odesílá stejnou stránku. Stránky se mění přímo v prohlížeči pomocí kaskádových stylů na základě šířky zobrazovací plochy. Vzniklý výsledek pak vypadá tak, že uživatel na svém mobilu/tabletu vidí stejný obsah jako v desktopu pro co nejlepší použitelnost.

Výhody:

• Pracujete s jedním kódem stránky, který upravujete pomocí CSS.
• Na rozdíl od mobilního webu, zde máte jeden měřící kód, který se nachází na jednom místě. Díky němu získáváte globální statistiky a přehled z jakých zařízení a v jakém rozlišení byl Váš web zobrazován.
• Responsive design se orientuje na rozlišení a ne na zařízení, což z něho dělá dobré dlouhodobé řešení. Hotový web nemusí být dodatečně upravován a optimalizován pro nový přístroj. Optimalizací prochází jen média při update obsahu..
• Web Vám poskytuje stejný zážitek na všech platformách díky stejným grafickým prvkům.

Nevýhody:

• Při nesprávný optimalizaci webu, se stahuje ne mobilní přístroj velký množství dat.
• Na rozdíl od mobilního webu je o dost náročnější přidávat na web média. Je nutné upravit obrázky a videa pro každé rozlišení (videa je nutné optimalizovat). Ale i v této nevýhodě je výhoda, díky specializovaným úpravám web běží na mobilních zařízeních rychleji, jelikož nemusí stahovat zbytečně velké množství dat.
• Po čase se jistě rozhodnete udělat několik změn na svém webu, a v té chvíli zjistíte další nevýhodu responsive designu oproti webový stránce s mobilní verzí. Místo úpravy pouze webu a mobilní stránky, musíte udělat změny pro každý rozměr designu, který jste si definoval při vývoji. (samozřejmě to stojí víc peněz a času).

Adaptive design

Adaptive design je optimalizace stránky zvlášť pro každou platformu s využitím všech jejich výhod a možností, ve výsledku na každém zařízení design koresponduje se standardním GUI daný platformy. Tato metoda zajišťuje, že server posílá do zařízení přesně upravenou webovou stránku pro daný typ zařízení a dané rozlišení. Většinou využívají kaskádové styly, aby stránka přesně zapadala do displeje uživatele.

Výhody:

• Na rozdíl od responsive designu je adaptive design optimalizovaný pro každý typ platformy zvlášť, a tak využívá všechny její možnosti, vzory a funkce.
• Získáte rychlé načítaní stránky díky serverový detekci zařízení a odeslání prohlížečů dat upravených pro dané zařízení.
• Při správným nastavení by měl mít uživatel možnost přepnout zobrazení do „Velký" verze webu určené pro desktopy. Tuto možnost při responsive designu nemáte.

Nevýhody:

• Vývoj webu je časově náročný, kvůli nutnosti optimalizace stránky pro každou zvolenou platformu na frontendu a backendu. Před samotným vývojem je klíčové si stanovit, pro které platformy chcete web optimalizovat.
• Při responsive designu musíte znát html, css a testovat výsledek na displejích s různými velikostmi. Pro adaptive design musíte mít výbornou znalost všech platforem pro které chcete web upravovat, abyste dokázali dobře využít jejich možnosti.

Každý z těchto dvou přístupů má své silné a slabé stránky, ve spoustě věcí se ale výborně doplňují. Právě proto lze velmi často tyto přístupy, nebo alespoň jejich části použít v jednom projektu. Adaptive svou orientací na zařízení dává jako doplněk ke responsive designu webovému integrátorovi skvělé možnosti přizpůsobit web přesně podle potřeb klienta a uživatele.