Responzivní design

Ukázka

Na vebu rprpaintballcup.cz nebyl vytvořen grafikem návrh vzhledu stránek pro mobilní zařízení, ale protože byl obecný návrh udělán dobře, bylo možné jej upravit pro mobilní zařízení celkem jednoduše.

Úvodem

Mezi základní požadavky na web patří mimo jiné i to, aby byly webové stránky zobrazitelné na zařízeních s různou velikostí displeje a různou softwarovou výbavou (operační systém, prohlížeč...). Toho lze dosáhnout třemi způsoby:

1. vyrobit velmi jednoduchý web nezávislý na prohlížeči a zařízení
2. na straně serveru rozeznat typ prohlížeče a nabídnout prohlížeči modifikovaný obsah
3. použít soudobé metody a umožnit prohlížeči aby webovou stránku zobrazil s ohledem na typ zařízení - tedy responzivní design

Metoda A vyhovuje standardu Blind Friendly Web. Tuto metodu by tedy měly používat vývojáři webů ze zákona povinně přístupných zdravotně postiženým. Takto vyrobený web bude stoprocentně dostupný na všech platformách, web bude přístupný pro uživatele používající aurální výstup a pod.
Metoda A ovšem neumožňuje vyrobit atraktivní web s propracovaným grafickým uživatelským rozhraním.

Metoda B umožní nabídnout zařízení výstup (webovou stránku) jakou je zařízení schopno zobrazit

• Rozezná-li definované zařízení (operační systém a prohlížeč) a může-li zjistit velikost displeje, odešle odpovídající obsah (patřičnou webovou stránku s patřičným formátováním).
• V opačném případě odešle takový obsah (webovou stránku) kterou lze zobrazit na libovolném zařízení
  ( viz metoda A). 

Metoda B se hojně používá u webů, které hodně vydělávají. Je totiž nákladná.

Responzivní design

Webový design je užitný design - primárním účelem je použitelnost. Totéž platí i o responzivním designu - jeho účelem není aby web vypadal „stejně krásně” na všech zařízeních, ale aby byl na všech zařízeních použitelný.

Jak to funguje

Do prohlížeče přicházejí data - texty a obrázky, a prohlížeč je zobrazí na displeji (monitoru). To jak je zobrazí je podmíněno direktivami uloženými ve stylopisu. Soudobé prohlížeče si umí vybrat stylopis podle šířky displeje - obsah je tedy zobrazen tak, aby se vešel na displej.

Díky životnosti mobilních zařízení můžeme předpokládat, že převážná většina mobilních zařízení je „soudobá”. Se zobrazením webu na desktopu obvykle nemáme problémy.

Jak se to dělá

Základní podmínkou slušného návrhu responzivního designu je uchopení obsahové struktury webové stránky. Což zamená vnímat jednotlivé bloky (menu, katalog zboží, článek, karta zboží, SEO text,...) oddělěně a také je tak prezentovat.

Co to stojí?

U nových webů (instalací main-shop) je responzivní design samozřejmostí a celkové náklady nezvýší.
Samotná implementace responzivního designu pro starší design stojí obvykle od 5 000,- do 8 000,-.

Vyplatí se?

Tabulka1
Statistika zařízení používaných k návštěvě webů (aktualizováno 7. 2015)

Tabulka 2
Srovnání tržeb u webu s responzivním designem a bez

Z tabulky 2 je zřejmé, že návštěvníci shopu  používající mobilní zařízení si prakticky nic nekoupí pokud není web přizpůsoben jejich zařízení. 

Při srovnání meziročního nárůstu obratu u webů které byly redesignovány v roce 2013 a 2014 ( a u kterých byl implementován responzivní design) s weby které responzivní design implementován nemají rozdíl odpovídá disproporci tržeb v tabulce 2. Dá se tedy říci - implementací responzivního designu můžete zvednout tržby svého eshopu o 20 - 30%. Jsou to jednoduché počty, generuje-li shop 1M ročního obratu, bude generovat s responzivním designem o 200k až 300k více. Při nákladech 5k až 8k se jistě vyplatí.