Jednostránkové weby: Tipy z praxe a příklady

Jednostránkový layout je mezi webdesignery stále populárnější a používají ho jak ve svých vlastních projektech, tak i na webech svých klientů. A není divu, protože v mnoha případech dává jednoznačně smysl: pokud nemáte moc obsahu, když spolu všechny části obsahu úzce souvisí nebo v případech, kdy to určitý grafický prvek zkrátka vyžaduje.

Jednostránkové weby se dostávají do módy, ale hodně lidí stále nemá jistotu, kdy tento layout zvolit a jakou variantu rozložení si vybrat. Většina tipů a nejlepší praktiky a zásady při tvorbě webových stránek platí samozřejmě i u jednostránkových webů, ale existuje několik dalších problémů a otázek, které je třeba při navrhování zvážit.

[Pozn.: Už jste si koupili Smashing Book #2? Tato kniha přináší přehled velmi cenných praktických zkušeností a tipů v oblasti designu, kódování a použitelnosti. Podívejte se na obsah knihy » ]

Je jednostránkový layout pro váš projekt to pravé?

Jednostránkové designy jsou mezi webdesignery poměrně oblíbené. Ale to neznamená, že stránky webdesignerů jsou jediným vhodným místem použití. Často je vidíme např. u stránek aplikací, či stránek propagující určité produkty (např. knihy). Jak tedy zjistit, zda je jednostránkový layout ta pravá volba?

Zkuste si položit následující otázky:

Mám hodně obsahu? Weby bohaté na obsah pravděpodobně nebudou těmi pravými kandidáty na jednostránkový layout. Máte-li více než deset stránek důležitého souvisejícího obsahu, lépe patrně vyjdete s klasickým dělením na více stránek.

Chci prodávat konkrétní produkt? Jednostránkový web může být skvělým řešením při prodávání jednoho produktu, jako například knihy, šablony stránky a podobně.

Nevadí vám Ajax a JavaScript? Velká část jednostránkových webů používá Ajax a JavaScript k navigaci a další interaktivní prvky. Díky tomu je možné přehledně zobrazovat obsah, i když je ho už trochu více.

Souvisí celý obsah s webem? Zkoušet nacpat na jednostránkový web nesouvisející obsah je akorát tak dobrá cesta ke zmatení návštěvníka. Máte-li více nesouvisejích stránek, pravděpodobně bude lepší nechat je oddělené jako zvláštní stránky.

1. Minimum obsahu

Když navrhujete jednostránkový web, množství obsahu je důležité omezení. V první řadě mějte na paměti, že celý obsah se bude muset načíst najednou (tedy pokud nepoužíváte Ajax, ale i s ním se často v jednu chvíli načítá značné množství dat). Také když budete chtí použít nějaké pěkné přechody mezi sekcemi, zpravidla fungují lépe, když nejsou přehlcené a tím pádem i ohraničené obsahem.

Pro jednostránkové weby je jakási norma pět až šest sekcí. Některé stránky mají dokonce pouhé dvě nebo tři sekce. Stránky s více než 10 sekcemi se vyskytují velmi, velmi zřídka.

Příklad

Jednostránkové portfolio, které předvádí dvanáct filmových webů. V hlavičce jsou stručné informace a odkaz na kontakt.

2. Zvažte horizontální scrolování

Ne všechny weby s horizontálním scrollováním jsou jednostránkové. Ale většina z nich ano – je to zajímavá cesta, jak oživit zažitý rámec jedné stránky.

Horizontální scrollování vám také dobře poslouží, když máte více obsahu. Kombinace horizontálního layoutu s JavaScriptem je schopna unést větší objem obsahu, aniž by návštěvníka zahltil.

Příklad

Tento web spojuje vertikální i horizontální scrollování, aby přehledně nabídl 6 sekcí.

3. Berte v úvahu velikost obrazovky

S jednostránkovým layoutem byste se měli zamyslet nad tím, jaké rozlišení používá většina návštěvníků. Vytvoříte-li sekce tak, aby se do tohoto prostoru pohodlně vešly, zamezíte tím nutnosti scrollování. Toto se vám rozhodně bude hodit, pokud jsou pro vás důležité přechody mezi sekcemi. Jak jednou návštěvník začně scrollovat, často už si web doprohlídne pomocí scrollování, raději než aby klikal na odkazy v navigaci.

Příklad

Tohle je velmi jednoduchý web se třemi sekcemi a jednostránkovým layoutem. Každá sekce se pohodlně a bez scrollování vejde na jednu obrazovku. Navigace obousměrným scrollováním je také velmi originálním prvkem.

4. Jasně odlište jednotlivé sekce

Většina návštěvníků je zvyklá, že se při přechodu mezi sekcemi načítá nová stránka. Pokud všechen obsah na jedné stránce vměstnáte příliš blízko k sobě, návštěvník si přechodů mezi sekcemi vůbec nemusí všimnout.

Existuje celá řada způsobů, jak znázornit přechody mezi sekcemi. Jeden z nich je použití jednotné hlavičky, která se v každé sekci bude opakovat. Některé stránky používají jako oddělovače rovné čáry a na jiných webech je zas použitý dostatek volného místa mezi sekcemi, aby byl přechod patrný.

Příklad

KINO používá jednotně působící, ručně kreslené hlavičky pro každou sekci spolu s tenkým, rovněž ručně kresleným rámečkem, který sekce odděluje.

5. Využijte výhod velkých obrázků na pozadí

Velké obrázky na pozadí jsou oblíbené i u vícestránkových webů, ale u těch jednostránkových se otevírají zcela nové možnosti. Mnoho webdesignerů využívá tato pozadí k odlišení jednotlivých sekcí při zachování jednotného vzhledu webu.

Některé weby jsou například navržené tak, že pozadí nahoře začíná oblohou, dále navazuje zem a krajina s dalším obsahem a vespod mají podvodní svět s další sekcí obsahu. U jednostránkového layoutu jsou možnosti takřka neomezené.

Příklad

Další skvělý příklad jednotného vzhledu napříč celým webem.

6. Používejte JavaScript a Ajax na uspořádání a zobrazování obsahu

Máte-li trochu víc obsahu, ale stále se chcete vejít do jednostránkového designu, zvažte použití JS a Ajaxu, abyste mohli vždy zobrazit pouze určitou část.

Jeden z nejoblíbenějších JS prvků je slideshow, ale hojně používané jsou také lightboxy, plynulé scrollování a další.

Příklad

SOFA používá JavaScript k zobrazování obsahu podle potřeby. Výsledkem je velmi čistý design, kde jsou důležité informace návštěvníkům stále na očích, aniž by museli stránku opouštět.

Další příkady

Tady je ještě několik dalších pěkných jednostránkových webů:

Shrnutí…

Jednostránkový layout může být originální a zábavnou formou pro vaše stránky, ať už se jedná o osobní web, či web pro vašeho klienta. Dokonce je v nich mnoho nových způsobů, jak se odlišit od konkurence a zapsat se do paměti návštěvníka. Věci jako velké fotky na pozadí či načítání přes AJAX a různé efekty zde hrají mnohem zásadnější roli než na komplexnějších vícestránkových webech.

Tady jsou ještě ve zkratce všechny zmíněné tipy:

Minimum obsahu. Jen pro takové množství je na jednostránkovém webu místo.
Zvažte horizontální scrollování. I když ne všechny weby s horizontálním scrollováním jsou jednostránkové, právě pro ně je více než vhodné.
Berte v úvahu velikost obrazovky. U jednostránkových webů je zvykem umístit obsah tak, aby se vešel a návštěvník nemusel scrollovat.
Jasně odlište jednotlivé sekce. Neexistuje tu pravidlo oddělených stránek, takže musíte sami přijít na to, jak od sebe části obsahu odlišit.
Využijte výhod velkých pozadí. Jednostránkové weby jsou často delší a větší než obvyklé stránky, což jim dává mnohem více možností pro kreativní využití pozadí.
Používejte JavaScript a Ajax. Organizace a uspořádání obsahu můžete díky Ajaxu a JavaScriptu posunout o řád výš díky prvkům jako lightboxy, tooltipy či carousel.

Odkazy a další zdroje

One Page Love – Galerie jednostránkových webů.
30 One Page Websites – Přehlídka z tutorial blogu.
40+ Impressive Single Page Websites – Přehlídka jednostránkových webů na Dzine Blogu.
One Page Category – Kategorie pro jednostránkové weby na DesignBombs.
Single-Page Portfolio Sites – Skvělá přehlídka designů od Web Designer Wall.
88 Single Page Website Designs for Design Inspiration – Velký přehled od InstantShiftu.
How to Build Your Own Single Page Portfolio Website – Návod na Spoon Graphics, který ukazuje, jak vytvořit portfolio s jednostránkovým layoutem.
One Page Websites: Pros and Cons – Podrobný přehled kladů a zápodů jednostránkových webů z pohledu businessu.
74 Fresh Examples Of Beautiful Single Page Website Designs