Šuplík Honzy Hučína

Skok na navigaci (menu)

Tento blog je v současné době uzavřen.
Pokračování blogu na bloguje.cz jsem zrušil. Pokud budu někdy pokračovat, bude to spíš tady.

Komentovaný článek

Internet a vše kolem
11. 1. 2005

Layout a šířka: rozhoduje obsah

„Jak široká má být webová stránka?“ ptají se často začínající webmasteři. V diskusi na Jakpsatweb.cz se tahle otázka objevila za poslední měsíc nejméně třikrát. Ale i profíci si rádi podiskutují o fixním a plovoucím (gumovém) layoutu. Moje odpověď na podobné otázky zní: „To záleží, co na stránkách je.“

Před pár roky se moderní layout dělal ještě pomocí tabulek, CSS se využívalo jen doplňkově. A tak přicházely v úvahu jen dva základní typy: fixní (s pevnou šířkou) a plovoucí (gumový, se šířkou podle velikosti okna). Kaskádové styly umožňují dnes daleko víc, základní princip ale zůstává – typ rozvržení stránky se musí silně řídit obsahem.

Marek Prokop napsal už v roce 2001 v článku Jak zvolit šířku stránky několik zásad, které je dobré si projít i dnes:

  1. umístění nejdůležitějších informací do bezpečné oblasti
  2. zobrazení souvislé textové oblasti bez rolování
  3. možnost vytištění stránky na tiskárně
  4. rozumně dlouhé řádky

Zásada 3 je proveditelná speciálním stylováním textového výstupu, proto pro samotnou šířku stránky není rozhodující. Zásadu 2 je sice zvlášť vhodné, ale dost obtížné ne moc lehké (zejména pro začátečníky) dodržet u zařízení s velmi malou šířkou obrazovky (PDA). Stěžejní jsou zásady 1 a 4.

Souvislý text

Většina webových stránek dnes stále jako prvořadou informaci obsahuje souvislý text. Pokud by se nechal vypisovat po celé šířce obrazovky, pak v nejrozšířenějším rozlišení 1024×768 budou řádky šíleně dlouhé a nečitelné. Je tedy nutné ho nějak omezit. Proto je pro weby obsahující převážně texty nejvhodnější layout s danou šířkou, a to buď fixní pixelový layout (šířka prvků je uvedena v pixelech), anebo em-layout (šířka je udávána v jednotkách em, které se odvozují od aktuální velikosti písma). Každý z nich má své plusy. Zatímco pixelový layout je příjemný i pro dodržení zásad 1 a 2, protože se snadno odhadne, jak velkou část stránky uvidí uživatel v příslušných rozlišení, dobrou vlastností em-layoutu je dobře držící design při různých velikostech písma.

Fotogalerie a grafika

U souvislého textu má tedy čitelnost přednost před využitím celé plochy okna. Ale tam, kde jsou na stránce umístěné jiné objekty, typicky fotografie nebo grafika (ovšem mohou to být i objekty s texty), je naopak pro uživatele dobré, když vidí ze stránky maximum. Přednost tedy má plovoucí layout s šířkou odvozenou od šířky obrazovky.

Flexibilní rozmístění objektů (jsou-li stejně velké nebo se dají umístit do bloku se stejnou výškou) se totiž dá provést pomocí CSS vlastnosti float:left, takže se na řádek umístí tolik objektů, pro kolik je místo. Dobrým nápadem je zároveň dát pomocí min-width minimální rozměr stránky, aby u extrémně malých rozlišení byla zachována funkčnost (to platí u stránek, které mají kromě objektů ještě boční menu).

Úmyslně jsem nepsal o vícesloupcových sazbách a dalších layoutových vychytávkách. To by bylo na jeden příspěvek do blogu skutečně příliš.

Související:
Elastický design
Prečo používať fixnú šírku
Layout s pevnou šířkou kraluje

Vložit vlastní komentářNávrat k článkuRSS komentářů tohoto článku

Komentáře

[1] 11. 1. 2005, 11:19 – rony (Odkaz)

