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

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í

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

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       24 036×

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

Obrázek ke článku Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Ericsson ConsumerLab Report: rozšířená realita je další úrovní gamingu

Celkem 66 % uživatelů zajímá rozšířená realita v oblasti gamingu. Mezi nimi je i 35 % těch, kteří jinak hry nehrají.
Pro téměř 50 % respondentů by bylo zajímavé zapojení virtuální objektů do reálného světa. Objekty by zůstaly tam, kde je při hře „umístili“.
Až 43 % uživatelů láká využití rozšířené reality ve sportu

Reklama
Reklama
Obrázek ke článku Instalace nejnovější verze Apache 2.4, PHP 7.3, MariaDB 10.3 a Memcached na Windows 10

Instalace nejnovější verze Apache 2.4, PHP 7.3, MariaDB 10.3 a Memcached na Windows 10

Buďte při vývoji efektivní! Pomocí tohoto návodu během chvíle vytvoříte ze svého počítače lokální webový server. Vyzbrojíte jej vším, co budete při práci potřebovat: Apache 2.4, PHP 7.3, MariaDB 10.3 a Memcached. Je to plná polní pro webové vývojáře s Windows 10. Navíc poradíme, jak mít na localhostu více projektů pomocí VirtualHost.

Obrázek ke článku Do poskytovatele managed hostingových služeb vshosting~ vstupují zahraniční investoři

Do poskytovatele managed hostingových služeb vshosting~ vstupují zahraniční investoři

Po více než roce jednání do vshosting~ vstoupili 3 investiční skupiny z Německa: Pecunalta, BrainWeb Investment a Quines Capital. Jde o investiční skupiny, které mají účast na projektech jako PlusServer (největší managed provider v Německu a jeden z největších v Evropě), PLESK, cPanel, CloudLinux, GoDaddy (největší světový hostingový poskytovatel z USA), či Acronis, pomohou vshosting~ v jeho plánované mezinárodní expanzi na další zahraniční trhy. Ve vshosting~ nyní drží 75% podíl, zbylých 25 % zůstává zakladatelům vshosting~, kterými jsou Damir Špoljarič (CEO) a Jan Martinů (CTO).

Obrázek ke článku Posuňte své znalosti IT na výrazně vyšší úroveň

Posuňte své znalosti IT na výrazně vyšší úroveň

Zájem o IT odborníky je v současnosti v tuzemsku i v zahraničí enormní a vedení firem si moc dobře uvědomuje, jak těžké je získat ty správné. I přesto, že je odborníků na trhu dlouhodobý nedostatek, stále platí, že část z nich je - a bude - placena výrazně lépe než ti ostatní. Proč tedy nebýt mezi nimi?

Reklama autora

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