Jak zvolit šířku stránky
Marek Prokop, vydáno/aktualizováno: 23.4.2001/06.10.2003
Jak dimenzovat šířku stránky - to je, nebo by alespoň mělo být, velké dilema každého webového návrháře. Uživatelé internetu používají různě veliké monitory s různým nastavením grafického rozlišení. Některé stránky by navíc měly jít i vytisknout. Navzájem protichůdných požadavků je příliš mnoho a ideální univerzální řešení neexistuje. Co tedy s tím?
Zkusme si nejprve shrnout hlavní požadavky, které mají na rozhodování o šířce stránky vliv:
Nejdůležitější informace by se měly nacházet v tzv. bezpečné oblasti. Tou je myšlen výřez stránky, kterou po jejím otevření uživatel uvidí bez rolování (horizontálního i vertikálního). Američané mají pro bezpečnou oblast přiléhavý název "above the fold", tedy "nad přehybem". Tento název vychází z novinářské praxe, kde označuje horní polovinu titulní stránky, viditelnou na stáncích i pro ty, kteří si noviny nekoupí. Právě tato část musí zaujmout natolik, aby si čtenář noviny koupil (a dostal se tak tedy i k informacím "below the fold").
Jakákoli významově souvislá oblast textu musí být zobrazena na šířku celá bez nutnosti horizontálního rolování.
Je-li stránka určena k tisku, musí se vejít na šířku A4.
Nejčitelnější jsou řádky 30-70 znaků dlouhé - viz klasické novinové sloupce a knihy. Nad 80 znaků se řádek stává čitelný obtížně a 150 znaků široké řádky (normální velikost písma na celé šířce monitoru v rozlišení 800x600) už čte jen masochista.
Nyní se podívejme, jaké možnosti dimenzovat šířku při návrhu stránky máme k dispozici.
1) Plovoucí šířka
Zdálo by se, že se jedná o nejpřirozenější volbu. V každém případě se nejsnáze realizuje, neboť prostý HTML text neumístěný do tabulek a neovlivněný CSS se samovolně přizpůsobuje šířce vnitřního zobrazovacího prostoru prohlížeče. Při vyšším rozlišení jsou však problém příliš dlouhé řádky, které se od 80 znaků výše stávají obtížně čitelnými.
2) Pevná šířka
Pevnou šířku stránky docílíme jejím umístěním do tabulky s explicitně uvedenou šířkou v pixelech, např.
<table width="600"> Problém ovšem je, jakou šířku zvolit. Příliš veliká šířka přinutí majitele malých monitorů k nežádoucímu horizontálnímu rolování, o příliš dlouhých řádcích textu nemluvě a příliš malá šířka zase způsobí ve velikých oknech prohlížečů ošklivý prázdný prostor na straně.
3) Vícesloupcová sazba
Lékem na výše uvedené problémy může být vícesloupcová sazba. Šířku stránky totiž můžeme pomocí tabulky rozdělit na více sloupců. Jak samotná tabulka, tak jednotlivé sloupce přitom mohou mít buď pevnou, nebo plovoucí šířku. Příkladem je tato struktura, která vytvoří 2 sloupce, první široký 130 pixelů a druhý celý zbytek obrazovky:
<table width="100%">
<tr>
<td width="130"></td>
<td width="100%"></td>
</tr>
</table> 4) Varianty pro různé šířky
Poslední možností je si pomocí JavaScriptu zjistit šířku uživatelovi obrazovky a pak mu předložit stránku šitou přímo na míru. Je to sice způsob ideální, ale velmi náročný jak na realizaci, tak na následný provoz a údržbu stránek.
Samozřejmě zůstává otázka, který z uvedených způsobů zvolit. Jak jsem již napsal, univerzální odpověď neexistuje. Vždy je třeba vyjít z cíle stránek, předpokládaného publika, povahy obsahu a možností rozpočtu.
Nejčastěji se dnes stránky asi navrhují s pevnou šířkou pro rozlišení 800x600. Je to logické, neboť dle dostupných statistik má toto rozlišení nastaveno cca. 50% uživatelů a již pouze minimum používá rozlišení nižší. Zde jsou aktuální čísla statmarket.com ze 17.2.2001 získaná ze statistik návštěvnosti více než 50 milionů webů:
| 640x480 | 7% |
| 800x600 | 53% |
| 1024x768 | 31% |
| 1152x864 | 2,5% |
| 1280x1024 | 2,5% |
| jiné | 4% |
Málokdo si ale uvědomuje, že rozlišení obrazovky ovlivňuje velikost zobrazovací plochy jen nepřímo. Ne každý má prohlížeč roztažen na celou obrazovku. Ve skutečnosti čím vyšší rozlišení, tím spíš je prohlížeč stažen do menšího okna.
Kromě toho menu, nástrojová lišta a stavová řádka prohlížeče mohou vertikálně ubrat až 120 pixelů a další část z výšky obrazovky sebere lišta Windows, která však někdy může být orientovaná i vertikálně. MSIE 5 a NN 6 mohou mít vlevo zobrazený boční panel, který horizontálně ubere asi 160 pixelů.
Všechny tyto ztráty šířky a výšky se navíc násobí, pokud má uživatel nastavené ve Windows velké systémové fonty, což má na vyšším rozlišení mnoho starších lidí se slabším zrakem.
Z těchto důvodů i v dnešní době velkých monitorů zůstává bezpečná oblast široká jen 600 a vysoká cca. 350 pixelů. Vše ostatní je "za přehybem" a pokud tam umístíte důležitou informaci, riskujete, že ji uživatel nikdy neuvidí.
Tato úvaha vede nejčastěji k řešení pomocí vícesloupcové sazby. Zůstává sice pevná šířka optimalizovaná pro rozlišení 800x600 (což znamená šířku max. 780 pixelů, neboť něco zaberou okraje a posuvník prohlížeče), avšak nejpodstatnější informace se umístí do sloupce (či sloupců) nepřesahující šířku 600 pixelů. Zároveň se vytvoří speciální, užší stránky určené výhradně pro tisk.
Protože je grafický návrh vícesloupcové sazby dosti náročný, často se pro čistě informační stránky omezené nízkým rozpočtem používá pevná šířka 600 pixelů. Aby v tomto případě na větších monitorech nevznikal ošklivý okraj vpravo od textu, celá tabulka se vycentruje. Okraje tak sice vzniknou dva, avšak poloviční velikosti a působí tedy méně rušivě. Tento trik využívá např. Yahoo, nebo Seznam.
Jednosloupcová sazba o plovoucí šířce, tj. nijak neovlivněný HTML text se hodí spíše pro stránky s nejnižším rozpočtem obsahující hodnotné informace určené zkušenějším uživatelů (např. pro universitní prostředí). Bude-li obsah takových stránek opravdu stát za to, čtenáři si ho buď vytisknou, nebo si zmenší okno svého monitoru na velikost z hlediska čitelnosti optimální.
Máte-li naopak peněz nadbytek a tvoříte-li např. firemní prezentaci, která musí být za každých okolností graficky dokonalá, můžete vyzkoušet dynamickou šířku stránky (případně počet sloupců) přizpůsobenou individuálnímu nastavení každého uživatele. K tomu však již budete potřebovat JavaScript a nejlépe i nějakou technologii dynamického generování stránek na straně serveru.
K tomuto článku jsou připraveny příklady a velmi praktický obrázek, který si můžete zkopírovat a během návrhu svých stránek umístit na pozadí. Tak budete mít k dispozici přesné měřítko ukazující bezpečné oblasti pro různá rozlišení obrazovek i pro tisk na základní formáty papíru.