mozes vymysliet kopec zaujimavych veci, mne vzdy vadia dve veci:

- stranka mi na sirku nevojde do okna prehliadaca,

- naopak mam prilis vela volneho miesta

sirka riadku je diskutabilna vec, zavisi aj od vlastnosti pisma a vzhladu odstavcov, takze neplati nic absolutne v zmysle "vsetko nad 481px je necitatelne". koniec koncov layout moze byt kompletne fluidny a pritom text bude vzdy citatelny a nad istu medz sa nebudu riadky natahovat.

vsetci totiz chapu design stranky ako 1:1 k pevnemu navrhu, pricom to zdaleka nemusi byt pravda, prvky layoutu sa mozu kludne voci sebe pohybovat - fluidny moze kludne byt header - titulka uz len preto, ze to vyzera pekne, ked je na celej ploche stranky "nieco", samotny obsah sa uz moze opat riadit svojimi pravidlami a zvysne casti stranky mozu kludne "premyslat" a umiestnovat sa trebars podla sirky viewportu.

len je tu problem, mozno by sa mali uz rozhybat aj grafici a mali by dokazat navrhovat fluidne sirky stranok a nezotrvavat v zotmeni "naplacam z toho jpeg a potom sa to rozreze a bozechran pokial niekto cokolvek kamkolvek posunie" ;-)

fixny design riesia najma ludia, ktori maju utkvelu predstavu, ze stranka sa pozera jedine v prehliadaci velmi podobnom tom ich prehliadacu - na pozadi mi to vzdy evokuje, ze su prilis fixovani na svoje podmienky ;-)

takze mame web plny hranolovitych stranok typu

uzky pruh hore, vlavo male logo, pod nim obdlznik s superkul obrazkom, potom kdesi tam zalozkove menu. po stranach je vytienikovana hrana. v obsahu pidi pismo... ;-)

a ked si to nacitam do prehliadaca s trosku mensou sirkou a nastavenim fit to screen, tak z textu mam stlpik o sirke dvoch pismen, pretoze margin toho layoutoveho stlpca musi byt napevno ;-)

[2] 11. 1. 2005, 11:32 – Honza Hučín (Odkaz)

Ad [1] Ano, fixní pixelový layout je pro řezače obrázků ideální. Tvůj problém by možná vyřešil em-layout, kde se šířka prvků řídí velikostí písma.

Jenže IMHO se pořád vytrácí ten hlavní argument: layout se dělá podle toho, co na stránce má být.

BTW tento blog má fixní layout, ale možná ho ještě předělám do em-layoutu s dolním a horním omezení šířky.

[3] 11. 1. 2005, 15:03 – Marek Prokop (Odkaz)

Proč je obtížné dodržet zásadu 2 na malých obrazovkách? Samozřejmě se jedná o horizontální rolování.

[4] 11. 1. 2005, 16:10 – rony (Odkaz)

[2] nepochopil si ma trosku ;-) ja som narazal na to, ze nemusi byt vzdy sirka hlavneho bloku s textom v tom istom pomere k sirke headeru/titulky pri roznyhc sirkach viewportu. Proste dokonale fluidna stranka, ktora sa pekne rozlozi po viewporte ale pritom nemusi narusit citatelnost textu a pritom nebude 'emovacia' cize "zoomovacia".

moze sa prisposobovat velkost pisma sirke boxu pren urcenom, to zrejme by bolo vhodne ;-)

ale vzdy vidim pouzitelnejsiu metodu a prave pre text ponuknut moznost prepnut si zobrazenie stranky - bud nastrojmi v prehliadacmi ale aj beznym CSS prepinanim.

ten dokonale fluidny design by som ti asi musel predviest nazivo ;-) stale mam pocit ako keby si ludia namalovali obdlznik a snazili sa ho za kazdych podmienok dodrzat s rovnakym pomerom stran pri akychkolvek podmienkach - cize ak sa zmensi blok pre text, umerne sa musi zmensit header, header nesmie menit pomer stran atd. To nemusi vobec takto byt!

