11. 1. 2010 v sekci webdesign:

Typy layoutů webu

Jaké layouty můžete na webu použít a proč – přehledový článek pro klarifikaci pojmů. Kontroverze až příště.

Při tvorbě layoutu webu máte dvě základní proměnné, se kterými je potřeba počítat a přitom nejdou nijak globálně ovlivnit. Jsou jimi změna velikosti písma uživatelem a rozměry webu v prohlížeči (nazvěme to třeba contentport – ta omezená část okna prohlížeče, ve které návštěvník vidí web – a kterou nevidíte v žádné statistice). Uživatel může mít výše uvedené namixované zcela libovolně, a přesto chcete, aby u vás nakoupil (či jinak konverzoval… muhehe).

Při tvorbě layoutu musíme brát ohled především na délku řádku odstavců textu, která výrazně ovlivňuje čitelnost webu. Existují layouty, které se zaměřují na různé rozměry contentportů a layouty, které ovlivňuje přednastavená velikost písma uživatele. A je i takový, který ignoruje obojí.

Základní skupiny layoutů jsou fixní, roztahovací, fluidní, elastické, hybridní a adaptabilní. Rovněž je u spousty článků uvedeno, že layout webu je nutné postavit na základě konkrétních požadavků z cílové skupiny návštěvníků. Co se ovšem dočtete málokdy je názor autora na to, kdy jaký layout uplatnit.

Roztahovací layout

Ideální pro malá rozlišení displaye a 1 sloupcové layouty. Tj. mobily. Tím jeho výhody končí, protože vysoká variabilita displayů dává prakticky nulovou kontrolu nad délkou řádku a tudíž i celkovou čitelností obsahu webu. O nějaké grafické či typografické preciznosti nemůže být u většiny webů s roztahovacím layoutem řeč.

Fluidní layout

Kompromis mezi fixním a roztahovacím layoutem. Web se roztahuje a smršťuje v určitých mezích, které stanoví webdesigner. Např. 770 až 1200px. Výhodou je částečné přizpůsobení webu uživateli, nevýhodou je vyšší náročnost testování obsahu v různých rozlišeních a nepřizpůsobení bitmap vzhledem k ostatnímu obsahu (tj. web může vypadat v krajních mezích divně).

Dokážu si ho představit pro weby nezanedbatelným procentem návštěvníků s 800×600 (kteří nemohou upgradovat… státní správa?), ale i tam moc ne. Když se vám váš obsah bez změn velikosti obrázků nebo textu čitelně vejde do 800×600, proč ho roztahujete na 1024? Protože je to moderní? Když se tam naopak čitelně nevejde, tak jste zvolili špatný typ layoutu…

Elastický layout

Roztahuje se zároveň se zvětšovaným textem. Zachovává tedy proporce webu vyjma bitmap (což může a nemusí vadit). Nevýhoda je vidět na první pohled – nízká rozlišení a potřeba většího textu vytvoří obratem horizontální scrollery. Ačkoliv existují autoři s jiným názorem, neliší se zas tak moc od funkce ZOOM moderních prohlížečů. Nebo spíše porovnávat elastický layout se zoomem v prohlížeči je zcela mimo mísu.

Technologicky je zoom v prohlížeči nadřazen použitému layoutu, weby s elastickým layoutem budou tedy prohlížečem zoomovány velmi podobně, jako weby s ostatními typy layoutů (se všemi souvisejícími výhodami a nevýhodami). A vzhledem ke stále vyššímu rozšíření zoomu tedy elastický layout nedává žádnou výraznou výhodu, kvůli které byste ho chtěli použít.

Adaptabilní layout

Layout využívá jednoduchý javascript, který zaměňuje použitý kaskádový styl dle aktuální šířky viewportu a umožňuje tak webdesignerovi výrazné změny v rozvržení webu. Možnost dotaženého zpracování webu s ohledem na aktuální rozměry prohlížeče, je vyváženo vyšší cenou (musíte udělat víc stylů, nařezat víc obrázků, ladit cíleně v několika velikostech).

Tento layout umožňuje obejít nevýhody liquidních a fluidních layoutů při použití komplikovanějších grafických prvků. Technologické řešení poskytuje např. Cameronův Resolution dependent layout.

Hybridní layout

Kombinuje některé z vlastností různých typů layoutů – např. elastické layouty degradované minimální/maximální šířkou, roztahovací layout s jedním fixním sloupcem apod.

Fixní layout

Přijde na řadu až příště. Layoutů samozřejmě můžeme najít víc – většinou jsou založeny na jednom z výše uvedených přístupů a lehce ho modifikují (např. Jello Molds).

Komentáře

rss komentářů
1. Miroslav Holec
11. 01. 10, 10.14

Ve skutečnosti není volba až tak složitá. 800×600 používá maximálně 5% uživatelů ve státní správě. Jinak průměrně 2% uživatelů (mluvím o ČR). Dělat fluidní layout pak postrádá smysl, protože při větší šířce (např.: 1200 px) naráží na nečitelnost textu – dlouých řádků. Řešením by mohl být adaptabilní layout, který zvětší mj. i velikost písma a tudíž i čitelnost. Existují tu ale vyjímky, které mají JS vypnutý. Dělat několik CSS si myslím, že je pro údržbu webu taky docela zatáčka. Elastický layout jste popsal a vystihl správně větou „nedává žádné výhody“. Roztahovací layout je pro naprostou většinu webů nepoužitelný, bavíme se o využití jen pro specifické projekty.

Co nám zbylo? Hybridní layout, který je opět užitečný pro nějaké specifické projekty a nebo dnešní standard, kteří mají uživatelé i designéři nejraději a o kterém se dočteme zřejmě v příštím díle.

Ono obecně je nejdůležitější, jak je poskládáno „to jisté“ uvnitř layoutu.

2. Aleš Roubíček
11. 01. 10, 10.27

Ad Konverzoval. Není náhodou konverzace něco jiného než konverze? Pro to druhé máme sloveso konvertovat :)

3. Michal Marek
11. 01. 10, 10.32

souhlas s [1] a i v článku je to napsané, dnes nemá význam, pomineme-li nějaké hodně specifické případy, dělat jiný než fixní / hybridní layout. Těším se na další díl.

4. Filosof
11. 01. 10, 10.44

[2] proto je za tím ten šílený smích ;-)

5. Aleš Roubíček
11. 01. 10, 16.16

[4] Aha, muhehehe :)

6. Tomáš Kapler
11. 01. 10, 21.05
  1. pro vnitřek prohlížeče se afaik ujal termín viewport a není pravda, že není v žádné statistice (teoreticky by neměl být problém přesvědčit třeba Google Analytics pomocí pár řádků javascriptu)
  2. při této příležitosti bych doporučil nástroj z google labs http://browsersize.googlelabs.com/ (jen nefunguje pro centralizované weby, ale chytrý člověk si poradí)
  3. máš už docela zastaralý wordpress
7. Freeze
11. 01. 10, 22.38

Zajímavý článek, jako vždy. Minimálně jsem se ujistil, že neschopnost udělat pěkný roztahovací layout nepramení jenom z mé nešikovnosti :)

At konverzovat – nečít komentáře, tak jsem to chápal jako narážku na internetové diskuse a chaty (*od slova chat z anglického originálu, nikoli malé stavení v podhůří).

8. rony
12. 01. 10, 09.29

ten „contentport“ je nejaka barlicka, tiez si myslim, ze si len nevedel spomenut na „viewport“, co je zrejme presne to, na co myslel. Nejake mechanizmy na jeho „zmeranie“ do statistik existuju (bohvie ako sa pouzivaju kedze sa to neda urobit univerzalne pre akykolvek prehliadac).

9. rony
12. 01. 10, 09.43

uz dlhe roky som skor priaznivec toho, ak layout webu co najviac mysli na co najsirsi rozsah pouzitelnych klientov (prehliadacova/zariadeni/navstevnikov). V zmysle zasady: nech radsej vyvojar (v akejkolvek oblasti) venuje 10000 minut k praci naviac ako keby mal pouzivatel jeho prace venovat jej pouzitiu minutu naviac ako je nevyhnutne (minutu nevenovanu ucelu ale roznym podruznym neprijemnostiam).

Takze preto sa NEDA nikdy urcit, co je najlepsie – taky hentaky layout. Viem len velmi zhruba urcit, ze pre istu velku cast projektov je fixny layout zle riesenie. S urcitostou viem aj to, ze pre istu presne definovanu cielovu skupinu je hlupe venovat sa alternativam, ktore nastanu v skutocne extremnych podmienkach.

Rovnako som sa za niekolko rokov naucil, ze prihliadat na aktualny stav statistik typu „teraz frcia 17“ monitory a rozlisenie 1024×768px" je najhlupejsia cesta ako definovat vychodzie parametre pre svoj projekt. V istom mensom percente si to mozem vsak dovolit ak mam dopredu jasny plan „o rok sa znovu redizajnuje a mam to uz aj zaplatene“.

Kym pred par rokmi sa zdalo, ze svet webu sa skonsolidoval a standardizoval takmer do unifikovaneho stavu – vsetci maju pocitac, vsetci maju horedole podobny monitor (takmer rovnaky pomer stran, takmer unisono rozlisenia – holt LCD…), takmer rovnako spravajuce sa prehliadace, takmer identicke vstupne zariadenia (mys v pravej ruke). Dnes sa ukazuje, ze sa v poslednych par rokoch toto vsetko rozislo ako smrad.

Mame tu odrazu tisice pouzivatelov, ktori uz nemaju JEDINE okno do webu. Maju pocitac doma, v praci. Maju mobil, maju maly notebook. Lenze okrem tychto technicky odlisnych zariadeni mozu v klude mate pre kazdy z nich ine naroky na obsah, ktory chcu z nich dostat. Dokonca aj pre sucasne otvorene rovnake URL by chceli mat na kazdom takom zariadeni „trochu“ inak zobrazene data, dokonca mozno aj trochu inak prioritizovane – typicky, pridem domov a v tych istych „novinach“ ma viac zaujimaju trochu ine temy ako na tom istom webe v praci.

Takze aky layout zo vsetkych menovanych?

Nech to preboha neurci prstom grafik, koder ci nebodaj databazovy specialista.