Responzívny web je taký, ktorý sa vie automaticky prispôsobiť zariadeniu, na ktorom je zobrazený. Toto riešenie prináša so sebou veľké množstvo výhod, no vytvorenie takejto webstránky je časovo náročnejšie ako klasická verzia.

Jednou z hlavných výhod tohto riešenia je, že odpadá potreba riešiť separátne HTML pre mobilnú verziu stránok a môžeme zvýrazňovať prvky, ktoré sú pre užívateľov na konkrétnom zariadení dôležité. V opačnom prípade vypustiť tie, ktoré dôležité nie sú.

Ako na to?
Najjednoduchší spôsob, ako riešiť responzívny web, je využiť niektorý z CSS frameworkov, ktoré ponúkajú veľa funkcií, majú pripravené responzívne prvky a je ich možné škálovať podľa toho, čo na konkrétnej stránke využijeme. Medzi najznámejšie frameworky patria Twitter Boostrap a Foundation. Na otázku, ktorý z nich je lepší, neexistuje jasná odpoveď. Stačí si troška pogoogliť a je jasné, že každý má iného favorita. Osobne používam práve Twitter Bootstrap.

Pri responzívnom dizajne využívame vo veľkej miere media-query, cez ktoré môžeme určiť, ktorý obsah zobrazovať na akom zariadení (podľa veľkosti).
Príklad media query: @media (max-width: 768px) { … }

Ako úplne prvú vec pri začiatkoch s responzívnym dizajnom vám odporúčam vytvoriť si najprv v novom projekte Grid, ktorému nastavíte pravidlá. Tento Grid nám neskôr umožní rýchlejšiu tvorbu podstránok a zaručí, že sa layout bude správať rovnako na všetkých podstránkach. Spomínané frameworky obsahujú prepracovaný Grid systém s pravidlami správania pre jednotlivé zariadenia.

Mobile first a optimalizácia
Pomerne nová technika vytvárania responzívnych webov je mobile first. Už samotný názov naznačuje, že začíname kódiť web len pre mobilné telefóny. Dôvod, prečo existuje aj tento spôsob kódovania, je jednoduchý. Keď si prezeráme webstránky cez mobil, zvyčajne nie sme pripojení na wifi sieť, ale ideme cez dátové balíčky mobilných operátorov. Tie nie sú zrovna najlacnejšie a najrýchlejšie (pomer cena/výkon). Pri mobile first píšeme CSS pre mobil a jeho vlastnosti overridujeme pre zariadenia iných veľkostí (tablet, notebook, desktop).

Príklad mobile first kódu:

/* Malý obrázok pre mobil */
.moj-obrazok { background: #fff url(‘mobilny-obrazok.png’) no-repeat; }

/* Obrázok pre defaultnú verziu (viac ako 768px) */
@media (min-width: 768px) {
.moj-obrazok { background: #fff url(‘obrazok.png’) no-repeat; }
}

Takto docielime, že sa nám renderuje len malá časť kódu, menšie obrázky atď., a len v prípade, že spĺňame podmienku (min-width: 768px), načítavame zvyšok CSS.

Ako si efektívne otestovať svoj responzívny dizajn?
Pri testovaní responzívneho dizajnu sa vám určite zíde nástroj, ktorý zmenší okno webového prehliadača tak, aby bola veľkosť stránky rovnaká ako na zariadení, ktoré chcete testovať. Pre Google Chrome je to napríklad Window Resizer. Na komplexnejšie testovanie v rôznych prehliadačoch, zariadeniach a rozlíšeniach však odporúčam Browserstack.com.

Ak máte skúsenosti s tvorbou responzívneho webu, podeľte sa s nami o vaše skúsenosti v komentároch.

Komentáre