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ě.
AKTUALIZOVÁNO: Blogový článek jsme původně publikovali 26.2.2020 a aktualizovali 15.3.2024.
Co je responzivní design?
Responzivní design je technika navrhování webových stránek, která umožňuje jejich automatické přizpůsobení různým velikostem obrazovek. To znamená, že vaše webová stránka bude vypadat skvěle a fungovat bezproblémově na počítači, tabletu, smartphonu a jakémkoli jiném zařízení, které vaše publikum používá.
Základní vlastnosti každého responzivního designu
Responzivní design se přizpůsobuje aktuální šířce obrazovky, čímž zajišťuje, že webová stránka vypadá dobře na všech používaných zařízeních:
- monitoru počítače,
- tabletu,
- smartphonu.
Šířka obrazovky hraje v tomto případě hlavní roli zejména 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řemísťují na úplně jiné místo nebo schovávají.
Č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é.
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á, ž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 nezaregistruje. Z tohoto důvodu je nezbytné dělat zejména 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.
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čítá při jiném rozlišení.
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ň v 2x větším rozlišení. Tento postup je dobré následovat zejména 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ý.
Navigace na stránce a responzivní menu
Navigace je jedním z nejdůležitějších prvků stránky. Jejím hlavním úkolem je umožnit uživatelům jednoduchou orientaci na webu a nasměrovat 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é megamenu však není vhodné používat v případě mobilních rozlišení. Megamenu je v těchto případech nahrazeno tzv. hamburgerovým menu. Jeho název je odvozen od ikony, 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 prstem z boku do středu stránky.
Technologické řešení
Při programování responzivního webu má každý programátor k dispozici dva 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 již 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 odznova. 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 zejména 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 zejména v případech, kdy s jistotou víme, že bychom nevyužili ostatní prvky nacházející se v Bootstrape. Nevýhodou CSS grids je však slabší podpora starších verzí Internet Exploreru.
Dopady na SEO
Mít responzivní web je důležité i z pohledu SEO - optimalizace pro vyhledávače. Google při indexování stránky významným způsobem zohledňuje index použitelnosti webu na mobilních zařízeních, což si lze kdykoli jednoduše otestovat. Google zároveň upřednostňuje webové stránky, které jsou příjemnější na používání pro uživatele. V případě, že vyhledáváme určitý výraz na mobilním zařízení, tak preferuje weby, které jsou co nejvíce optimalizované pro mobily nebo tablety.
Adaptivní design
V praxi se vyskytují alternativní způsoby optimalizace webové stránky. Jednu z takových alternativ představuje i adaptivní design. Tento způsob využívá zejména Javascript, který při detekci mobilního zařízení nebo menšího rozlišení popřehazuje a přizpůsobí jednotlivé prvky takovým způsobem, aby byly zobrazeny ideálně pro ten-který displej. Adaptivní design však není však vhodné používat jako samostatné řešení. Hlavním důvodem je, že webová stránka se nejprve zobrazí v desktopové verzi. Až po načtení Javascriptů se pak jednotlivé prvky popřehazují a web se přizpůsobí pro menší obrazovky. Adaptivní design však lze použít jako doplňkový přístup k responzivnímu webu, a to zejména při řešení některých případů, kdy se nelze vyhnout použití Javascriptu.
Mobilní web
V minulosti nebyl responzivní design běžným standardem. Webové stránky tak využívaly mobilní verzi webu, která se nacházela na samostatné URL adrese jako například: m.neco.cz. Výhodou tohoto způsobu implementace je, že HTML a CSS jsou pro standardní a mobilní zobrazení zcela oddělené. De facto jsou pak jednodušší pro celkovou implementaci. Prohlížeč vždy stahuje jen kód určený pro dané zobrazení, zatímco při responzivním designu stahuje celý kód.
Negativem tohoto řešení je však náročnější udržitelnost kódu. V případě, že se něco změní na desktopové verzi, je nezbytné provést stejnou změnu i na mobilní verzi. Rozhodnutí o tom, která verze stránky se uživateli zobrazí, se realizuje na serveru a ne na používaném zařízení. Může se přitom stát, že detekce mobilního zařízení nezafunguje správně.
Za největší nevýhodu tohoto řešení považujeme negativní vliv na SEO. Každá webová stránka má dvě URL adresy (jednu určenou pro mobilní a jednu pro standardní zobrazení). Stejně negativní vliv má na rychlost stránky. Pokud přijde uživatel z mobilního zařízení na standardní verzi stránky, je potřeba ještě dodatečné přesměrování.
Responzivní design v ui42 a podpora ze strany BUXUSu
Všechny webové stránky, které vytváříme v ui42, jsou standardně plně responzivní. Samotné základní šablony v CMS BUXUS jsou postaveny na Bootstrape a tedy jsou také responzivní. Nikdy přitom nezapomínáme ani na rychlost webu. BUXUS dokáže automaticky měnit velikost obrázků tak, aby se zbytečně nestahovaly příliš velké obrázky. Načítání Javascriptů řešíme nejčastěji pomocí requirejs, takže použití Javascriptů jako součást adaptivního designu webové stránky nezpomaluje.
Překážkou responzivního webu však není ani případ, kdy nepoužíváme náš CMS BUXUS. Jedním ze skvělých případů takové práce je vysoce responzivní design a frontend realizovaný pro netradiční švýcarskou cestovní kancelář Risskov-Bilferie.
Proč investovat do responzivního designu?
- Výrazně zlepšuje použitelnost webu pro návštěvníky na mobilních zařízeních.
- Snižuje se bounce rate - z neresponzivní stránky lidé odcházejí dříve než z responzivní.
- Zvyšují se konverze při e-shopech.
- Zvyšuje se rychlost webu.
- Zlepšuje se SEO - Google zohledňuje vyšší rychlost načítání webové stránky i celkově lepší uživatelský zážitek.
- Nabízí možnost získat více vracejících se / loajálních návštěvníků.
Pokud chcete, aby vaše webová stránka byla úspěšná v dnešním digitálním světě, responzivní design je absolutně nezbytný.
