Proč je responzivní design jedním z nejdůležitějších prvků na webu? 1. část
Google miluje responzivní design. A vy byste ho měli také! Responzivní design není jen o hezkém vzhledu. Zlepšuje SEO a pomáhá vaší stránce dostat se na vrchol vyhledávání. Pokud není vaše webová stránka responzivní, přicházíte o zákazníky. Odhalte tajemství responzivního designu a zajistěte si úspěch v mobilním světě.
V posledních letech zaznamenáváme přibývající počet uživatelů, kteří navštěvují webové stránky z mobilních zařízení. V praxi bychom tak už poměrně těžko hledali aktivního uživatele internetu, který nepracuje se smartphonovým nebo tabletovým prohlížečem. Zároveň s tím se zvyšuje i počet uživatelů, kteří v minulosti vlastnili počítač nebo notebook jen za účelem surfování na webových stránkách. Mnohým z nich už v současnosti stačí jen tablet nebo kvalitní smartphone. Naznačený trend tak představuje klíčový faktor, proč se responzivní web stává nezbytností a novým standardem pro každou webovou stránku.
Základní vlastnosti každého responzivního designu
Responzivní design se přizpůsobuje aktuální šířce obrazovky, čímž způsobuje, že webová stránka vypadá dobře na všech používaných zařízeních:
- monitoru počítače,
- tablet,
- smartphone.
Šířka obrazovky hraje v tomto případě hlavní roli především proto, že z pohledu uživatele není pohodlné scrollovat obrazovku v horizontálním směru. Díky responzivnímu designu se vedle sebe umístěné prvky při plné šířce obrazovky ukládají jeden pod druhý, zobrazují se v tzv. slideru, případně se přemisťují na úplně jiné místo nebo schovávají.
Responzivní design - prvky stránky umístěné vedle sebe při zobrazení na počítači
#1 Čitelnost textu
Uživatelé mobilních zařízení jsou zároveň mnohem citlivější na velikost a kontrast textu v porovnání s uživateli počítačů. Oči lidí, kteří sedí u počítače v konstantní vzdálenosti od monitoru, se umí lépe přizpůsobit a je pro ně proto jednodušší číst i drobnější texty na obrazovce. Pro srovnání, například smartphony jsou běžně používány při chůzi a často i v různých světelných podmínkách. Oči těchto uživatelů se tak musí přizpůsobovat neustále se měnícímu prostředí. Pro tyto uživatele je důležité zobrazovat texty tak, aby byly dobře čitelné a písmo bylo dostatečně velké.
Responzivní design - stránka s množstvím informací ve standardním zobrazení - možnost poskládat relativně velké množství informací vedle sebe a použít přitom menší písmo
Responzivní design - při mobilním zobrazení jsou prvky uspořádané tak, aby byla zachována dobrá čitelnost textů
#2 Klikatelná plocha
Jednou z nejčastějších chyb u málo responzivních webů je příliš malá klikatelná plocha prvků. V praxi se proto uplatňuje jedno známé nepsané pravidlo, které říká o tom, že nejmenší šířka jakéhokoli prvku na mobilu by měla být alespoň 35px. V případě, že je daná plocha menší než 35x35px, může se snadno stát, že uživatel bude mít problém kliknout na takový prvek, nebo ho vůbec neregistruje. Z tohoto důvodu je nezbytné dělat především všechny důležité CTA prvky co největší tak, aby nebyl problém je na první pohled zaregistrovat a kliknout na ně. Podobné pravidlo se aplikuje i na vzdálenosti mezi jednotlivými elementy.
#3 Přizpůsobování obrázků
Každý responzivní web si kromě výše uvedeného vyžaduje i optimalizaci obrázků. Uživatelé mobilních zařízení se často připojují přes mobilní připojení, které je o něco pomalejší. Většinou však přitom nepotřebují obrázky v tak vysokém rozlišení, jako na počítačích a noteboocích. Z tohoto důvodu je vždy vhodné připravit více verzí obrázků, přičemž každá z nich se načte při jiném rozlišení. V HTML to můžeme dosáhnout použitím atributu srcset tak, jak je to zobrazeno na následujícím obrázku:
V tomto případě se zase uplatňuje pravidlo, že pokud se má obrázek zobrazovat v určitém rozlišení, v praxi je vhodné, aby byl tento obrázek alespoň ve 2x větším rozlišení. Tento postup je dobré následovat především s ohledem na rozšíření zařízení s mnohem vyšší hustotou pixelů (např. na Retina displejích na Apple zařízeních), v opačném případě bude obrázek na těchto zařízeních rozmazaný.
#4 Navigace na stránce a responzivní menu
Navigace je jedním z nejdůležitějších prvků stránky. Její hlavní úlohou je umožnit uživatelům jednoduchou orientaci na webu a nasmerovat je k vyhledávaným informacím. Při tvorbě responzivního webu je tak velmi důležité myslet i na správnou navigaci. V případě běžných zařízení s velkými obrazovkami v současnosti následujeme trend preferující tzv. megamenu s množstvím různých položek a obrázků. Takovéto megamenu však není vhodné používat v případě mobilních rozlišení. Megamenu je v těchto případech nahrazené tzv. hamburgerovým menu. Jeho název je odvozen od ikonky, jejíž tvar připomíná hamburger. Při kliknutí se ikona vysune z boční části stránky a zobrazit ji lze i potažením prstu z boku do středu stránky.
Responzivní design - typický příklad megamenu, které obsahuje množství položek a obrázek
Responzivní design - megamenu na mobilní verzi změněné na “hamburgerové” menu
#5 Technologické řešení
Při programování responzivního webu má každý programátor k dispozici dvě základní možnosti. Může si naprogramovat vše sám, nebo sáhnout po některém z dostupných frameworků. Mezi nejznámější z nich patří například Bootstrap, Skeleton, CSS grids a další. Tyto frameworky už obsahují množství různých pravidel, které se aplikují při zobrazení webu v mobilním rozlišení. Výhodou tohoto postupu tak je, že programátor nemusí v každém jednotlivém případě „vymýšlet kolo“ a programovat všechna pravidla znovu. Pomoci si přitom může existujícími pravidly.
V ui42 v našem CMS BUXUS běžně používáme framework s názvem Bootstrap nebo CSS grids. Každý má jiné výhody a nevýhody. Bootstrap používáme především v případech, kdy potřebujeme dobrou podporu prohlížečů a víme využít i jeho další prvky. Bootstrap například obsahuje předpřipravené styly tlačítek a mnoha dalších prvků. CSS grids používáme především v případech, kdy s jistotou víme, že bychom nevyužili ostatní prvky nacházející se v Bootstrapu. Nevýhodou CSS grids je však slabší podpora starších verzí Internet Explorera.
O dopadech na SEO, alternativních způsobech optimalizace, jako i samotném responzivním designu v BUXUSu budeme psát v pokračování tohoto článku, který přineseme za pár dní.
Pokud vás téma zaujalo, neváhejte nás kontaktovat. Rádi vám poradíme.
