Co znamená responzivní web a proč ho chtít?

Responzivní webdesign patří již řadu let mezi nejdiskutovanější témata tvorby webu. Responzivní weby, které se bez problémů přizpůsobí jakékoli velikosti displeje, se postupem času staly standardem a mají stále větší vliv na umístění ve výsledcích vyhledávání. Pojďme se nyní blíže podívat na to, co pojem responzivní web označuje a na tipy, jak přistupovat k jeho návrhu či tvorbě.

Co je responzivní web

Responzivní web (někdy také mobilní web nebo webdesign) lze jednoduše vysvětlit jako webové stránky, jejichž vzhled a prvky se přizpůsobí jakémukoli displeji. Nezáleží tedy na tom, zda stránky navštívíte z počítače s 22“ monitorem, 15,6“ notebookem nebo 10“ tabletem. Obsah se vždy přestylizuje tak, aby vypadal dobře a snadno se ovládal na všech zařízeních.

Responzivní web vychází z trendu procházení internetu prostřednictvím smartphonu či tabletu. Tento trend započal příchodem iPhonu, přičemž výzkumy z roku 2018 prokazují, že více jak 50 % uživatelů k nákupu na e-shopech nebo pro hledání informací online využívá právě mobilní zařízení. Na tento fakt je tedy třeba reagovat a uzpůsobit vzhled obsahu i způsob ovládání webu menšímu displeji.

S rozšířením Internetu věcí (IoT) se postupně přidávají i další zařízení, jako jsou SmartTV, chytré hodinky – například Apple Watch nebo čtečky elektronických knih. Všechna tato zařízení mají různá rozlišení displeje i úhlopříčku a zachování jediné podoby webu by manipulaci se stránkou značně ztížilo. Responzivní webdesign tedy již v základu počítá spíše s vertikálním rozložením obsahu – scrollování nahoru a dolů či možností zoomování.

Responzivní web nebo e-shop je uzpůsoben ovládání prostřednictvím dotykového displeje čili prstem. Od toho se odvíjí vzhled jednotlivých prvků, jako jsou tlačítka a menu. Důležité je zde pravidlo intuitivního ovládání, přičemž by mobilní web měl být designován tak, aby se uživatel okamžitě zorientoval. Obsahově by stránky měly nabídnout totožné možnosti pro všechna zařízení, aby uživatelé mohli plynule přecházet mezi desktopem a třeba tabletem.

Responzivní weby jsou realizovány tak, aby při načítání stránky rozpoznaly konkrétní zařízení a zobrazení přizpůsobily šířce okna. Každý responzivní web je tak v podstatě tvořen na míru konkrétnímu uživateli. Přináší lepší uživatelský zážitek (UX) a utváří potenciál pro další návštěvu webu nebo dokončení nákupu.

Znaky responzivního webu lze shrnout do třech bodů:

• Flexibilní struktura – šířka jednotlivých komponent není pevně stanovena, nýbrž vychází z procentuálního výpočtu maximálního rozměru. Konkrétní podoba se proto odvíjí od velikosti a rozlišení displeje, přičemž je možné v rámci webu obsah libovolně přiblížit nebo oddálit.
• Flexibilní obrázky – stejná charakteristika jako pro strukturu platí také pro obrázky, jejichž velikost by měla opět vycházet z velikosti daného displeje.
• Media Queries – základem jsou takzvané mediální dotazy, jež jsou součástí CSS již od verze CSS3. Media Queries slouží jako nástroj pro zjištění zmíněných informací o použitém prohlížeči (například Google Chrome), zařízení (například smartphonu), orientaci zařízení (držení na šířku nebo na výšku) a rozlišení.

Výhody responzivity aneb mobilní web a Google

Mobilní weby tedy vznikly ze snahy o dosažení co možná nejlepšího uživatelského zážitku a jako reakce na vývoj technologií či rozšířeních dotykových zařízení. Toto rozšíření vnímá také Google, který již už roku 2014 přizpůsobení webů mobilům vnímá jako kladný faktor v rámci ohodnocení stránek. Responzivní weby se proto umisťují na vyšších příčkách ve vyhledávání.

Zájem Googlu potvrzuje i oficiální prohlášení, ve kterém oznamuje, že od září 2020 začne indexovat stránky právě podle mobilního zobrazení. Apeluje na responzivitu, která zajistí konzistentní podobu obsahu, struktury a metadat. Weby, které nebudou nové standardy splňovat budou penalizovány a posunou se z prvních stránek vyhledávání. To může mít negativní dopad na návštěvnost webu a s tím i na konverze.

