Jak na responzivní webové stránky

Responzivní web je takový, který se umí automaticky přizpůsobit zařízení, na kterém je zobrazen. Toto řešení s sebou přináší velké množství výhod, ale vytvoření takové webové stránky je časově náročnější než klasická verze pro stolní počítače.

Jednou z hlavních výhod tohoto řešení ale je, že odpadá potřeba řešit separátně HTML pro mobilní verzi stránek. Můžeme pouze zvýrazňovat prvky, které jsou pro uživatele na konkrétním zařízení důležité. V opačném případě vypustit ty, které důležité nejsou.

Jak na to?

Nejjednodušší způsob, jak řešit responzivní web, je využít některý z CSS frameworků. Ty nabízejí mnoho funkcí, mají připravené responzivní prvky a je možné je škálovat podle toho, co na konkrétní stránce využijeme. Mezi nejznámější frameworky patří Twitter Boostrap a Foundation. Na otázku, který z nich je lepší, neexistuje jasná odpověď. Stačí si trošku pogooglovat a je jasné, že každý má jiného favorita. Osobně používám právě Twitter Bootstrap.

Při responzivním designu využíváme ve velké míře media-query, přes které můžeme určit, který obsah zobrazovat na jakém zařízení (podle velikosti).

Příklad media query: @media (max-width: 768px) { … }

Jako úplně první věc při začátcích s responzivní designem vám doporučuji vytvořit si nejprve v novém projektu Grid, kterému nastavíte pravidla . Tento Grid nám později umožní rychlejší tvorbu podstránek a zaručí, že se layout bude chovat stejně na všech podstránkách . Zmíněné frameworky obsahují propracovaný Grid systém s pravidly chování pro jednotlivá zařízení.

Optimalizace a mobile first

Poměrně nová technika vytváření responzivní webů je mobile first. Už samotný název naznačuje, že začínáme kódovat web pouze pro mobilní telefony. Důvod, proč existuje i tento způsob kódování, je jednoduchý. Když si prohlížíme webové stránky přes mobil, obvykle nejsme připojeni na wifi síť, ale fungujeme přes datové balíčky mobilních operátorů. Ty nejsou zrovna nejlevnější a nejrychlejší (poměr cena/výkon). Při mobile first píšeme CSS pro mobil a jeho vlastnosti override pro zařízení jiných velikostí (tablet, notebook, desktop).

Příklad mobile first kódu:

/* Malý obrázek pro mobil */
.muj-obrazek { background: #fff url(‘mobilni-obrazek.png’) no-repeat; }

/* Obrázek pro defaultní verzi (viac ako 768px) */
@media (min-width: 768px) {
.muj-obrazek { background: #fff url(‘obrazek.png’) no-repeat; }
}

Takto docílíme, že se nám renderuje jen malá část kódu, menší obrázky atd. A pouze v případě, že splňujeme podmínku (min-width: 768px ), načítá zbytek CSS.

Jak si efektivně otestovat svůj responzivní design?

Při testování responzivního designu se vám určitě hodí nástroj, který zmenší okno webového prohlížeče tak, aby byla velikost stránky stejná jako na zařízeních, která chcete testovat. Užitečným plug-inem pro Google Chrome je to například Window Resizer. Na komplexnější testování v různých prohlížečích, zařízeních a rozlišeních však doporučuji Browserstack nebo jednoduchý Responsinator. Mimochodem, zkuste si, jak v Responsinatoru vypadá náš web..

Pokud máte zkušenosti s tvorbou responzivního webu, podělte se s námi o vaše zkušenosti v komentářích. Díky!