x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Návrhové vzory responsivního webdesignu a nejčastěji používané layouty přizpůsobené pro více zařízení – Programujte.comNávrhové vzory responsivního webdesignu a nejčastěji používané layouty přizpůsobené pro více zařízení – Programujte.com

 

Návrhové vzory responsivního webdesignu a nejčastěji používané layouty přizpůsobené pro více zařízení

Google       Google       2. 4. 2012       14 782×

Díky responsivnímu designu (media queries) můžeme přizpůsobit layout na širokou škálu různých zařízení bez toho, abychom pro tato zařízení vytvářeli nové layouty. Čím dál více designérů a firem tuto techniku používá, a tak se více méně definovaly vzory, které se používají nejčastěji (a téměř všude). Na ty nejpoužívanější se dnes podíváme.

Základem pro sestavení žebříčku nejpoužívanějších vzorů pro responsivní web se stal web mediaqueri.es nabízející přehled vybraných stránek, které používají techniku responsivního webdesignu – a používají ji hezky (a dobře).

Výsledkem je pět vzorů, které se používají nejčastěji a dle toho jsou také seřazeny.

Téměř fluidní

Nejčastěji se z původně fixního webu, vytvořeného pro 1024 px, stává (při zmenšování okna, resp. při použití menšího a menšího displeje na zařízení) fluidní web a u konce (na malém displeji) se jednotlivé sloupce začnou řadit pod sebe. Pokud máme například navigaci v levém sloupci a obsah v pravém (viz obrázek dole), tak se nejprve jednotlivé sloupce přizpůsobují (smršťují) a poté se seřadí za sebe.

Dokud se obsah na stránku vejde (obvykle > 1024 px), je layout fixní a nijak se nemění.

Téměř fluidní layout - dokud se na obrazovku vejde, je fixní

Příklady webů, které používají tento vzor:

Mizení sloupců

Z původně několikasloupcového layoutu se stane ve výsledku jednosloupcový. Původní, několikasloupcový layout, je většinou fixní a postupně s menším displejem mizí jeden sloupec za druhým, až zůstane pouze jednosloupcový layout, ve kterém jsou opět ve výsledku sloupce řazeny pod sebou.

Důležité na tomto vzoru je, že jednotlivé sloupce se nepřizpůsobují, jako v předchozím „téměř fluidním“ vzoru. Naopak, mají svou konstantní velikost, kterou si stále zachovávají, a sloupce, které se do viewportu nevlezou, jsou přesunuty (zařazeny) na konec.

Layout, kde postupně mizí sloupce - navigace většinou bývá umístěna nahoře v úzkém pruhu

Příklady webů, které používají tento vzor:

Morfovací layout

Ač to zní divně, název jsem zvolil proto, že se layout na různých displejích přeměňuje (morfuje) do jiného, dalšího layoutu. Tento vzor je pracnější udělat než předchozí dva, protože co jiný displej, to jiný design. Povětšinou je stránka přizpůsobena pro malý, střední a velký displej a drobnější rozdíly ve velikosti displeje mají za důsledek drobné změny designu s cílem přizpůsobit se (a využít) co nejvíce dané velikosti displeje.

Kvůli pracnějšímu návrhu je tento vzor i méně používaným.

Morfovací layout - co jiný displej, to jiný (obvykle výrazně upravený) design

Příklady webů, které používají tento vzor:

Jednoduchý web

Některé stránky jsou velmi jednoduché, případně jednosloupcové a výraznější změny nejsou potřeba a byly by zbytečné. Úpravy jsou tak pouze ve velikosti písma, případně se mění rozměry obrázků.

Příklady webů, které používají tento vzor:

V případě jednoduchého nebo jednosloupcového webu není moc co měnit

Offset

Posledním vzorem je umístění obsahu mimo viewport tak, že nebude zobrazený do doby, než si to uživatel/aplikace vyžádá nebo než je velikost displeje dostatečná pro zobrazení celého obsahu. Možností, jak tohoto využít, je více. Tento vzor používá například mobilní aplikace Facebooku pro iOS/Android.

Obsah se nachází i mimo viewport a zobrazen je až v případě potřeby
Facebook využívá tento vzor pro svou mobilní appku

Na některých zařízeních při použití ve webových aplikacích však mohou být s tímto vzorem problémy.

Podobně jako Facebook využívá offsetu i aplikace Path.

Aplikace Path využívá offsetu pro skrytí navigačních prvků a zobrazí je, když jsou potřeba

Pokud vás zajímá, jak toto udělat v praxi, Torkil Johnsen vytvořil jednoduchý koncept s fallbackem (alternativou) pro nedotyková zařízení, včetně možnosti vypnutého JavaScriptu.

Tento vzor se používá hlavně u dotykových mobilních zařízení, kde je málo prostoru pro zobrazení navigace nebo dalších prvků, které není důležité zobrazit hned.

Pokud byste si rádi početli více, můžete pokračovat na blogu Brada Frosta v článku Responsive navigation patterns.

Zdroj: Multi-Device Layout Patterns, Luke Wroblewski, 2012

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

3 názory  —  3 nové  
Hlasování bylo ukončeno    
14 hlasů
Google
(fotka) Lukáš ChurýLukáš je šéfredaktorem Programujte.com, baví ho tvořit, vyvíjí webové aplikace – rád si hraje s přizpůsobením webu pro různá zařízení, fascinuje ho umělá inteligence a zajímá se také o moderní techniku v souvislosti s moderním bydlením. Nejčastěji ho zastihnete na Twitteru.
Web     Twitter     Facebook     LinkedIn    

Nové články

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032014 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý