Co je to responzivní design?
Rozhodně nejsilnějším trendem v digitálním světě je využívání internetu v on-the-go módě na mobilních zařízeních. Aby se naše cíle setkaly s preferencemi zákazníků, je nutné upravit přístup k vývoji webů tak, aby byly stránky optimalizované na všechna zařízení.
Co to znamená? Responivní design webových stránek je flexibilní, dokáže přizpůsobit rozložení obsahu, velikost obrázků i navigační menu různým rozměrům obrazovek.
Proto, pokud o stránce mluvíme jako o „optimalizované”, znamená to, že stránka je čitelná a pro uživatele je snadno ovladatelná s minimálním pohybem a posouváním stejně na desktopu, tabletu nebo smartphonu.
Responzivní design není jen metoda nebo technika vývoje webu. Jde o ideologii, podle níž jsou stránky navrhované a následně programované.
Co potřebuje responzivní web?
Responzivní web je navržen na základě tří developerských principů:
- Fluid Grids
- Media Queries nebo Breakpoints
- Flexibilní obrázky a média
Kořenem responzivního designu jsou tzv. Fluid Grids, které tvoří strukturu webu. Tyto mřížky nepracují s počtem pixelů, ale mají definovanou maximální výšku a/nebo šířku rozlišení obrazovky, což umožňuje přizpůsobit vzhled stránky zařízení. Stanovení maximální a minimální hodnoty určuje hraniční body přiblížení a zmenšení webové stránky tak, aby zůstala zachována kvalita grafiky a zároveň i čitelnost webu.
Vizuálním základem responivního designu jsou tzv. Media Queries nebo breakpointy. Ty jsou zodpovědné za změnu designu stránky v závislosti na zařízení, na kterém si konkrétní obsah prohlížíme. Web zjistí typ zařízení nebo rozlišení webového prohlížeče a následně zobrazí obsah v předdefinovaných bodech.
V zjednodušené programátorské řeči to funguje takto – zeptej se prohlížeče otázku, pak udělej krok X, pouze pokud je odpověď Y.
V praxi by to vypadalo takto:
Jaké je aktuální rozlišení obrazovky? Pokud je odpověď například „>400 pxl”, CSS rozdělí obsah do dvou sloupců. Pokud je odpověď „<400 pxl”, obsah se zobrazí v jednom delším sloupci.
Breakpointy však používejte s rozumem. Pokud jich přidáte příliš, stránka může působit chaoticky, což v konečném důsledku ovlivňuje celou uživatelskou zkušenost.
Obrázky, videa a jiná média jsou nedílnou součástí každé stránky. Při vývoji nového responzivního webu je proto nutné zajistit, aby i obrázky či média byly optimalizovány. Tato vlastnost umožňuje přizpůsobit jejich rozlišení a zároveň stanovit rychlost načítání v závislosti na zařízení.
Výhodou responzivních obrázků je zachování jejich vizuální kvality.
Super příkladem dobře zvládnutého responzivního designu je DropBox. Stránku na sdílení a odkládání souborů využívá celý svět na desktopu, tabletu a stále častěji také prostřednictvím mobilní aplikace.
Detaily, na které při responzivním webu nesmíme zapomínat
Responzivní web není jen o přizpůsobování rozlišení. Při programování takové webové stránky sice eliminujeme nutnost samostatné desktopové a mobilní verze, ale na povrch se vynořují i jiné, velmi podstatné, detaily.
Myš vs. touchpad
Při desktopových počítačích a laptopech uživatel potřebuje „myšku” (nebo touchpad) na pohyb po obrazovce a výběr objektů. Tablety a smartphony však fungují na dotyk prstu, který není tak přesný jako kurzor myši.
Při designování responzivní webstránky pro mobily a tablety je proto důležité myslet na detaily. Obrazovky smartphonů jsou menší, o to důležitější je dostupnost a velikost klíčových buttonů či navigační lišty.
Rychlost načítání
Uživatelé mobilních telefonů očekávají, že jejich výkonnost bude srovnatelná s tou počítačovou, což potvrzují i odborníci z Googlu. Ti tvrdí, že průměrný čas načítání webové stránky na mobilním zařízení je 22 sekund.
Avšak až 53 % uživatelů ze stránky odchází, pokud se na ní do 3 sekund nic nezobrazí.
Dobu načítání webu ovlivňuje také velikost grafiky a obrázků, proto při mobilní verzi webu doporučujeme vsadit na jednoduchou grafiku a méně obrázkového materiálu.
White spaces
Jedním z cílů responzivních webů je poskytnout návštěvníkovi plnohodnotný zážitek. White spaces, neboli bílá místa na webu, slouží jako akcent, který pomáhá návštěvníkům soustředit se na obsah webu.
Prakticky řečeno, při responzivním designu je třeba uhlídat si odsazení (mezery) a přizpůsobit velikost písma i řádkování rozložení obrazovky. Neexistuje žádný dohodnutý poměr, který by určoval množství white spaces na stránce.
Jediným spolehlivým měřítkem jsou vaše oči.
Proč vsadit na responzivní design?
- Zvýšení web traffic díky mobilním zařízením (vzpomeňte si na statistiku o využívání internetu). Téměř každý má dnes chytrý telefon, který používá mnohem více než počítač. Opět platí – buďte tam, kde je cílová skupina.
- Prohlížení responzivních webových stránek na mobilech či tabletech má nižší bounce rate (s čímž souvisí i rychlost načítání webu).
- Jednodušší uživatelská zkušenost – mobilní verze webu je nejen jednodušší „na údržbu”, ale také mnohem přehlednější. Kvůli rychlosti načítání stránky má web jen to nejpodstatnější, co může návštěvníka zajímat.
- Lepší SEO – Google podporuje responzivní webové stránky tím, že jim poskytne lepší pozice ve vyhledávání bez ohledu na to, přes které zařízení uživatel vyhledává. Proč? Misí Googlu je shromažďovat a organizovat relevantní informace, tak aby byly dostupné odevšad.
- Nejen z hlediska SEO je responzivní design efektivní. Oceníte ho i při naplňování, protože stačí obsah publikovat pouze jednou. Navíc se nestane, že na něco zapomenete. Jednotný design i obsah přístupný z různých zařízení vyvolává dojem silné a stabilní značky, která má přehled a vychází zákazníkům vstříc.
- Pro developery mají responzivní weby (kromě jiných) jednu hlavní výhodu. Jedna stránka, jeden kód, což je velmi užitečné především z pohledu případných oprav nebo doplňování nových informací na web.
Responzivní design je dnes nutností pro jakýkoliv typ webu. Nezáleží na tom, jestli prodáváte produkt nebo službu, responzivní design pomůže zvýšit návštěvnost webu a navíc je „search friendly”. Důležité je však myslet na každou maličkost, protože kromě jednoduchého ovládání musí web vypadat skvěle na všech zařízeních.
