Šuplík Honzy Hučína

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