Jedná sa o spôsob štylizovania HTML dokumentu, ktorý zaručí, že zobrazenie webstránky bude optimalizované pre všetky druhy najrôznejších zariadení (mobily, notebooky, netbooky, tablety, atď). Predovšetkým vďaka vlastnosti Media Queries, ktorá je zahrnutá v špecifikácii CSS3, možno rozpoznať vlastnosti zariadenia, na ktorom sa stránka zobrazuje a prispôsobiť tak samotnú stránku a jej obsah.

Responzivný web design má tri základné úrovne:

  1. Flexibilná štruktúra (Flexibilnej štruktúry sa dosahuje pomocou percentuálnych šírok. Jednotlivé šírky elementov tak nie sú zadávané v pixeloch, ale v percentách. Takto pripravená štruktúra potom reaguje na rôzne šírky najrôznejších zariadení.)
  2. Flexibilné obrázky (Technika flexibilných obrázkov zaistí tak, že obrázky sa budú prispôsobovať rovnako ako samotná štruktúra. Aby sa toho dosiahlo, neuvádza sa šírka ani výška obrázku vnútri tagu. Takto naštylizované obrázky sa dokážu prispôsobiť obrazovke jednotlivých zariadení.)
  3. Media Queries (Media Queries sa považujú za poslednú úroveň responzivného web dizajnu. Sú to pravidlá, vďaka ktorým je možné meniť štylizovanie dokumentu v závislosti na šírke obrazovky zobrazovaného zariadení.)


 
Ukážky responzívneho designu webstránok
čistá vektorová grafika pre rýchlejšie načítavanie webstránok

Overte si Vašu aktuálnu webstránku, ako sa zobrazuje na mobilných zariadeniach! 50% užívateľov ju vidí práve takto.

Overiť web