Responzivní design webu: Principy, přínosy a rady

David Melich | 10.03.2014 | Internet a služby | Žádné komentáře

Responsive web design je v souvislosti s webovými stránkami jedním z nejčastěji používaných pojmů dneška. Má však vůbec význam se jím zabývat? Co může přinést? A jak na to? Na tyto otázky se pokusíme odpovědět v následujícím textu.

Responzivní design je poměrně mladý obor webového designu. Vznikl jako odpověď na velmi špatné zkušenosti uživatelů se zobrazením stránek na mobilních zařízeních. Skutečný rozmach přišel s masovým rozšířením prvních verzí iPhonů v letech 2007 – 2008. Standardní rozlišení displeje smartphonů bylo 320 × 480 pixelů, takže z běžné stránky se šířkou 960 pixelů viděl uživatel jen malou část.

Weboví designéři tedy stáli před dilematem, jak se novému trendu přizpůsobit. Prvním stádiem byl vývoj samostatné mobilní webové stránky. Na první pohled ideální řešení – návštěvník z mobilu uvidí stránku přizpůsobenou pro jeho zařízení a návštěvník z desktopu / notebooku uvidí úplnou verzi.

Existuje však množství (nepřekonatelných) problémů, pro které bylo od tohoto řešení upuštěno: nutnost udržovat dvě samostatné stránky, a tedy náročná aktualizace, zvýšené náklady a v neposlední řadě ochuzenost obsahu mobilní verze – návštěvník často nenašel to, co potřeboval nebo na co byl zvyklý. Nemluvě o stále širším portfoliu zařízení, u kterých se těžko hledá jasná dělící čára mezi smartphony, tablety a ultrabooky. Co se zobrazilo pěkně na iPhonu, na iPadu bylo již nepoužitelné.

Gridové frameworky a media queries

K širšímu rozvoji responzivního webdesignu přispělo několik zásadních technických zlepšení – objevilo se množství frameworků na tvorbu flexibilního gridu, rozložení stránek, které se přizpůsobí rozměrům prohlížeče. Mezi průkopníky můžeme zařadit Bootstrap od firmy Twitter, Foundation od firmy Zurb a další. Další (a možná nejdůležitější) technikou se staly media queries, součást specifikace CSS3.

Ve zkratce jde o definice zobrazení webové stránky, které se aktivují pouze na zařízeních s určitými vlastnostmi – šířkou displeje, jeho orientací (portrait / landscape) atd. Právě díky této technologii je možné, aby jedna a tatáž webová stránka vypadala na každém zařízení jinak. Například při šířce okna prohlížeče 1200 pixelů (notebook) zobrazíme 3 sloupce, při šířce 960 pixelů (iPhone v poloze landscape ) 2 sloupce a při šířce 480 pixelů (iPhone v poloze portrait) 1 sloupec.

Responzivní webdesign a pohled byznysu

Technologie jsou sice fajn, ale má celé úsilí o responzivní web smysl i pro byznys? Mohli bychom odpovědět šalamounsky – jak pro koho. Ale ani toto není celkem pravda. Podle studie WalkerSands Communications Quarterly Mobile Traffic Report na vzorku několik desítek zkoumaných webových stránek představoval počet mobilních přístupů v Q2/2013 téměř 30 %. Toto číslo samo o sobě nemá příliš velkou vypovídací hodnotu, ale např. ve srovnání s Q2/2012 na stejných webech narostl počet mobilních přístupů o 73 %.

A na žádném ze zkoumaných webů nedošlo k poklesu poměru mezi mobilními a desktopovými přístupy. Tento trend je tedy mnohem podstatnější než absolutní čísla – říká totiž o zvyšujícím se počtu mobilních přístupů a je zřejmé, že bude pokračovat. Svědčí o tom i rostoucí počet prodaných smartphonů a tabletů.

Téměř každý z nich má dnes i datový paušál, protože bez něj v současnosti koupě smartphonu / tabletu nemá praktický význam. Všechny tyto dílčí informace pro majitele webových stránek znamenají jen jedno – pokud bude ignorovat technologický pokrok a jeho stránka nebude mobilním návštěvníkům poskytovat stejný komfort jako desktopovým, bude přicházet o klienty.

Několik rad pro majitele webů

Tvorba responzivních webových stránek je mnohem náročnější proces než zhotovení stránek určených pouze pro běžné prohlížení. U nich existuje jen jeden kontext – uživatel má před sebou notebook nebo monitor PC s dostatečným výpočetním výkonem a zřejmě i s dosti rychlým internetem. U responzivního webu třeba zohlednit množství kontextů – návštěvník může cestovat v MHD, čekat v restauraci na oběd, ležet doma na gauči… Neznáme výkon zařízení, rozlišení displeje ani rychlost připojení.

Právě nyní více než kdykoliv předtím vystupuje do popředí obsah. Jaká je hlavní úloha webové stranky  Co může návštěvník hledat a co mu já mohu poskytnout? Jak nasměruji návštěvníka k akci, kterou si od něj přeji? Otázky designu ve smyslu obrázků a dekorací na vyplnění prázdna z důvodu nedostatku obsahu najednou ztrácejí smysl a řeší se skutečné designérské otázky – vizuální priorita, typografie, jednoduchá infografika namísto desítek řádků textu. Masivnímu nástupu smartphonů a tabletů vlastně můžeme vděčit za výrazné zkvalitnění internetového prostoru.

Nároky na technické i marketingové zpracování responzivní webové stránky jsou vysoké. Stránka musí být optimalizována na úrovni zdrojového kódu – nízký počet HTTP requestů, vyhýbání se náročným selektorům CSS, minimalizované soubory JS / CSS apod. – v to jsou jen některé ze znaků kvalitní webové stránky. A vzhledem k faktu, že drtivá většina webových stránek je dnes řešena pomocí redakčních systémů, je potřeba sledovat i možnosti, které poskytují jednotlivé řešení CMS.

Komerční systémy mají podporu responzivního designu řádově větší než open source řešení. Jde především o možnosti detekce mobilního přístupu již před odesláním webové stránky do prohlížeče. Díky tomuto lze přizpůsobit např. rozlišení obrázků (mobilní prohlížeč určitě nepotřebuje obrázek v rozlišení 5 Mpix), načíst některé javascriptové soubory jen na desktopu a pod. Právě práce s obrázky dnes nejvýrazněji odlišuje kvalitních webových vývojářů od ostatních.

Samozřejmě, lze nechat všude velikost obrázků pro desktop a zmenšit jen jejich zobrazení pomocí CSS a media queries, ale toto zbytečně zatíží návštěvníkovo připojení a pouze zvýší pravděpodobnost opuštění stránky. Skuteční experti vám dokonce nabídnou na výběr několik řešení, jako PictureFill, Hisrc, Adaptive images, vysvětlí vám výhody / nevýhody a nechají vás vybrat řešení podle vašeho rozpočtu a preferencí. A možná ještě jedna krátká rada na závěr: Zde se šetřit opravdu nevyplatí. Špatný dojem, který v (mobilních) návštěvnících zanecháte, vás může vyjít v konečném důsledku mnohem dráž než investice do kvalitních responzivních webových stránek.

Autor je managing director ve společnosti Impressa – internetová agentura, s. r. o.

Zdroj: Infoware.sk

Zanechte komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *


− dva = šest

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Copyright © ICT manažer | ISSN 1805-5486 | SEO optimalizace a přizpůsobení SEO-care.cz