Responzivní webdesign

Responzivní webdesign je způsob stylování HTML dokumentu (webové stránky), které zajišťuje bezproblémové zobrazení obsahu pro všechny druhy zařízení - stolní počítače, notebooky, mobilní telefony i tablety.

Většina internetových návštěv přichází z mobilních zařízení

Potřeba responzivního webdesignu získala na důležitosti zejména s rozvojem a masovým využitím mobilních technologií. Celosvětově tvořila mobilní zařízení v roce 2018 celých 52 % internetové návštěvnosti (zdroj: Statcounter). Na stolní počítače a notebooky připadlo již "jen" 48 % návštěv. Více jak polovina všech přístupů k internetu tedy probíhá přes mobilní telefony a tablety. Díky tomu je responzivní zobrazení nutností prakticky pro všechny webové stránky.

Pro Google je nejdůležitější mobilní verze webu

Vzhledem k výše uvedenému trendu došlo v druhé polovině roku 2018 ke změně i ze strany vyhledávače Google, který začal používat tzv. mobile-first indexing. Znamená to, že webové stránky jsou nyní do vyhledávání Google řazeny dle mobilní verze webu. Z pohledu této změny je třeba brát v úvahu práci s obsahem, protože pokud ve verzi webu pro mobilní telefony skryjete obsah, nedojde k jeho zaindexování.

Jak se responzivní webdesign tvoří

Z hlediska samotné tvorby webu je možné rozlišit dva přístupy - desktop first a mobile first. Již z názvů obou přístupů je patrný rozdíl. V případě desktop first dochází nejprve k tvorbě obsahu a grafiky pro stolní počítače a až poté se kóduje responzivní zobrazení. Zcela opačně postupuje novější mobile first přístup. Nejdříve se kóduje obsah a vzhled pro mobilní zařízení, kdy se začíná od těch nejmenších a postupuje se vzhůru k těm s vyšším rozlišením. Hlavní výhodou mobile first přístupu je, že pro mobilní zařízení se často eliminují přebytečné prvky, které uživatel na mobilním zařízení nevyužije. Web se tak na telefonech a tabletech stává přehlednějším a lépe použitelným, jelikož se uživateli zobrazují pouze podstatné prvky, které by mohl hledat.

Typické znaky responzivního designu

• Hlavní navigace je schovaná do tzv. burger menu (ikona tří vodorovných čárek, ideálně doplněna o popisek “Menu”).
• Prvky obsahu se přizpůsobují velikosti zařízení a nezávisle na systému - iOS, Android a další.
• Skrývání prvků s dlouhým načítáním, jako jsou animace a chatovací nástroje atd.
• Možnost zoomování a zvětšování obsahu pomocí dvou prstů.
• Optimalizace obrázků - zamezení načítání obrázků v plné velikosti kvůli spotřebě mobilních dat.
• Úprava obsahu z hlediska adekvátního kontrastu, čitelnosti - velikost a barva písma.
• Jednoduchá ovladatelnost - důležité prvky (menu, odkazy) musí být v dosahu palce ruky.
• Ve formulářích se přizpůsobuje klávesnice mobilního zařízení (např. u pole telefon se zobrazí pouze numerická klávesnice).
• Při kódování webu se používají relativní jednotky - em, rem, %, vw, vh.
  
  

Media Queries

Při tvorbě responzivní podoby webu se používají speciální zápisy CSS pomocí tvz. media queries. V media queries je možné definovat podmínky, při kterých se mají styly aplikovat. Zápis stylu vždy začíná pravidlem @media, které určuje, že se jedná o stylování pro určité médium/zařízení. Za toto pravidlo je potřeba vložit další specifikaci, podle které se určí způsob zobrazení. Jde např. o zápisy:

• all = všechny typy zařízení
• screen = specifikace displeje zařízení
• print = tiskárna
• projection = projektor
• braille = zařízení s Braillovým písmem atd.

V případě webových stránek se nejčastěji využívá zápis screen. Dále se pomocí specifikace šířky displeje nastavují hranice (tzv. breakpointy), pro které daný styl platí. Např. (min-width: 320px) and (max-width 550px) je zápis, při kterém se stylování bude aplikovat na displeje se šířkou od 320px do 550px. Jednotlivá pravidla tzv. media features se spojují logickou spojkou AND nebo OR.

Příklad: zápis CSS pro zařízení se šířkou do 550px

Na webu máme definovaný nadpis h1 v bílé barvě. V responzivní verzi webu pro zařízení se šířkou displeje do 550px se však nebude zobrazovat obrázek na pozadí a pro zachování čitelnosti tedy bude potřeba nadpis nastylovat do černé barvy. Zápis CSS by byl následující:

Podrobnější popis problematiky a návod k Media Queries najdete na w3schools.com.

Responzivní design a rychlost načítání stránek

Responzivní webdesign je velice úzce spjat s rychlostí načítání webu. Pokud při cestě ve veřejné dopravě hledáte informace na telefonu a máte omezené datové připojení, záleží na každém kilobajtu souborů, které se pro zobrazení webu stahují. Když bude uživatel při načítání webu čekat déle než 5-10 vteřin, je velmi pravděpodobné, že Váš web opustí a půjde informace/produkt hledat ke konkurenci. To zpravidla zásadně ovlivňuje také komerční výkon a konverzní poměr webu.

Kde se můžete dozvědět více:

https://www.stonetemple.com/mobile-vs-desktop-usage-study

http://www.prima-web.cz/web-design/proc-radeji-responsivni-design-nez-pouze-originalni-grafiku.html

http://jecas.cz/mobile-first

Kniha Vzhůru do responzivního designu od Martina Michálka