Dva weby mohou mít identický obsah a přinášet úplně jiné výsledky. Jeden se snadno prochází a jasně čte. Druhý působí roztříštěně a špatně se sleduje. Obsah je stejný. Rozvržení ne. Rozvržení webu je neviditelný rámec, který rozhoduje, zda obsah zaujme, nebo zapadne.
Rozvržení webu označuje, jak je obsah na stránce uspořádaný a strukturovaný. Určuje, kde jsou prvky umístěny, jak spolu souvisejí a v jakém pořadí na ně návštěvník narazí. Dobré rozvržení vede návštěvníky obsahem přirozeně. Špatné je nutí hledat, co potřebují.
Rozvržení není totéž co design. Design se týká toho, jak věci vypadají: barev, písem a vizuálního stylu. Rozvržení se týká toho, kam věci patří a jak jsou uspořádané. Stránka může vypadat krásně a přesto mít rozvržení, které návštěvníky mate, nebo vypadat prostě a mít rozvržení, které funguje dokonale.
Jaké jsou hlavní typy rozvržení webu?
Jednosloupcové rozvržení
Jednosloupcové rozvržení skládá všechen obsah svisle do jednoho sloupce uprostřed stránky. Je to nejjednodušší rozvržení a nejvhodnější pro mobily, protože nevyžaduje žádné přizpůsobení, když se široká obrazovka změní na úzkou. Jednosloupcová rozvržení se běžně používají u článků na blogu, stránek s dlouhým obsahem a dokumentace, protože lineární pořadí čtení odpovídá tomu, jak se takový obsah čte.
Dvousloupcové rozvržení
Dvousloupcové rozvržení dělí stránku na dvě části vedle sebe. Nejběžnější verze umísťuje hlavní obsah do širšího levého sloupce a doplňkový obsah, například boční panel s navigací nebo souvisejícími odkazy, do užšího pravého sloupce. Dvousloupcová rozvržení dobře fungují na stránkách s jasnou hlavní oblastí obsahu, které prospívá doplňující kontext vedle ní.
Mřížkové rozvržení
Mřížkové rozvržení uspořádává obsah do strukturovaného systému řádků a sloupců. Stránky s výpisem produktů, portfolia a rozcestníky blogu často používají mřížky, protože umožňují jednotně zobrazit více položek stejné důležitosti. Vizuální pravidelnost mřížky usnadňuje její prolétnutí. Výzvou je zajistit, aby se mřížka na mobilu rozumně sbalila, kde se položky obvykle musí zmenšit ze tří nebo čtyř sloupců na jeden nebo dva.
Rozvržení přes celou šířku
Rozvržení přes celou šířku roztahuje sekce přes celou šířku okna prohlížeče. Úvodní sekce, obrázky na pozadí a oddělovače sekcí běžně používají celou šířku, aby vytvořily vizuální dopad a oddělily oblasti obsahu. Obsah uvnitř sekce přes celou šířku je obvykle omezen na čitelnou maximální šířku, takže pozadí se roztahuje od okraje k okraji, ale text ne.
Magazínové rozvržení
Magazínové rozvržení používá asymetrické uspořádání obsahových bloků různých velikostí, podobně jako tištěné časopisy organizují redakční obsah. Používá se na zpravodajských webech a platformách s velkým množstvím obsahu, kde je třeba zobrazit vedle sebe více příběhů různé důležitosti. Vizuální rozmanitost magazínového rozvržení vytváří hierarchii velikostí a polohou, ale vyžaduje pečlivý návrh, aby nepůsobilo chaoticky.
Rozvržení z karet
Rozvržení z karet představuje obsah v jednotlivých ohraničených blocích, z nichž každý má stejnou strukturu: obrázek, název, stručný popis a někdy odkaz nebo akci. Karty jsou modulární, takže se snadno prolétají a snadno přeuspořádávají. Dobře fungují pro produkty, příspěvky na blogu, členy týmu, služby a každý typ obsahu, kde je třeba zobrazit společně mnoho položek stejného druhu.
Jak vybrat správné rozvržení pro stránku?
Správné rozvržení závisí na účelu stránky a na tom, jak bude obsah využíván.
Stránky, které návštěvníci čtou od začátku do konce, například články, průvodci nebo stránky s postupem krok za krokem, fungují nejlépe s jednosloupcovým nebo jednoduchým dvousloupcovým rozvržením, které sleduje jasnou lineární cestu. Stránky, kde návštěvníci procházejí a vybírají mezi možnostmi, například výpisy produktů nebo přehledy služeb, dobře fungují s mřížkami nebo kartami, které umožňují porovnat položky na první pohled.
Stránky, které musí udělat silný první dojem, například domovské stránky a vstupní stránky, těží z kombinace sekcí přes celou šířku pro vizuální dopad a ohraničených sloupců pro čitelný obsah. Rozvržení by mělo odpovídat typu obsahu: mřížka pro dlouhý článek vytváří špatný zážitek ze čtení, stejně jako jednosloupcové rozvržení pro katalog produktů zbytečně ztěžuje procházení.
Článek o tom, jak navrhnout domovskou stránku, která funguje, popisuje, jak strukturovat volbu rozvržení konkrétně pro domovské stránky, kde jsou sázky na správné provedení nejvyšší.
Jak rozvržení funguje na mobilu?
Každé vícesloupcové rozvržení na počítači potřebuje mobilní verzi, ve které se sloupce skládají pod sebe. Třísloupcová mřížka produktů se změní na jedno- nebo dvousloupcovou mřížku. Dvousloupcové rozvržení s bočním panelem se sbalí do jednoho sloupce. Otázka nezní, zda rozvržení pro mobil přizpůsobit, ale jak to udělat, aniž by se ztratilo pořadí čtení nebo vizuální hierarchie.
Záleží na pořadí při sbalení. Když se dvousloupcové rozvržení na mobilu poskládá pod sebe, levý sloupec se obvykle zobrazí nad pravým. Pokud se při sbalení obsah bočního panelu objeví před hlavním obsahem, mobilní zážitek ze čtení se rozbije. Otestování rozvržení na skutečném telefonu před zveřejněním tyto problémy odhalí, v náhledech na počítači jsou málokdy vidět.
Některé volby rozvržení, které fungují na počítači, je třeba pro mobil úplně přehodnotit. Složité magazínové rozvržení s pěti různými velikostmi obsahu se může na mobilu muset zjednodušit na dvousloupcovou mřížku karet, aby zůstalo použitelné. Článek o tom, jak udělat web vhodný pro mobily, popisuje celou sadu aspektů rozvržení a designu pro menší obrazovky.
Jak rozvržení ovlivňuje vizuální hierarchii?
Rozvržení a vizuální hierarchie spolupracují. Rozvržení poskytuje strukturu: kam sekce patří, kolik je sloupců, jak jsou uspořádané obsahové bloky. Vizuální hierarchie poskytuje váhu: kterých prvků v rámci této struktury si všimneme jako prvních, druhých a posledních.
Rozvržení, které nejdůležitější obsah umísťuje nahoru a do největšího prostoru, nastavuje vizuální hierarchii tak, aby fungovala přirozeně. Rozvržení, které důležitý obsah schovává do bočního panelu nebo ho umístí pod méně důležitý materiál, působí proti hierarchii, ať jsou jednotlivé prvky stylovány jakkoli. Když nejdřív správně nastavíte rozvržení, je mnohem snazší vytvořit jasnou vizuální hierarchii. Článek o tom, co je vizuální hierarchie, vysvětluje, jak nástroje důrazu, velikosti, kontrastu a odsazení fungují v jakémkoli rozvržení.
Jak rozvržení ovlivňuje SEO?
Rozvržení ovlivňuje SEO především přes uživatelský zážitek, který vytváří. Stránka s jasným, logickým rozvržením udrží návštěvníky déle a snižuje pravděpodobnost, že hned odejdou. Tyto signály chování mají pro vyhledávače časem význam.
Rozvržení také ovlivňuje, jak vyhledávače čtou strukturu obsahu stránky. Obsah, který se v HTML stránky objeví brzy, bývá vyhodnocován s větší vahou než obsah, který se objeví pozdě, i když ho vizuální rozvržení nechá vypadat stejně nápadně. Umístění nejdůležitějších nadpisů a obsahu na začátek zdrojového kódu stránky, a ne jen vizuálně, odpovídá tomu, jak vyhledávače stránky zpracovávají. Článek o tom, co je SEO, popisuje technické i obsahové faktory, které ovlivňují řazení stránek.
Jak rozvržení řeší WEMASY
Tvůrce webů WEMASY obsahuje systém rozvržení založený na sekcích, kde pro každou sekci stránky vybíráte z knihovny hotových bloků rozvržení. Jednosloupcové, dvousloupcové, mřížkové rozvržení, rozvržení přes celou šířku i karty jsou dostupné jako sekce, které stačí přetáhnout. Každý blok rozvržení se automaticky přizpůsobí mobilu, sbalí sloupce a upraví odsazení, aniž by bylo třeba samostatné nastavení pro mobil. Vizuální editor ukazuje náhledy pro počítač i mobil, takže můžete před zveřejněním ověřit, že rozvržení funguje na všech zařízeních.
Co je zahrnuto, zjistíte na stránce tvůrce webů WEMASY, a balíčky najdete na stránce s ceníkem.
Často kladené otázky
Jaké je nejběžnější rozvržení webu?
Nejběžnější rozvržení firemních webů kombinuje úvodní sekci přes celou šířku nahoře s vícesloupcovou nebo kartovou oblastí obsahu pod ní a jednosloupcovou patičkou. Tato struktura dává domovské stránce vizuální dopad nahoře, flexibilitu pro sekce s funkcemi uprostřed a stálý orientační bod dole. Na jednotlivých stránkách jsou nejběžnější jednosloupcová rozvržení u stránek zaměřených na obsah, jako jsou články na blogu a popisy služeb. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Co je wireframe a jak souvisí s rozvržením?
Wireframe je zjednodušený, málo podrobný diagram rozvržení stránky, který ukazuje, kde budou umístěny obsahové bloky, navigace a klíčové prvky. Vytváří se dřív, než se udělají jakákoli vizuální designová rozhodnutí, a soustředí se čistě na strukturu a umístění obsahu. Wireframy se používají k plánování a testování rozhodnutí o rozvržení bez rozptylování barvami, písmy nebo obrázky. Pro majitele firmy používajícího tvůrce webů slouží vybraná šablona fakticky jako wireframe, na který je nanesen design.
Má mít každá stránka webu stejné rozvržení?
Ne nutně, ale měly by působit jednotně. Domovská stránka, článek na blogu a stránka s výpisem produktů mají různé typy obsahu a různé účely, takže jim prospívají rozvržení vhodná pro každou z nich. Jednotné by mělo zůstat záhlaví, navigace, patička a celkový vizuální styl. V rámci těchto jednotných prvků se může rozvržení oblasti obsahu měnit podle účelu stránky. Cílem je, aby web působil soudržně, ne aby každá stránka byla strukturovaná stejně.
Co je responzivní mřížkové rozvržení?
Responzivní mřížkové rozvržení je struktura mřížky, která přizpůsobuje počet sloupců podle dostupné šířky obrazovky. Na široké obrazovce počítače může zobrazit čtyři sloupce. Na tabletu se zmenší na dva. Na telefonu se sbalí na jeden. Mřížka na velikost obrazovky reaguje automaticky, aniž by byly potřeba samostatné návrhy pro každé zařízení. Většina moderních tvůrců webů implementuje responzivní mřížky ve výchozím stavu, takže se rozvržení správně upraví bez ručního nastavování pro každý zlomový bod.
Jak volba rozvržení ovlivňuje rychlost načítání stránky?
Samotné rozvržení má na rychlost načítání minimální vliv. Rychlost ovlivňuje obsah uvnitř rozvržení: obrázky, videa, skripty a písma. Složité mřížkové rozvržení s optimalizovanými obrázky se načítá rychleji než jednoduché jednosloupcové rozvržení s neoptimalizovanými. Rozvržení s mnoha obrázky na pozadí přes celou šířku nebo s paralaxovým rolováním však může dobu načítání prodloužit, pokud nejsou tyto obrázky správně komprimované. Rozvržení je nádoba. Rychlost určuje to, co je v ní.