Co je to responzivní design a proč ho nutně potřebujeme?

Responzivní web, responzivní design - co to je?

Slovo responzivní se už pár let skloňuje ostošest. Pořád ale ještě spousta webů respozivních není a nebo jen částečně. Tahle vlastnost je přitom jedna z klíčových a do značné míry na ní závisí, jak rádi nás budou mít návštěvníci i Google.

Co je responzivní web?

Responzivní web nebo lépe řečeno respozivní design je takový koncept, který zaručí, že se stránka správně zobrazí na všech zařízeních – počítačích, tabletech i mobilech (a postupně se nejspíš přidají i další zařízení, jako třeba hodinky).

Respozivní design pracuje především s definováním designu pro různé velikosti okna, kdy se právě podle velikosti okna vzhled flexibilně mění. Například pokud si stránku otevřeme na počítači v okně přes celou obrazovku, uvidíme často klasicky hlavní sloupec s obsahem a postranní panel s odkazy a bannery. Pokud okno začneme zmenšovat, dojdeme k hranici, kdy postranní panel zmizí ze své pozice a zařadí se až pod obsah. Stejně bude web vypadat i na mobilu – nejdřív uvidíme obsah a až pod ním postranní panel.

Ukázka responzivního webu

Jak se dělá respozivní web?

Respozivita webu je zpravidla definována stylyjazykem CSS se kódují tzv. Media Queries, ve kterých se právě určuje, jaký prvek má jak vypadat při konkrétních šířkách okna.

Běžný majitel webu nemusí kódovat nic – stačí, když si vybere respozivní šablonu. Dnes je respozivita už standardem.

(Kód si však můžeme dle libosti měnit, pokud nám platforma umožní pracovat se stylovacími soubory (soubory s příponou .css) a nebo můžeme kód v css jazyce vložit přímo do html souboru (tzv. interní stylování) za předpokladu, že se dostaneme k editaci kódu mezi <head></head>..

Případně respozivitě lze napomoci také dalšími jazyky, třeba použitím javascriptu/jQuery.)

Proč je respozivita důležitá?

Před pár lety byl respozivní design bonusem, dneska je nutností.

Stále častěji jsou weby prohlíženy z mobilů. Respozivní design znamená, že stránka bude pohodlně použitelná třeba i na mobilu. Použitelnost je právě zásadním důvodem pro volbu responzivního designu. Pokud se web na mobilu zobrazí špatně, návštěvník odchází.

Nerespozivní weby kazí image. Základní design může být okouzlující a obsah nabitý informacemi, ale neschopnost se správně zobrazit to “totálně zakope” – zkazí dojem i v očích našich potenciálních zákazníků či partnerů. Kdo svoji existenci na webu myslí vážně, ten zkrátka respozivitu řeší.

Pozice u Googlu. Google klade stále větší důraz na respozivitu. Pokud se náš web špatně zobrazuje na některých zařízeních, vysloužíme si za to takové malé trestné bodíky. Navíc co se týče mobilního vyhledávání, tak Google ve výsledcích upřednostní ty weby, které se na použitém zařízení zobrazí správně a návštěvník bude spokojený.

 

Zkrátka, v dnešní době je responzivita nutností. Někdy příště si povíme víc o základních „pravidlech“ responzivity i jak responzivitu testovat.

2 thoughts on “Co je to responzivní design a proč ho nutně potřebujeme?”

  • Tak s tímhle souhlasím, proto se mi nelíbí blog.cz, pokud chci některé blogy zobrazit na mobilech. Tato služba respozivitu blogů stále nenabízí a myslím, že nikdy ani nebude 😀 Jinak je fajn, že většina šablon tuto možnost už dávno nabízí 🙂

    LENN

    • Dneska respozivitu kupodivu nepochopila ještě ani spousta velkejch firem. U blogovacích platforem je to problém, protože jsou na nich lidi závislí a sami si to nemůžou pořešit :-/ Zas je to o důvod víc, proč z takovýho místa utéct k lepšímu řešení

Komentovat

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete použít tyto HTML značky a atributy:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Po odeslání musí být komentář ručně schválen, aby nebyla diskuse plná spamu :). Bude proto chvíli trvat, než se komentář pod příspěvkem zobrazí. Díky!