Jedná se o dovršení vývoje, jež započal původním označováním „mobile friendly“ stránek ve výsledcích. Již tímto krokem upřednostňoval mobilní weby a zvyšoval potenciál pro jejich návštěvnost. Dnes však již responzivitu bere jako samozřejmost a chce proto utvořit zcela nový standard, který počítá s dalším nahrazováním počítačů tablety a smartphony, stejně jako s dalším rozšířením IoT - Internetu věcí.

Výhody responzivního designu tedy spočívají v lepším UX a vyšší šanci na lepší umístění ve vyhledávačích. Existují ovšem i další faktory:

• Přístupnější obsah – mobilní web si mohou uživatelé zobrazit takřka odkudkoli. Nezáleží tedy na tom, zda si novou televizi kupují z domova nebo třeba během jízdy tramvají z práce. Pokud je tak webová stránka přizpůsobena smartphonům, má potenciál pro větší počet návštěv.
• Obsah nezávislý na zařízení - responzivní web je připravený na příchod jakéhokoli nového zařízení. Při rozšíření nového typu elektroniky není třeba stránky dále upravovat.
• Redukce duplicitního obsahu – responzivita odstraňuje nutnost tvorby speciálního webu vytvořeného pro mobilní zařízení. Usnadňuje se tím indexování Googlebotem a sjednocují URL.
• Mobilní PPC  - možnost využití mobilních PPC reklam.

Zásady responzivního designu

• Přehledná navigace – typicky hamburgerové menu,
• přizpůsobení prvku nezávisle na zařízení a na OS,
• eliminace prvků s delším načítáním,
• možnost zoomování obsahu,
• optimalizace obrázků různým displejům,
• čitelnost obsahu na všech zařízeních.

Tipy jak přizpůsobit web mobilům

Předchozí odstavce již naznačily důležitost tvorby responzivního webdesignu, respektive zpřístupnění obsahu mobilním zařízením. K tomuto cíli lze dojít několika způsoby. Prvním z nich, je vývoj mobilní aplikace na míru, která bude obsah prezentovat. Aplikace nabízí maximální míru přizpůsobení tabletu nebo smartphonu a využití veškeré jeho funkcionality. Použití je ovšem podmíněno instalací, což může řadu uživatelů odradit.

V mnoha případech je proto vhodnější webová varianta zpracování, jež je dostupná i bez instalace a v podstatě odkudkoli. V zásadě existují dva způsoby, kterými lze k tvorbě mobilního webu přistupovat. První z nich je obecně nazýván „desktop first“ a druhý „mobile first“. První zmíněný je starší a návrh zde začíná verzí pro počítače. Mobilní web pak vzniká osekáním již hotového řešení. Vytvoří se duplicitní obsah, který je umístěn na subdoménu – typicky m.example.com. 

Desktop first přístup se využívá zejména při snaze o co možná nejrychlejší řešení, případně u složitějších webů. Google však doporučuje spíše druhou zmíněnou variantu – mobile first. V tomto případě se jedná o zcela nový web, který je již tvořen podle zásad responzivního webu. Zatímco původní princip postupoval od největšího k nejmenšímu, novější varianta začíná u nejmenšího a postupuje k největšímu.

Mimo rozložení jednotlivých prvků se responzivita vztahuje také na obsah – texty a obrázky. Obrázky by měly být ideálně bez textu, případně s dostatečně čitelným fontem i na malém 5,6“ displeji mobilního telefonu. Současně by měly být všechny ilustrace komprimované, aby nezpomalovaly rychlost načítání webu. Vhodným formátem je zde SVG, jež nabízí lepší vykreslení i na jemných displejích a mají menší velikost.

Přizpůsobovat by se měla také délka odstavců či šířka řádků. Desktopová verze by neměla přesáhnout 75 znaků na řádek a mobilní 50 znaků na řádek. Responzivní design by měl být minimalistický a jednoduchý s dostatkem volné plochy – mezery mezi jednotlivými prvky. Vše by mělo být optimalizováno v souvislosti se SEO, přičemž by měl být důraz kladen na rychlost načítání stránek.

Responzivní web je tak v podstatě kombinací orientace na uživatelský zážitek, znalosti pravidel SEO a přizpůsobení se aktuálním technologickým trendům. V případě, že máte zájem o vytvoření responzivního webu, neváhejte využít naší bezplatné konzultace, kde můžeme společně vytvořit řešení na míru vašim požadavkům.