Pixel2Pixel presnost je prekonana a nedosiahnutelna ;) snazil som sa o to pred piatimi rokmi a teraz sa chystam si cvicne urobit layout, ktory bude rozbity do objektov rozmiestnenych po stranke ale ich vzajomna poloha nebude definovana medzi sebou ale vo vztahu k okrajom viewportu.

[5] 11. 1. 2005, 16:15 – rony (Odkaz)

[2] pozri vzdy tu trpi niekto predstavou, ze tento prvok musi byt takto presne do pixelu. musi byt presne v tejto polohe a dost ;-)
pritom by nenarusilo zasady vyobrazenia podstatnych prvkov stranky, pokial by boli v jednom pripade v inej velkosti alebo polohe, ci v inom vzajomnom pomere k inym prvkom.

[6] 12. 1. 2005, 08:53 – Honza Hučín (Odkaz)

[3] Nevyjádřil jsem se moc šťastně. Myslel jsem to tak, že to není lehké. Pro Dobrý web tedy nesporně ano, ale pro začátečníka jde o náročnou úlohu, má-li vychytat svůj layout na různá rozlišení od šířky 320 po 1600. A to odhlížím od přání zákazníka.

[7] 12. 1. 2005, 08:54 – Honza Hučín (Odkaz)

[4][5] Hele, Rony, fakt ti moc nerozumím. Ono se to bez příkladu těžko představuje, co přesně myslíš.

[8] 14. 1. 2005, 23:13 – rony (Odkaz)

[7] zhruba to, ze kym koderi a pouzivatelia bez problemov dospeli k pouzitelnosti fluidneho webu, grafici este nedokazu uvazovat o webovej stranke inak ako o ploche X krat Y. Pritom ale nastroje ako CorelDRAW ci Photoshop mi dokazu realizovat navrh grafiky vo vrstvach. Len ich netreba finalizovat do 1 jpegu, ktory potom iba rozrezeme ale tie jednotlive vrstvy naskladame na seba aj na webovej stranke.

Predstav si web, kde je titulka nie 1 jpegovy pruzok ale niekolko vrstiev (position:absolute), ktore sa navzajom prekryvaju. Jedna vrstva je prilepena top left, ina top right dalsia top center. Pri zmene sirky webu sa ich vzajomna poloha meni. Cast kazdej vrstvy moze byt "zakryta" a odhaluje sa az zvacsovanim sirky (nieco ako ked robis zaoblene rohy boxov a 1 gif urobis velmi siroky prave z toho dovodu, aby si mohol jednym gifom urobit box siroky 100px alebo 500px.
Vravim, ze treba trosku zmenit myslenie grafikov :-)

Podobne to myslim aj pri robeni stylopisu pre zariadenia s malou obrazovkou - tu je to skor otazka pre zadavatela, ktory musi pochopit, ze web nemoze vyzerat vsade na pixel rovnako a musi sa podriadit zakonitostiam a moznostiam roznych zariadeni. Preto musi najst kompromis medzi svojou poziadavkou "zachovat stranke tvar" a pouzitelnostou.

K tomuto článku není možné vkládat komentáře.

© Honza Hučín 2004–6

Šuplík běží na PIPNI.CZ. Díky!

sber.cermat.cz

RSS Šuplíku

RSS komentářů – souhrnně

U každého článku je samostatný RSS kanál pro komentáře.

Výběr článků

Posledních 10 článků

nebo podle data:

nebo hledání fulltextem:

Archiv všech článků

Poslední komentáře

Zabili mě, parchanti [2]

8. 8. 16:48 | Pepa

Cestou kolem blogu [2]

7. 8. 21:26 | Honza Hučín

Cestou kolem blogu [1]

7. 8. 21:02 | Honza

Vrtulník nad hlavou [3]

6. 8. 14:29 | Pepa

Taková hra na volby [1]

3. 8. 18:29 | Honza

Nejčtenější

Žádné údaje nejsou k dispozici.

O mně

*1967, absolvent MFF UK v Praze (1991)

statistik, analytik, programátor, učitel, hudebník

nyní Ústav pro informace ve vzdělávání

Životopis (RTF)

Napište mi