Webdesign s mřížemi II
Jak lvové bijem o mříže, tentokráte ryze prakticky. Jak si načrtnout vhodnou mřížku a co s ní pak dál.
Jak probíhá tvorba webu, která je řízena mřížkou? Mrkněte na obrázek 1. Mřížka je soustava sloupců, mezer mezi sloupci a případných vertikálních obdelníků (sem vrazit fotku, tam něco jiného). Do mřížky můžete dále přidat např. soustavu čar, které představují velikost viewportů pro typická webová rozlišení (tj. můj design je dělán pro 1024×768 a já chci zajistit, aby uživatel viděl vše podstatné na první pohled).
Design se mřížkou neznamená, že si načrtnete okolo sloupců čáry a budete vytvářet nový osmisloupcový layout! Sloupce se dají slučovat a rozdělovat, ovšem v mezích mřížky. Tzn. Klidně sloučíte dva slouce a mezeru mezi nimi do jednoho většího, ale už nebudete slučovat jeden a půl sloupce s 0,25 mezery (nebo budete, ale pro začátek je jednodušší to nedělat).
Osobně preferuji základní mřížku ze stejně širokých sloupců a stejně širokých mezer mezi nimi. Mřížka se pak vytváří relativně jednoduše a design působí lépe, než špatně zvolené asymetrické sloupce / mezery. Ze stejně širokých sloupců se samozřejmě dá vytvořit i asymetrický layout – jde jen o to, které sloupce sloučíte (viz. layout 1, 2, 3).
Pokud chcete mít hodně možností volby, tak zvolte na začátku více sloupců (tj. osmisloupcová mřížka může vytvářet organičtější layouty než třísloupcová, ale zase je poměrně těžší se udržet s osmi sloupci na uzdě).
Při tvorbě mřížky je potřeba zvolit základní počet sloupců. Kolik? Nu přece podle informací, které chcete na web dostat! Osobně volím počet sloupců mřížky podle papírové skicy, kterou si načrtnu tužkou. A skicu zase tvořím na základě analýzy od analytika a nejlépe i textů od copywritera.
Mřížka nemusí mít statické rozměry – web je na rozdíl od novin velmi dynamické médium, a proto se mohou jednotlivé sloupce mřížky plynule roztahovat – ovšem pouze v proporcích daných mřížkou. Už žádné dva sloupce pevné šířky a prostřední, co se roztahuje jak prd v horské chatě.
Mřížka, to zní tak staticky
S mřížkou to máte jako s webovými standardy. Kdo nezkusil, ten bude tvrdit, že je to ubohý omezující prvek a bude si dále bastlit svůj (fakt organic and cool) dyzajn. Když se ovšem podíváte do světa reálného webdesignu, tak pochopíte, že mřížku používají prakticky všichni, kteří to s webem myslí opravdu vážně. Příklady webů s hezkou mřížkou necháme zase na příště.
Komentáře
potrefená lama strikes back :-)
co máš proti dvěma pevným sloupcům a jednomu roztahovacímu?
možná se mi to tak líbí proto, že nemám ty zkušenosti s horskou chatou ale mohl bys to trochu upřesnit?
Ja by som aj s článkom súhlasil. Dokonca si kreslím náčrtok a mriežka veľmi pomáha, ale niekedy je naozaj pekné z nej vybočiť. rečou tohto článku si spraviť cca 30–40 pomocných stĺpcov :-D
Ale inak súhlas. Na väčšine webov je mriežka potrebná a ak je nám nejaký web naozaj nepríjemný na pohľad (zväčša tie amatérske) tak je to najmä kvôli jej absencii.
SuE – porušují mřížku? :-) Tak vážně – který web vypadá dobře, když dokonale poruší veškeré zamýšlené proporce sloupců při šířce viewportu např. 1920px? I když pomineme, že se pak nedá číst text, který se smrskne na dva řádky, tak to nebude s největší pravděpodobností žádná velká sláva…
tak to jo,
jsem průkopník, bořič mříží :-)
ale vážně, na tu šířku nebude vypadat dobře nic jakkoli roztahovacího, leda pevný rozměr nebo něco jako uxmag, který tam přihodí další sloupečky
No nějaké pokusy s takto danou mřížkou jsem činil, ale nepřijde mi to moc praktické, stanovit si předem danou mřížku a pak se jí snažit držet. Jak to děláš? Umístíš si tuhle mřížku do vrstvy a na to pak umisťuješ objekty? Co když zjistíš, že jeden sloupec je moc úzký?
Daleko praktičtější mi přijde zapnutou si jemnější mřížku ve Photoshopu (rozdělení po 10 px) a na tu průběžně zarovnávat. Při vytváření objektů a vodítek stačí zapnout volbu „Přitahovat na mřížku“ a člověk má jistotu, že objekty mají rozměry v násobcích 10 px.
Plně souhlasím s Jiřím Tvrdkem. Navíc nechápu co se ti nezdá na prostředním roztahovacím sloupci?
[5] hmm.. s fotošopáckou mřížkou jsem zatím moc neexperimentoval, ale účinek to bude mít podobný..
Ad praxe – většinou si mřížku vytvořím jako soustavu vodítek.
Co udělám, když zjistím, že mi to nevychází? Předělám si mřížku, nebo daný objekt :-) – leč většina objektů se dá buďto přizpůsobit, nebo umístit do více sloupců, nebo prostě poruší mřížku.. když se to stane jednou, tak se nic neděje.. když vícekrát, tak už je lepší změnit proporce mřížky nebo ji předělat na asymetrickou.
[6] – jednoduše mám pocit, že nelze vytvořit web s jedním prostředním roztahovacím sloupcem tak, aby to vypadalo dobře. Uveď pls nějaké konkrétní weby, kde to dobře vypadá a já rád uznám, že se mýlím.. :-)
>> Příklady webů s hezkou mřížkou necháme zase na příště.
To už jsem myslím jednou slyšel, už se těším :))
S mřížkou plně souhlasím. Je to něco jako zlatý řez ve fotografování, layout pak vypadá podstatně lépe.
Mám ale dvě poznámky k prdu v horské chatě:
- Pokud mám v levém sloupci menu a v pravém sloupci obsah, při zvětšování okna prohlížeče nemám zájem, aby se menu roztahovalo, protože tlačítka v něm jsou stále stejně velká a vzniká tak nehezká mezera mezi obsahem a menu.
- Pokud je hlavním obsahem stránky tabulka se seznamem souborů a jejich atributů, bude uživatel vyžadovat roztahující se prd na horské chatě, aby se mu jednotlivé položky v tabulce pěkně zobrazily s dostatkem prostoru okolo. Zejména vezmeme-li v ůvahu zvětšení fontu uživatelem. Problém s příliš roztahujícím se obsahem může být vyřešen pomocí maximální šířky, která se dá snad, stejně jako minimální šířka, bez použítí JavaScriptu zařídit.
Určitě by se našla spousta dalších vhodných použití roztahujícího se sloupce.
Po prvních pár odstavcích jsem prodělal lehčí infarkt, protože jsem si konečně nakódoval osobní web, který brzo spustím a pokud by to celé nestálo vůbec za nic… no hrůzná to představa.
Jinak já používám také vodítka, je to praktické, pro mé velmi občasné designování to stačí… ale myslím že pokud to někdo chce dělat fakt profi, tak se mřížka hodí.
Ad prd v horské chatě: Souhlasím s Radkem Matějem – když mám menu, nebudu zrovna chtít aby mělo 300px na šířku a přitom z toho 100px textu (oh jak hrůzně to zní, ale dal jsem to jen jako příklad :-) )…
FILOSOF:
Samozrejme se da roztahovaci trisloupcovy layout resit s pevnym levym i pravym
sloupcem takovym zpusobem, ze definujes minimalni sirku a maximalni sirku
obsahu.
Nehrozi pak to, ze obsah bude na dvou radcich pri vysokem rozliseni. ;-)
Justice mříží je vražedným způsobem jak docílit otřele kvalitního
designu během pár minut… stačí namíchat barvy.
Intuice bez mříží poletuje kolem a nikdy není zřejmé kdy se přitulí pod
ruku neotřený kus materiálu, vidiny nevídané… stačí žít sen a bdít
v něm… ♥
Zajímavé čtení, ale sám se musím přiznat, že jsem mřížku nikdy nepoužil (vlastně jsem o něčem takovém nikdy neslyšel). Stejně tak jsem nikdy nekreslil náčrtek na papír.
Baví mě tak nějak zápasit s grafickými editory nebo rovnou PSPadem a čekat, co z toho vyleze. No asi by mě to neuživilo, ale na takové to domácí kódění je to pro mě ideální.