Co je responzivní webdesign? Jednoduše řečeno, je to přístup k webdesignu zaměřený na vytváření webů, které lze optimálně prohlížet a snadno s nimi komunikovat na nejrůznějších platformách od desktopu po telefony. Responzivní webdesign (Responsive web design - RWD) si klade za cíl umožnit snadné čtení a  navigaci a také omezit roztahování okna, zabránit rozpadu stránky a omezit rolování nutné k dosažení požadovaného obsahu. V ideálním případě jsou webové stránky optimalizované napříč širokým spektrem zařízení od stolních počítačových monitorů až po malé obrazovky mobilních telefonů. Uživatel může jednoduše měnit velikost okna prohlížeče nebo může otáčet obrazovku na výšku či na šířku apod.

Základní úlohu ve webdesignu představuje způsob rozvržení stránky (Page Layout). V této souvislosti se používají pojmy jako fixní rozložení, statické, tekuté, přizpůsobivé, citlivé a další. Každý typ layoutu se jinak chová při změně šířky okna prohlížeče a při zobrazení na různých obrazovkách. Metody návrhu rozložení stránky se postupně vyvíjeli a dnes jsou nejznámější čtyři hlavní typy layoutů:

Statické rozvržení stránky

Statické rozložení stránky (layout s pevnou šířkou) používá přednastavenou velikost stránky, která se nemění podle šířky okna prohlížeče. Layout má pevnou šířku např. 960 pixelů, bez ohledu na prohlížeč. Takto byly webové stránky tradičně navrhovány po mnoho let, než byly zavedeny moderní techniky, jako dotazy na médium a responzivní konstrukce. V prohlížeči na počítači, pokud je okno příliš malé, se stránka odřízne a zobrazí se vodorovné posuvníky. Na mobilních zařízeních je situace nepředvídatelná, stránka může být např. zmenšená pod hranici čitelnosti a uživatel si musí část stránky zvětšit (zoomovat).

Flexibilní layout

Flexibilní layout (přizpůsobitelný layout, nazývaný i fluid nebo liquid) se vyznačuje tím, že používá relativní jednotky namísto pevných jednotek (místo px se aplikují % a em). Relativní konstrukce elementů stránky se vztahuje k  šířce okna prohlížeče. „Kapalný“ layout nejčastěji vykreslí celou stránku, bez ohledu na to, jaká je šířka prohlížeče. Významné nedostatky se ukážou v případě velmi velkých nebo velmi malých šířek prohlížeče. Na velkoplošných obrazovkách se obsah může roztáhnout příliš široko. Naopak např. u chytrých telefonů se vícesloupcové rozložení může nečitelně smrsknout.

Adaptivní layout

Adaptivní rozvržení stránky využívá CSS dotazů na médium (Media Queries) ke zjištění šířky okna prohlížeče (viewportu) a podle toho přizpůsobí rozložení. Adaptivní layout může používat pevné šířky stejně jako statické uspořádání, ale rozdíl je v tom, že lze nastavit rozdílné velikosti podle konkrétního dotazu na šířku média. Media queries (@media) je logický výraz a v kombinaci s  jinými dotazy na médium tvoří základní algoritmus zobrazení stránky. Např. můžeme použít konstrukci typu: „Pokud prohlížeč je široký 480px, nastav šířku hlavního obsahu na 400px, jestliže prohlížeč je široký 1000px, pak změň šířku hlavního obsahu na 960px“. Ostatní části stránky se mohou přemístit za hlavní obsah nebo se nemusí zobrazit vůbec.

Responzivní layout

Responzivní layout (Responsive Layout) uplatňuje dotazy na médium i  relativní jednotky a jeví se tak jako kombinace flexibilního a adaptivního layoutu. Jak se zvětšuje nebo zmenšuje šířka okna prohlížeče, stránka se přizpůsobuje jako v případě flexibilního layoutu. V případě, že prohlížeč překročí určité šířky definované v dotazu na médium, pak se extrémně změní rozložení stránky a přizpůsobí se široké nebo úzké šířce.

Obvykle je responzivní design postaven na tzv. přístupu „Mobile First“. Mobile first je postup návrhu webu, ve kterém se začíná s layoutem pro malé (mobilní) obrazovky a postupně se návrh rozšiřuje na tablety a desktopy. K  cíli vede samozřejmě i opačný postup, ve kterém se desktopový layout postupně „ořezává“ pro tablet a telefon od rozložení na šířku po zobrazení na výšku.

Responzivní webdesign (RWD)

Předpokladem k vytvoření přizpůsobivého webu je nejen responzivní layout, ale i dodržování dalších zásad. Používání responzivních technik při návrhu webu usnadňuje udělat web tak, aby byl přístupný a použitelný nejen na nemobilních, ale i mobilních zařízeních. Rapidně vzrůstající počet návštěvníků webu z tabletů a telefonů je dostatečný důvod, proč dělat přizpůsobitelné stránky. Frustrace mobilních uživatelů může mít neblahý vliv na návštěvnost webu. Ztracený návštěvník se k nepoužitelnému webu nejspíše již nevrátí. Responzivní způsob návrhu je pro majitele webu z hlediska nákladů daleko příznivější než vytváření specifického mobilního webu. Při návrhu je nutné pamatovat na přístupnost, co je dobré pro práci s myší, nemusí být vhodné pro dotykové zařízení. Obrázky pro telefony by se měly přizpůsobit, ne znovu nahrávat. Obsah by měl být na jedné URL adrese, není vhodné užívat jiné URL pro mobilní platformu. 

Téměř před rokem Google provedl změnu svého hodnotícího algoritmu a  zvýhodňuje responzivní weby ve výsledcích vyhledávání. Použitelnost webových stránek z hlediska mobilů a tabletů má tak vliv na SEO. Přizpůsobivý webdesign je výhoda před konkurencí. Základní zásady pro webdesignéry lze najít např. na w3schools.com (angl.) nebo na stránkách Googlu (angl.).

Jsou Vaše stránky přizpůsobivé?

Google uveřejnil test použitelnosti v mobilech. Stačí zadat adresu URL a  test Vám oznámí, zda je vzhled stránky vhodný pro mobilní zařízení.