Responzivní webdesign – k čemu to je dobré?

Responzivní webdesign začíná být čím dál tím častěji zmiňován nejen na konferencích a školeních, ale občas toto slovní spojení začínáme slýchat i ze stran klientů. Ne vždy si však každý umí pod tímto pojmem představit to samé. Přeci jen se jedná v internetovém marketingu o poměrně nový a pro někoho dosud neznámý pojem. Význam responzivního designu ale velmi rychle roste a jestliže dnes je nabízen jako příplatkové rozšíření webu, velmi brzy již může být jeho nutnou součástí.

Co to je ten responzivní design?
Vzrůstající počet uživatelů chytrých telefonů a tabletů s mobilním připojením k internetu s sebou přináší vzrůstající počet přístupů na webové stránky z těchto zařízení. Na mobilních zařízeních se však klasické webové stránky obtížně zobrazují. Displeje mobilních telefonů a tabletů jsou menší než webová stránka, odkazy nebo menu jsou pak na dotyk příliš malé a celkový komfort ze surfování je velmi špatný (pokud se vůbec dá web kompletně na takovém zařízení procházet). Do nedávna byl tento problém řešen nepraktickou speciální mobilní verzí webových stránek, tedy menší kopií originálu (například http://m.idnes.cz/). Od chvíle zavedení nových technologií HTML5 a CSS3 do praxe lze různé velikosti zobrazení stránek řešit pomocí responzivního designu.

Jde o návrh webových stránek již od samotného začátku tak, aby obsah byl dobře dostupný na všech zařízeních – od mobilních telefonů všech velikostí přes tablety až po netbooky, notebooky a desktopy a to tak, že samotný web se automaticky přizpůsobí danému zařízení.
Jak to funguje po technické stránce?
Jednoduše řečeno to funguje tak, že responzivní web má jednu URL adresu a zcela identický HTML kód. Díky technologii CSS3 webová stránka sama rozpozná, z jakého přístroje s jakou obrazovkou a jakým rozlišením si ji uživatel prohlíží a podle toho stránku a její obsah vykreslí.
Responzivní design má tři základní úrovně:

• flexibilní strukturu (boxy nebo elementy na stránce nemají danou přesnou absolutní pozici a mohou „plavat“ dle potřeby)
• flexibilní obrázky (obrázky na stránce nemají danou přesnou velikost a absolutní pozici a mohou „plavat“ a měnit velikost dle potřeby)
• Media Queries (jedna z klíčových funkcí CSS3, díky které lze měnit stylování stránky v závislosti na šířce obrazovky).

Flexibilní struktury se docílí tím, že jednotlivé šířky elementů se zadávají v procentech, struktura webu díky tomu pružně reaguje na různé šířky zobrazení. U obrázků se uvádí většinou pouze maximální šířka a to opět v procentech (a výška se dopočítává automaticky), tak aby nedocházelo k přetékání.

Jedno z možných rozdělení obsahu webových stránek pro počítače, tablety a smartphony

Proč zvolit a požadovat responzivní design?
Už je vám jasné jaké má responzivní design výhody a proč ho požadovat? Návštěvníků a tedy i potenciálních zákazníků, kteří přistupují na vaše webové stránky z mobilního zařízení je stále více ( a tento trend bude dále pokračovat ). Tvořit a udržovat pro ně speciální verzi mobilních webových stránek je neefektivní, časově i finančně náročné. Díky responzivnímu webdesignu můžete spravovat pouze jeden web. Uživatelům se bude web lépe ovládat a bude mnohem hezčí než mobilní verze (a pravděpodobně i mnohem funkční – nepůjde totiž o „osekanou“ verzi, ale o plně funkční verzi jen jinak poskládanou).
Dalším důležitým benefitem je jednotná URL adresa, můžete tak skrze svůj chytrý telefon uložit web do oblíbených nebo doporučit kamarádovi odkaz stránky, který se vám/mu zobrazí stejně i na velkém monitoru (což by se nestalo u mobilní verze stránek, tam by se opět načetla osekaná mobilní verze webu). Jednotné URL adresy jsou vhodné také z pohledu optimalizace pro vyhledávače (SEO), které by jinak mohlo být oslabeno škodlivou duplicitou (rozdělením stránek na desktop a mobilní verzi).
Ale snad nejdůležitějším faktem je, že díky responzivnímu designu můžete sledovat výkon stránek v jednom grafu (nikoli odděleně dle mobilní a desktop verze).
Jaký to má háček?
Responzivní design má i své nevýhody – největší překážkou může být počáteční investice. Příprava, tvorba strukturogramů (wireframes), tvorba grafického designu, kódování i programování je o něco komplikovanější, takže celkový vývoj webu trvá delší dobu a stojí dle konkrétního projektu o 10% až 30% více peněz. Ale my se domníváme, že se tato investice většině provozovatelů webových stránek zpětně vyplatí. Životnost webu je několik let a penetrace uživatelů příchozích z mobilních telefonů a tabletů neustále roste.
Pokud chcete responzivní web, kontaktujte nás pro více informací.