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
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       20 439×

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.

Reklama
Reklama

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.

4 názory  —  4 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 Game o stupeň výše a vyvíjí pro něj nové herní aplikace a elektroniku.
Web     Twitter     Facebook     LinkedIn    

Nové články

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

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 © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý