Tvorba www stránek a webdesignTvorba www stránek a webdesign

Proč by vaše stránky měly mít responzivní webdesign?

Proč by vaše stránky měly mít responzivní webdesign?

Co je to responzivní design?

Responzivní webdesign je moderní způsob stylování HTML stránky, při kterém se webová stránka zobrazí v závislosti na velikosti displeje. V současné době se toto specifické zobrazení týká převážně dotykových mobilních telefonů (smartphonů), tabletů a jejich kříženců (phabletů). Ale není vyloučeno, že za pár měsíců či let se bude týkat také nositelného hardwaru s displejem (hodinek, náramků) nebo displejů v autech, chladničkách či jiných přístrojových deskách.

Rozdíl mezi responzivní a neresponzivní stránkou tedy poznáte až při prohlížení na menším displeji (typicky na telefonu, tabletu). Na desktopu nebo notebooku rozdíl nepocítíte. Pokud je responzivní design udělaný promyšleně a důsledně, pak by se vám stránka měla na mobilu zobrazit mnohem lépe a přehledněji než ve své standartní (desktopové) verzi.

  1. Jelikož je displej mobilního telefonu je malý, navigační a ovládací prvky se zjednoduší, aby na ně šlo lépe klikat, resp. tapovat, čili ťukat.
  2. Fotografie (fotogalerie) se v responzivní verzi zobrazí přes celou šířku, aby měl návštěvník lepší zážitek z prohlížení.
  3. Deaktivují se veškeré ryze desktopové technologie, které na mobilu nefungují, nebo se problematicky ovládají. Například víceúrovňové výsuvné menu, interaktivní dotykové mapy, flashové animace a další proprietální technologie.
  4. Textový obsah se přizpůsobí šířce displeje a mírně se zvětší velikost písma.
  5. V případě e-shopu se také zmenší počet zobrazovaných produktů na jednom řádku a zvýší  se počet řádků, aby uživatel nemusel tolik klikat (ťukat). Zákazník si může pohodlně prohlížet relativně dlouhou stránku plnou produktů bez nutnosti přepínání na další stránku. Posouvání je na dotykovém displeji totiž mnohem jednodušší než strefování se do jakéhokoli odkazu či tlačítka.
  6. Na malém displeji se webová stránka celkově zjednodušší a návštěvníkovi nabídne pouze relevantní informace. Zákazníka, který si prohlíží web na mobilním telefonu nebude zajímat aplikace pro PC. Ale jistě ocení odkaz na mobilní aplikaci (ať už je pro iOS, Android nebo Windows phone).
  7. Na dotykovém displeji není možné na prvek tzv. najet a počkat co se objeví, ale pouze přímo ťuknout (kliknout). Při návrhu webu je potřeba na tento fakt myslet a na tento efekt - (najedu nad to myší) se nespoléhat.

Má smysl realizovat responzivní design?

V současné době (na podzim 2014) je přes mobilní zařízení připojeno k internetu více lidí než přes klasický počítač. V případě, že váš web zcela ignoruje tuto skutečnost a obsahuje mobilní bariéry, pak o tyto návštěvníky přicházíte. Není to škoda?

Výhody responzivního webdesignu I. (pro návštěvníka)

  • Lepší ovládání navigačních prvků webu
  • Lepší čitelnost textů
  • Rychlejší načtení stránky

Výhody responzivního webdesignu II. (pro majitele stránky)

  • Provozovatel webu získá nové návštěvníky a provozovatel eshopu více objednávek.
  • Správci webu nezvniká žádná další práce (responzivní verze se generuje automaticky)
  • Webová stránka pozná, že si ji zákazník prohlíží z mobilu a může mu výrazněji nabídnout ať nezávazně zavolá. Zákazníkovi, co si prohlíží web s notebooku zase nabídne ať pošle dotaz emailem.

Nevýhody responzivního webdesignu

  • Vyšší náklady na realizaci webu (každoé zobrazení je podrobně testováno)
  • Delší doba realizace webu (design a funkce je potřeba důkladně promyslet)
  • Některé funkce nebudou pro malé displeje přístupné (aby se udržela jednoduchost ovládání)

Alternativní  řešení - mobilní web (špatné, zastaralé)

Responzivní design má svého předka v podobě tzv. mobilní verze. Technické řešení spočívalo v provozování 2 různých webů (na 2 různých doménách). Například m.vasedomena.cz pro mobily a www.vasedomena.cz pro klasické monitory.

Hlavní nevýhodou tohoto řešení je zbytečné tříštění finančních nákladů na reklamu do 2 různých webů, problematické SEO a nutnost spravovat 2 verze webu. 

Další nevýhodou zastaralé mobilní verze je generování tzv. duplicitního obsahu, za který vás Google může penalizovat. Google může totiž mobilní verzi webu vyhodnotit jako obsahovou kopii a zcela ji vyřadit ze svého vyhledávání.

Chcete si to reálně vyzkoušet?

Stránka, kterou si právě čtete je responzivní, podělte se prosím o svůj dojem a napište mi komentář nebo e-mail. Budu vám vděčný za pochvalu a ještě více za kritiku.

NAHORU

zavřít formulář

Zeptejte se

otevřít formulář pro dotazy