Grid a pevná šířka webu
Možná četli jste Filosofovy články o gridu, ve kterých propaguje mřížku pro návrh webu. A mřížka je tam popsána jako soustava pevných sloupců, oddělených pevnými mezerami, která má pomoci zachovat proporce, které designér stanoví.
Jak pravil Filosof "konec webů s dvěma pevnými sloupci a jedním roztahovacím". A to mi na tom vadí - že taková mřížka likviduje weby s proměnlivou šířkou. Mně by stačilo, že to bude zarovnané do sloupců, které si nějak zvolím, a které se mohou (a některé nemusí) roztahovat při změně okna prohlížeče. Můžeme uvažovat nad tím, že by sloupce byly definovány procentně - pak by to bylo dobré, je-li web dělaný třeba symetricky, nebo i na třetiny. Ale jak se mřížka stále víc propaguje, hodně se mluví o Zlatém řezu, a tentokrát nejde jen o obrázky na webu ale i o text, a tady je opravdu s roztahováním problém.
Krásný příklad textu do zlatého řezu je v přednášce ze sxsw2007. Je to součást tohoto dokumentu (pdf, 4MB). V první části je prezentace vertikálního rytmu a to, o čem je následující překlad, je někde od strany 47
Vztah písma a layoutu
Mějme grid jehož prvek je obdélník o hranách 2 em * 3 em, což tak zhruba odpovídá poměru zlatého řezu.
Udělejme si mřížku z těchto obdélníčků a mezi nimi mějme mezery 0.5 em
Bude vypadat nějak takhle:
Místo, které je mezi prvky textu, není zvoleno náhodně. Vztahuje se k jednotce, která se zase vztahuje k velikosti písma. Konec překladu
Vypadá to moc hezky ale je to pevná šířka. Kdyby to mělo být roztahovací do šířky, porušil by se ten vztah šířka:výška =2:3. Tož co teď si z toho má lama vybrat? Roztahovací layout nebo krásu pro oko?
Že gridy frčí, ukazuje i nová galerie designbygrid.com, která shromažďuje weby, které jsou navrženy podle mřížky, a jsou tam přesvědčovací články, tutoriály a pomůcky pro nadšené gridníky.
14 Komentářů
Přidat komentář
Předchozí články
14.05.2012 A tečka ... zatím30.08.2011 Diablo 3 - nový web a resources
24.08.2011 Teplo, dědečku, teplo ... a v létě, kdo by to tušil
18.08.2011 Diablo 3 - inferno
17.08.2011 Diablo 3 - článek o skillech na diablo.incgamers
16.08.2011 Diablo 3 - durability, gamescon, a nic se neděje
11.08.2011 Diablo3 - bashiokonoviny a odkaz na judgehype
08.08.2011 Diablo 3 - přehled tisku
02.08.2011 Diablo 3 - Bashiok obhajuje zrušení skill bodů
01.08.2011 Diablo 3 - Hromada nových informací o hře a beta testu
Dál už to nevede, ale můžete se vrátit nahoru nebo proslídit archiv blogu nebo nakouknout do ďábelského fora nebo na odkazy. Kontakt: sue@centrum.cz
Jak budeme mít všichni ta děsně velká rozlišení, bude čím dál méně lidí s potřebou roztahovacího layoutu.
Amatérské weby zase nemají žádný sofistikovaný layout a tudíž nepotřebují mřížku, jejich autoři dost často ani nevědí že nějaká mřížka vůbec existuje a zhusta bohužel nevědí ani to že je žádoucí omezit délku řádku kvůli čitelnosti.
Proto si myslím že jde o pseudoproblém vzniklý nemístným zjednodušováním a zobecňováním.
některé lze spatřit v této galerii:
http://www.cssliquid.com/
A jaký je smysl toho článku? intenzivní pocit, že jde o další "vlnu", tak jako byly nedávno třeba pružné layouty, které měly vypadat dobře pro 800 i 1024, a tvrdilo se, že jsou přístupnější. To už teď neplatí?
Co se týká omezení řádků - to je přece na uživateli, jak velkou šířku okna si zvolí. Co já mu budu tlačit do hlavy, co mu má vyhovovat? A opravdu mi u některých webů, které dodržují pravidla o malém počtu znaků na řádek, vadí, že musím furt rolovat po stránce dolů - je to nepřehledné, mnohem nepřehlednější než delší řádky u dobře strukturovaného textu.
Jestli si ovšem myslíte, že profesionální web má mít pevnou šířku, boť by to jinak pro profesionála bylo obtížné, máte pravdu, že jde o pseudoproblém :-)
a/ mřížka zakončuje éru roztahovacích webů
b/ roztahovací design je neprofi
ad a/ web v mřížce se dá udělat roztahovací, ale ve většině případů to nevrátí vynoloženou práci - čitelnost dlouhých řádků, fixnost fotek - ale vše je nějakým způsoběm řešitelné.
ad b/ kdes na tom byl, Richarde? :-)
Mřížka není nic nového a její používání přináší určité výhody. Profi web může být skvělý s promakanou mřížkou, ale stejně tak bez ní. Jde jen o kvalitu designéra :-)
b) dělám to za prachy od roku 2000 tak za tu dobu už něco vím. Vyzkoušel jsem všechny varianty, od plně a částečně flexibilních layoutů přes takové které mění rozměry podle velikosti písma až po ty které detekují rozlišení a podle toho si připojí styly.
Flexibilní layouty potřebují omezit délku řádku, takže stejně se budou natahovat jen v daném rozmezí. Zato se jim zesložití obrázky na pozadí, CSS (zvlášť pro MSIE 5) a tak, což klienta který to platí nepotěší. To rozmezí je navíc tak malé (obvykle cca 30% šířky) že to za ten opruz ani nestojí.
Layouty které mění rozměry podle písma mi strhali přímo webdesignéři (a poprávu), protože při neočekávaném DPI či zvětšení písma se může objevit horizontální scrollbar a to taky nepotěší.
Layouty přepínající styl podle rozlišení se také (prozatím) neujaly protože oproti fixním jsou dražší - ale kdyby to po mě někdo chtěl tak jsem pro.
Fixní layouty hodně usnadňují situaci ve formulářích, tabulkách, složitějších konstrukcích boxů atd.
Prostě v komerčních webech skoro vždy rozhoduje cena, u nekomerčních ať si to dělá každý jak chce.
Dlouze omílaný argument pro flexibilní layouty je "uživatel ví jak chce mít širokou stránku". Myslím že tenhle argument je naprosto lichý, uživatel má pro všechny weby jednotnou šířku stránky, obvykle danou rozlišením displeje.
V tom posledním souhlasím, kovaní grafici mají takové věci jako je mřížka nebo zlatý řez v oku, kolikrát vůbec nevědí o čem je řeč ale přitom to spolehlivě používají.
že gridy nelikvidují pružný layout, ale že pružný layout je už "profesionálně mrtev" a proto se mohly gridy vyrojit v takové míře :-)
Na jakou pevnou šířku se teď weby převážně dělají? Stále na rozlišení 800 nebo už 1024?
Ještě k tomu "uživatel má pro všechny weby pevnou šířku" .. ehm, asi jsem exot, ale když je to moc široké, hodím si tam (ctrl+B ve FF) boční lištu, když mi to připadá moc úzké, tak ji zas vyhodím. Takže i když okno je stejné, šířku si reguluju jak potřebuju... A u pevné šířky to nejde a to pak vrčím :-)
- já se snažím dělat pořád ještě na 800x600, ale záleží na klientovi, percentuelně má už 1024x768 docela drtivou převahu.
- Tady bohužel nerozhodují individuální zvyky ale statistika a testy. Asi každý z nás by dokázal navrhnout mnohem lepší rozhraní než prohlížeče nabízejí, nicméně máme smůlu, protože prohlížeče vytvářejí programátoři a nikoli webdesignéři.
Neskutečně mi vadí "dyzajnéři", kteří používají fixní šířky, fixní fonty a podobně. Ono se jim to moc hezky dělá a zákazníkovi mohou snadněji předvést krásně uspořádanou stránku. Jenže já to pak nemůžu na polovině počítačů pořádně číst. Ale to tomu, kdo si stránky objednal, už neřeknou. Proč asi?
Na větších obrazovkách se mi těžko čte řádek, který má 30 cm. Zároveň nemám rád nevyužité místo kolem pevných stránek, když to jde, mám po obrazovce spoustu okének... Takže stejně vše čtu v okně, které si přizpůsobuju tak, aby mi to vyhovovalo. Někdy to ale nejde, a pak z takových stránek rychle prchám...
Taky jsem udělal nějaké ty weby a všechny se dají číst od PDA po superultraširokovysoké obrazovky.
Fixní nastavení = lenost dyzajnéra.
Pokud nepochopíte smysl nastavení velikosti okna prohlížeče, tak alespoň pamatujte na zrakově postižené. Ti jsou z pevných hodnot čehokoli opravdu odvázaní.
Nějak ale nechápu jak může být nečitelný text ve fixním rozlišení 800x600 - když přijdeš z jiné stránky s fixním layoutem která má takové nebo vyšší rozlišení, nemusíš nic resizovat a přečteš to. A jestliže takových stránek je naprostá většina, což je, pak to přeci není problém.
Fixní rozlišení není lenost designéra ale praktická nutnost daná nedokonalostí technologie. Kdybys měl zájem, můžu ti poslat spoustu grafických návrhů které nezalomíš do flexibilního layoutu ani kdyby ses postavil na ucho.