Tvorba layoutu webu – teoretický úvod

3. března 2004

Většina webdesignérských návodů a příruček popisuje možnosti jazyků pro tvorbu stránek, avšak málokdy je důkladně probíráno, jakým způsobem s nimi správně nakládat při vytváření layoutu. Rád bych tedy tento nedostatek napravil a ukázal vám správnou cestu.

Budu předpokládat, že čtenář tohoto článku zvládá dobře HTML a CSS. Cílem těchto článků je takového čtenáře naučit používat tyto jazyky tak, aby výsledné stránky byly pro cílového uživatele použitelné a přístupné. Témata, kterými se budu zabývat, jsou sice často probírána ve weblozích a rozsáhlých diskusích (nebo spíše flamewars) ale zatím mi chybělo nějaké shrnutí celé problematiky. Nyní se tedy pokusím tento nedostatek napravit. Pro začátek se zaměřím hlavně na teoretické možnosti použití různých technik a zkusím je vzájemně porovnat.

Stránky v nonHTML formátech

Samozřejmě se vůbec nebudu zabývat stránkami v jiném než HTML formátu. Týká se to hlavně oblíbených Flash aplikací, WAP stránek a podobně. Přístup k jejich tvorbě je zcela odlišný a zabývají se jimi příslušné sekce Intervalu. Avšak když už jsem se zmínil o Flashi, nedá mi to, abych se nezmínil o tom, že jej často webdesignéři používají zbytečně na místě, kde by byla vhodnější klasická HTML stránka. Důvodů je mnoho, například Flash formát není indexován fulltextovými vyhledávači, jsou problémy s odkazováním na konkrétní místo ve Flash prezentaci, nastávají problémy s tiskem a podobně. Dobrý webdesignér by měl znát všechny výhody i nevýhody Flashe a měl by umět odhadnout, zda je v dané situaci vhodný či nikoli. Toto téma však již bylo mnohokrát diskutováno a není hlavní náplní tohoto článku.

Layout stránek

Co vůbec tento pojem znamená? Layout je rozvržením stránky, udržuje její logickou organizaci nejen pro počítač, ale hlavně pro uživatele, který vnímá jednotlivé části stránky jako logické celky (například logo, navigační menu, vlastní obsah, zápatí a další). Každý tento celek by měl mít svou stálou pozici, aby jej mohl uživatel rychle a bez problémů najít očima, kdykoli to potřebuje. Úkolem webdesignéra je co nejlépe prvky na stránce rozmístit.

Rámcový layout

Začněme tímto prehistorickým, avšak přesto dodnes používaným způsobem tvorby stránek. Jak je zřejmé z nadpisu, využívá se zde rámců (frames). Základem je rámcová struktura, která například definuje, že navigační menu je v zúženém rámu nejčastěji vlevo nebo nahoře a po kliknutí na položku v menu se obsah načte do hlavního rámce. Tento způsob má oproti dalším několik výhod:

  • Kód navigačního menu je na jediném místě, k jeho změně stačí změnit jediný soubor. Toho lze však dosáhnout také například pomocí skriptů na straně serveru nebo šablon v Dreamweaveru.
  • Navigační menu stojí na místě, takže na něj uživatel nemusí rolovat.
  • Uživatel může velikost rámců snadno přizpůsobit svým požadavkům (pokud mu to stránka umožní).

Věnujme pozornost i nevýhodám, pro které je rámcový layout velice často odsuzován:

  • Mohou nastat problémy s tiskem, mnoho uživatelů není schopno v prohlížeči při tisku nastavit, jaký rámec vlastně chtějí vytisknout.
  • Nelze vytvořit odkaz na konkrétní stránku (včetně rámcové struktury), s tím souvisejí i možné problémy s přidáním vybrané stránky do „oblíbených“ nebo s jejím nastavením coby domovské stránky.
  • Stránky s rámci nejsou indexovány některými vyhledávacími roboty.
  • Fulltextové vyhledávače, které indexují dokumenty v rámcích, pak při vyhledávání nabídnou odkaz přímo na ně – uživateli, který na odkaz klikne, se nenačte rámcová struktura, takže pak vůbec neuvidí navigační menu, a to výrazně snižuje použitelnost stránky.
  • Vlastní obsah i menu mají svůj prostor omezený velikostí svého rámce.
  • V menu nelze (bez použití JavaScriptu) zvýraznit aktivní položku, protože v daném rámci zůstává stále stejný soubor.
  • Problémy na mobilních zařízeních (PDA a podobně), které rámce nepodporují.

Podobně jsme na tom, pokud chceme používat vnořené rámce (iframes). Ty jsou sice součástí stránky, avšak jejich obsah je v odděleném souboru a práce s ním může opět uživateli a indexérům způsobovat stejné potíže.

Rámcový layout nemusíme automaticky odsuzovat. Každý webdesignér by měl nejdříve zvážit všechny nevýhody, a pokud zjistí, že pro daný projekt nemají velký význam, může rámce bez obav použít. Pro některé webové aplikace naopak mohou být rámce velice výhodné.

Tabulkový layout

Jinou možností, jak jednotlivé celky na stránce pozicovat, je zneužití tabulek (tables). Než se rozšířily prohlížeče s podporou CSS pozicování, byla to jediná možnost, jak umístit nějaký obsah na stránce vedle sebe. Proto se stal tabulkový layout velice oblíbeným, a používá se často dodnes, v důsledku zmatené situace okolo CSS, které pro mnohé nesplňuje očekávání. Ale o tom později. Nejdříve si opět řekněme něco o výhodách tohoto řešení:

  • Jednoduchost. Stačí trochu představivosti, zvážit, jak chceme prvky umístit, vhodně použít tabulku a vypnout zobrazení okrajů a pozadí, díky čemuž pak tabulka není poznat.
  • Kompatibilita. Tabulky pochází z dřívějších dob než CSS, jsou dokonce starší než rámce. Proto by se řádně navržená a napsaná tabulka měla správně zobrazit i na velmi starých prohlížečích (které ale používá mizivé procento lidí a ti nemohou v dnešní době čekat dodržování prastarých verzí standardů).
  • Tabulky nám poskytují poměrně široké možnosti, přičemž mnoho z nich nemá svůj ekvivalent v CSS. Dnes se však bez nich webdesignéři obejdou nebo využijí některé triky, kterými je napodobí. V CSS například chybí vlastnost ovlivňující vertikálního zarovnání uvnitř bloku (vlastnost vertical-align je zavádějící a slouží k jinému účelu) a musí se řešit různými fintami. Také zde v podstatě stále nejsou (fungující) vlastnosti, které by nahradily funkci tabulek (umístění dvou divů vedle sebe a zajištění jejich provázanosti – přizpůsobení šířky, výšky a podobně).

A nyní opět prozkoumáme odvrácenou tvář:

  • Závislost vzhledu stránky na kódu. Dnešní doba požaduje vzájemné oddělení kódu, významově spjatého s obsahem, od kódu, který se týká výhradně jeho vizuálního znázornění v prohlížeči. Tabulka však jednoznačně říká „toto je první sloupec a toto je druhý“, ovlivňuje tedy vzhled stránky a v HTML nemá co dělat. (To ovšem neplatí, pokud chceme zobrazit skutečná „tabulková“ data!)
  • Neúspornost kódu. Díky této nectnosti získal tabulkový layout také přívlastek vlakový. Nevíte proč? Stačí se podívat na kód. „TR TD TD TD…“ Uvědomme si ale, že neúspornost kódu stránek s tabulkovým layoutem nemusí souviset s tabulkami jako takovými, ale s tím, že autor zároveň nedostatečně využívá možností CSS, a v HTML tak najdeme i značky jako font, center a podobně.
  • Pomalost. Tabulka se totiž v některých prohlížečích zobrazuje teprve když získají kompletní zdrojový kód, což znamená, že se stránka nezačne zobrazovat ihned, ale až po úplném načtení.

Striktní DIV/CSS layout

Píšu striktní proto, že zde myslím tvorbu layoutu úplně bez použití tabulek. Ty se používají výhradně pro tabulkové informace. Při pohledu do takového kódu každý odborník znalecky pokýve hlavou. Jedná se totiž o způsob v dnešní době velice moderní, hlavně ve spojitosti s dodržením poslední striktní verze jazyka XHTML. Místo DIV/CSS bych sice mohl psát pouze DIV, protože obsah se vkládá většinou do elementů div, ovšem bez CSS bychom žádný plnohodnotný layout nevytvořili. Využívá se zde totiž metod nazývaných CSS positioning. Jednotlivé bloky jsou obvykle vymezeny značkou div s atributem id nebo class, který výsek kódu nějak pojmenuje, například „header“, „footer“ a podobně. Jejich vzhled je definován pouze pomocí CSS. Takže jak si stojí tato technika oproti předchozím?

  • Oddělení obsahu od vzhledu. Že to opravdu jde, dokládá zajímavý projekt CSS Zen Garden, který obsahuje jedinou stránku v mnoha různých skinech, jejichž výměna je způsobena pouhou záměnou souboru s CSS předpisem. Jak jsem psal výše, je to moderní pojetí tvorby stránek, které má i praktický význam.
  • Kód je přehlednější a stručnější, díky čemuž se načítá rychleji.
  • Stránka vytvořená tímto způsobem se zobrazuje postupně s tím, jak se načítá. Díky tomu může uživatel vidět na svém monitoru reakci prohlížeče téměř okamžitě po kliknutí.
  • CSS je velice mocný nástroj, který nám dovolí provádět na stránce poměrně hodně „skopičin“, díky kterým může rozvržení stránky vypadat opravdu zajímavě.
  • Závislost vzhledu na platformě. Tato vlastnost je velice významná, protože díky několika CSS definicím může stránka vypadat jinak na monitoru (plnobarevná a využívající velikosti obrazovky), jinak na mobilním zařízení (užší, s méně obrázky a bez zbytečného plýtvání místem) a jinak vytisknutá (opět s upravenou šířkou stránky, méně barev a podobně).

