Responzívny webdesign

Mobily a tablety menia svet. V súčasnej dobe má chytrý telefón takmer každý, komunikuje s ním a hľadá informácie na internete. Počet chytrých telefónov a tabletov mnohonásobne prekonal počet osobných počítačov. Responzívny web sa stal dôležitou súčasťou webovej tvorby.

Responzívny webdesign (anglicky responsive webdesign) je spôsob štýlovania HTML dokumentu, ktorý zaručuje, že zobrazenie stránky bude optimalizované pre všetky druhy najrôznejších zariadení (mobily, notebooky, 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.

Desktop verziu web stránky nie je vhodné používať v mobilnom zariadení. Verzia, ktorá nie je určená pre mobily vyžaduje, aby používateľ zväčšil a posúval zobrazenie, aby mohol obsah prečítať. Užívateľa to obťažuje a je isté, že ukončí návštevu stránky. Responzívna alternatíva pre mobily je čitateľná a okamžite použiteľná.

Responzívny webdesign má tri základné úrovne: Flexibilná štruktúra, Flexibilné obrázky a Media Queries.

Flexibilná štruktúra

Metód dosiahnutia flexibilnej štruktúry je viac. Napríklad sa dosahuje pomocou percentuálnych šírok. Jednotlivé šírky elementov tak nie sú zadávané v pixloch, ale v percentách. Takto pripravená štruktúra potom reaguje na rôzne šírky najrôznejších zariadení. K výpočtu percentuálnych šírok sa používa jednoduchý vzorec:

percentuálna šírka = (požadovaná šírka (v pixloch) / kontext (v pixloch)) * 100

Kontext v tomto vzorci hrá úlohu obalového tagu. Ak teda v bloku, ktorý je 600px široký, je potreba vytvoriť ďalší blok, ktorý má byť napríklad 287px široký, dosadením do vzorca bude vyzerať nasledovne:

47,83333333 = (287/600) * 100

V rámci čo najpresnejších šírok sa pri aplikácii techniky flexibilné štruktúry percentá nezaokrúhľujú.

Flexibilné obrázky

Technika flexibilných obrázkov zaistí, že obrázky sa budú prispôsobovať rovnako tak, ako samotná štruktúra. Aby sa toho dosiahlo, neuvádza sa šírka a výška obrázku vnútri tagu <img>. Aby nedochádzalo k pretekaniu, štýlujú sa všetky obrázky nasledujúcim kódom :

  img {

   max - width: 100%;

   height: auto;

}

Takto štýlované obrázky sa dokážu prispôsobiť obrazovke jednotlivých zariadení.

Media Queries

Media Queries je považované za poslednú a najvyspelejšiu úroveň responzívneho webdesignu. Sú to pravidlá, vďaka ktorým je možné meniť štýlovanie dokumentu v závislosti na šírke obrazovky zobrazovaného zariadenia. Nasledujúce štýlovanie (červené pozadie celého dokumentu) sa bude uplatňovať len vtedy, ak šírka prehliadača na použitom zariadení bude v rozsahu od 660px do 780px.

@media (max - width: 780px) and (min - width: 660px) {

 body {

  background- color: red ;

 }

}