Co je responzivní web a proč je dnes nutností

Co je responzivní design, uživatelský prožitek

Responzivní design bere do úvahy všechna možná zařízení, přes která může uživatel na web přistupovat (telefony, tablety, chytré hodinky, televize, čtečky knih, ...) a nehledě na to, na jakém zařízení si web prohlíží, mu nabídnout co nejlepší uživatelský prožitek. A to tak, že se přízpůsobí - zejména velikosti displeje a dostupným ovládacím prvkům zařízení (myš, dotyková obrazovka, ...). Nejenže se zobrazí na daném zařízení perfektně, ale také dokáže využít jeho vlastností a brát v potaz nedostatky (např. pomalejší mobilní internetové připojení).

Uživatelský prožitek

Uživatelský prožitek pochopíte nejlépe sami. Zkuste přes mobil jít na nějaký neresponzivní web (je jich ještě opravdu hodně) a poté na nějaký web responzivní (naštěstí už jich taky přibývá). Na kterém z nich jste se rychleji zorientovali? Na kterém jste se dříve dostali k obsahu, kvůli kterému jste přišli? Se kterým jste pracovali intuitivně a naopak museli věnovat práci s ním větší pozornost? To vše a ještě více tvoří váš uživatelský prožitek.

Jde tedy o to, abyste se dostali k obsahu, kvůli kterému jste na web přišli a to jednoduše a bez překážek.

Responzivní design je nutností - roste podíl mobilních zařízení

Nebudu nijak dlouhosáhle obhajovat myšlenku responzivního designu - to totiž ani není nutné. Responzivní design je nutností v době, kdy počet uživatelů přistupujících na web z mobilních zařízení překonal počet užviatelů na klasických desktopech.

Přístupy a metody responzivního designu

Mobile-first přístup

Dlouho dominantním přístupem bylo navrhovat stránku pro zobrazení a použití na počítači. S razantním nástupem mobilních zařízení a s ohledem k tomu, že jsou do určité míry stále omezená (hlavně ta starší), začal se prosazovat přístup mobile-first.

Web navrhujete (kódujete) nejprve pro mobilní zařízení, aby byl zajištěn základní uživatelský prožitek a poté přidáváte pravidla pro větší zařízení typu počítač. Jde o to, že některá historická zařízení nebyla schopna zpracovat mediální dotazy (viz dále) a proto, pokud výchozí styl byl pro desktop a mobilnímu zařízení se přizpůsoboval až mediálními dotazy, mohlo to způsobovat špatné zobrazení webu.

Mobile-first přístup sám je na delší povídání a chystám o něm samostatný článek.

Relativní míry a pozicování

V responzivním designu zapomeňte na stanovování pevných rozměrů elementů stránky a používání pixelových jednotek. To se týká stylovacího jazyka CSS. V responzivním designu se používají relativní míry (např. obsahový sloupec webu bude široký 75 %, postranní sloupec 25 %). Pixelové jednotky px nahrazuje také jednotka em a rem. O jednotkách v CSS se můžete dozvědět více na stránkách w3schools.coma.

Mřížka

Oblíbeným konceptem, který navíc přináší do návrhu webu tak důležitý řád je fluidní mřížka. Webová stránka je rozdělena do nejčastěji 12 sloupců (tedy každý 8,33% šířky stránky) a jednotlivé elementy (hlavička, postranní panel, obsahový panel a další) pak zabírají určitý počet sloupců.

Podrobnější vysvětlení konceptu je opět na samostatný článek.

Mediální dotazy

Dostáváme se k velmi důležitému nástroji responzivního designu, jakým jsou mediální dotazy uvedené v CSS3. Díky nim můžete určit, jaký styl pro daný element webové stránky se aplikuje v případě různých zařízení. Určíte tak např. že postranní panel webu bude mít šířku 100 % a bude pod obsahovým panelem, ale pokud uživatel přistoupí na web ze zařízení se šířkou obrazovky vyšší než např. 768 pixelů, zobrazí se tento panel vpravo od obsahového panelu a bude široký např. 30 % šířky stránky.

Můžete určovat zda-li se styl aplikuje podle šířky obrazovky, výšky obrazovky, orientace, typu zařízení apod. Používají se také maximální a minimální hranice, jako na příkladu níže:

@media screen and (min-width: 64em) {
    .pravy-panel {
        width: 30%;
        float: right;
    }
}

V tomto případě se pravidlo stylu použije pouze v případě, že okno prohlížeče bude široké alespoň 64em, tedy 1024 pixelů (1em = při 100% výchozí velikosti písma 16 px).

Hranice, na kterých se mění chování designu webu (obvykle šířka okna prohlížeče) nazýváme breakpointy. Na uvedeném příkladě byl breakpoint na šířce okna prohlížeče 64 em.

Responzivní obrázky

Je sice krásné, že budeme mít responzivní hlavní elementy webu (jednotlivé panely), ale to nic nemění na tom, že i při jejich přizpůsobení oknu prohlížeče se ve výchozím nastavení nepřizpůsobí obrázky. Zde je naštěstí řešení poměrně jednoduché. Řekneme prohlížeči, že obrázek ma být maximálně tak široký, jako jeho obalující element (tedy např. panel ve kterém je umístěn):

img {
    max-width: 100%;
}

Ano, to je celé. Řešit bychom mohli ještě servírování obrázků podle velikosti obrazovky zařízení, abychom jej nenutili zbytečně stahovat obrázek určení pro větší zařízení.

Meta tag viewport

Pokud jste zkoušeli vytvořit svůj vlastní responzivní web, možná jste narazili na to, že i tak se při prohlížení z mobilního zařízení zobrazil "oddálený", aby se celý vešel do okna prohlížeče. Toto se dá naštěstí jednoduše ošetřit <meta> tagem viewport. Do hlavičky HTML dokumentu vložte tento meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Díky němu se velikost stránky nastaví na šířku zařízení (width=device-width) a zoom na výchozí hodnotu 1 (initial-scale=1.0).

Neskrývejte obsah

Responzivní webdesign by ale neměl být o skrývání obsahu. Uživatel by měl šanci získat stejný obsah, ať již přichází na jakémkoliv zařízení. Můžete potlačit některé designové efekty, ale vašim úkolem je, aby uživatel nebyl ochuzen o žádný důležitý obsah!

Kde zjistit o responzivním webdesignu více

Za následující zdroje dám ruku do ohně - jsou opravdu výborné pro to, abyste začali dělat responzivní weby!

• Responsive Web Design w3schools.com
• Responzivní design - profesionálně od Tima Kadlece
• https://responsivedesign.is/