Ovšem stejně jako předchozí metody, ani DIV/CSS layout se neobejde bez nevýhod:

  • Neúplná podpora ze strany prohlížečů. Různé browsery podporují různé množiny vlastností CSS různým způsobem, a neexistuje žádný prohlížeč, který by je podporoval přesně podle norem W3C. Díky tomu musí každý začínající webdesignér trávit hodně času experimentováním, aby zjistil, co si může dovolit a co ne. Rovněž by měl mít nainstalovánu celou sadu různých prohlížečů, a to ještě v několika různých verzích. Pokud webdesignér stránky vyzkouší pouze v MSIE, pohled na ni v Mozille ho jistě překvapí, protože složitější stránka se může snadno rozpadnout nepředvídatelným způsobem. To samozřejmě platí i naopak. Situace se dále komplikuje rozlišením standardních a quirk režimů prohlížečů.
  • Nepřehlednost CSS kódu. Zatímco při pohledu na dvě vnořené tabulky je poměrně rychle zřejmé, jak bude výsledek vypadat, při pohledu na hromadu CSS definic trvá relativně dlouho, než si člověk uvědomí, jakým způsobem stránka „funguje“. Obvykle přitom musí neustále přepínat mezi HTML a CSS kódem. Z tohoto důvodu je dobré si navyknout na dodržování určité struktury a pořadí vlastností v CSS, značně si můžete usnadnit pozdější orientaci. Pamatujme i na možnost rozdělení kódu do více souborů.
  • CSS z nějakého (pro mě) neznámého důvodu nemá některé vlastnosti, díky čemuž poněkud zaostává za tabulkami. Vývojář přecházející na DIV/CSS layout z tabulek si musí zvykat, že celou řadu věcí prostě nemůže udělat. W3C zřejmě ani nechce podporovat stránky se složitým layoutem, jaký vidíme třeba na titulních stránkách portálů. V HTML ani CSS vlastně neexistují prvky, které by byly primárně určeny právě k těmto účelům. Proto se využívá hlavně různých triků a CSS hacků.

Občas se jako výhoda DIV/CSS layoutu uvádí i možnost navrhnout pořadí kódu v dokumentu jiné, než jak bude zobrazen. To však částečně zvládají i tabulky.

Ideální metoda

Jako obvykle, ani zde ideální metoda neexistuje. Nejlepší pro uživatele je dnes zřejmě DIV/CSS layout, ovšem pokud je skutečně dobře vyvinut a otestován. Pokud se najde uživatel, jehož prohlížeč CSS nepodporuje dostatečně korektně a stránka by se mohla rozpadnout, může mu být přístup k CSS definicím úplně zamezen, takže se mu zobrazí jen obsah se základním formátováním. Je to mnohem lepší, než nefunkční polotovar, na němž dokonce mohou být některé části zcela nepřístupné. Pro začátečníka je však tento způsob tvorby opravdu velice náročný a v případě nutnosti by mohl v některých případech navíc využít i tabulek. Je třeba si uvědomit, že tabulkový a DIV layout se mohou vzájemně prolínat a jejich společné použití se nevylučuje, i když tím přijdeme o některé výhody striktního DIV/CSS layoutu.

Porovnávání tabulkového a DIV/CSS layoutu bylo věnováno již mnoho diskusí, odborníci ovšem většinou vyzdvihují pouze výhody beztabulkového layoutu. Jak ale vidíte, zas tak růžové to není. Pro ty, kteří chtějí v porovnávání tabulek a divů pokračovat a zajímají se o jiné názory a pohledy, nabízím na závěr dva další poměrně relevantní odkazy:

Takže teoretický úvod máme za sebou, známe dostupné techniky a jejich výhody a nevýhody. Příště si ukážeme řešení konkrétních požadavků, které v reálu mohou nastat. Uvidíme přitom výhody a nevýhody layoutů přímo na praktických ukázkách.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Předchozí článek webaudit.cz
Štítky: Články

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *