Návrhové vzory responsivního webdesignu a nejčastěji používané layouty přizpůsobené pro více zařízení
 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íNávrhové vzory responsivního webdesignu a nejčastěji používané layouty přizpůsobené pro více zařízení

 

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       15 468×

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, vyvíjí webové aplikace, fascinuje ho umělá inteligence a je lektorem na FI MUNI, kde učí navrhovat studenty GUI. Poslední dobou se snaží posunout Laser Tag o stupeň výše a vyvíjí nové herní aplikace a elektroniku.
Web     Twitter     Facebook     LinkedIn    

Nové články

Obrázek ke článku Analýza a optimalizace procesů

Analýza a optimalizace procesů

Zhruba před třemi lety jsem zde publikoval řadu článků o umělé inteligenci. Od té doby jsem dále pokračoval ve vývoji a v současné době bych rád navázal na předchozí seriál a v následujících článcích komplexně shrnul problematiku analýzy a optimalizace výrobních procesů metodami umělé inteligence tak, jak jsem se s ní setkal ve své praxi.

Reklama autora

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032014 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý