Responsivní webdesign

Uživatelé internetu v dnešní době nepřicházejí na webové stránky jen prostřednictvím svého počítače, ale i z tabletů a hlavně mobilů. Dost často návštěvnost internetové stránky z mobilů je vyšší než z počítače. Z tohoto důvodu se využívá responsivní webdesign.

Co je ten responsivní webdesign?

Díky responsivnímu webdesignu už nezažíváte to, že když si otevřete webovou stránku na mobilu tak je všechno malinkaté a nečitelné. Pokud se vám to stále stává u některých stránek tak je to z důvodu, že nevyužívají responsivní webdesign. Prostě se vám web na mobilním zařízení zobrazuje stejně jako byste se na web koukali na počítači.

Responsivní webdesign bychom mohl nazvat jako přizpůsobení webu pro mobily, tablety a podobná zařízení. Díky tomu můžete jednodušeji využívat web ať už se jedná o nějaký web zpravodajství, e-shop, firemní stránky, atd..

Další výhodou responsivního webdesignu je ten, že se dost často snižuje i datová náročnost pro návštěvníky internetových stránek. Může se jednat i o snížení velikosti přenesených dat o polovinu i víc, ale to záleží na tom jestli je web správně udělaný a nebo jen se smrskává na menší zařízení. Velikost přenesených dat určitě ocení návštěvníci webů, kteří přicházejí na web přes mobil s mobilními daty od svých operátorů, kde ještě dodnes se nabízí balíčky dat v jednotkách MB nebo GB.

Jaké druhy responsivního webdesignu existují?

Nejčastější způsob je ten, že se responsivita použije na současné webu a to tím, že všem elementům na webové stránce se nastaví procentuální šířka. To znamená, že když se webová stránka zobrazí na menším zařízením tak se automaticky šířka elementů přepočítává a mění se podle těchto pravidel. V určitých šířkách se pak změní i řazení obsahu.

Příklad:

Máte v levé polovině text a vpravé polovině obrázek tak se tyto elementy seřadí pod sebe, aby z obrázku a textu nebyly jen dvě dlouhé nudle vedle sebe. Dost často si můžete všimnou i navigací webů, v kterých se odkazy ani nahoře ani dole nezobrazují vedle sebe, ale schovávají se pod ikonkou tří vodorovných čárek (burger menu).

Další varianta je ta, že se web rozdělí na mobilní web a desktopový web. Většinou to poznáte podle URL adresy.

• Desktopový web: www.neco.cz
• Mobilní web: www.m.neco.cz

Zde můžete vidět, že se vytvoří mobilní web na subdoméně “m”.

Obě varianty mají své pro a proti a určitě nemůžeme říct, která z těchto variant je vždy lepší. Je to projekt od projektu, kde někde se hodí varianta s m webem a někde udělat celý web responsivní.

Responzivní řešení je standardní součást každého webu, který tvořím. Více o tvorbě webových stránek.

Zajímá vás responsivním web designu a jak se kóduje? Můžete podívat na oficiální stránky mdn web docs.