Responsivní webdesign

Mobily a tablety mění svět. V současné době má chytrý telefon téměř každý, komunikuje s ním a hledá informace na internetu. Počet chytrých telefonů a tabletů mnohonásobně překonal počet osobních počítačů. Responzivní web se stal důležitou součástí webové tvorby.

Responsivní webdesign (anglicky responsive webdesign) je způsob stylování HTML dokumentu, který zaručuje, že zobrazení stránky bude optimalizované pro všechny druhy nejrůznějších zařízení (mobily, notebooky, tablety, atd.). Především díky vlastnosti Media Queries, která je zahrnuta ve specifikaci CSS3, lze rozpoznat vlastnosti zařízení, na kterém se stránka zobrazuje a přizpůsobit tak samotnou stránku a její obsah.

Desktop verzi web stránky není vhodné používat v mobilním zařízení. Verze, která není určená pro mobily, vyžaduje, aby uživatel zvětšil a posouval zobrazení, aby mohl obsah číst. Uživatele to obtěžuje a je jisté, že ukončí návštěvu stránky. Responzivní alternativa pro mobily je čitelná a okamžitě použitelná.

Responsivní webdesign má tři základní úrovně: Flexibilní struktura, Flexibilní obrázky a Media Queries.

Flexibilní struktura

Metod dosažení flexibilní struktury je více. Například se dosahuje pomocí procentních šířek. Jednotlivé šířky elementů tak nejsou zadávány v pixelech, ale v procentech. Takto připravená struktura pak reaguje na různé šířky nejrůznějších zařízení. K výpočtu procentních šířek se používá jednoduchý vzorec:

procentuální šířka = ( požadovaná šířka (v pixelech) / kontext (v pixelech) ) * 100

Kontext v tomto vzorci hraje roli obalového tagu. Pokud tedy v bloku, který je 600px široký, je potřeba vytvořit další blok, který má být například 287px široký, dosazení do vzorce bude vypadat následovně:

47.83333333 = (287/600) * 100
 

V rámci co nejpřesnějších šířek se při aplikaci techniky flexibilní struktury procenta nezaokrouhlují.

Flexibilní obrázky

Technika flexibilních obrázků zajistí, že obrázky se budou přizpůsobovat stejně tak, jako samotná struktura. Aby se toho dosáhlo, neuvádí se šířka a výška obrázku uvnitř tagu. Aby nedocházelo k přetékání, stylují se všechny obrázky následujícím kódem:

img {

max - width: 100%;

height: auto;

} 

Takto stylované obrázky se dokáží přizpůsobit obrazovce jednotlivých zařízení. Pozor přitom na ikony, ty musí mít sířku definovánu v pixlech a parametr !important

Media Queries

Media Queries je považováno za poslední a nejvyspělejší úroveň responsivního webdesignu. Jsou to pravidla, díky kterým je možné měnit stylování dokumentu v závislosti na šířce obrazovky zobrazovaného zařízení. Následující stylování (červeně je pozadí celého dokumentu) použije pouze tehdy, pokud šířka prohlížeče na použitém zařízení bude v rozsahu od 660px do 780px.

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

  body {

  background- color: red ;

  }

}