Před samotnou implementací layoutu je třeba vyjasnit některé základní věci. Nejprve byste měli rozhodnout o typu layoutu. Zásadně existují tři možnosti.
• Fixní
• Flexibilní
• Elastický
CSS umožňuje layouty s pevnými nebo flexibilními rozměry. U pevných layoutů se obvykle pracuje s rozměry v pixelech. Naopak flexibilní layouty jsou založeny na procentuálních hodnotách. Obě varianty layoutu mají své výhody a nevýhody.
Pevné layouty se obvykle používají, když jsou grafiky důležité pro layout. (Zde existují výjimky díky použití CSS pozadích). Pokud jde o pixelově přesné rozmístění prvků v layoutech, pak se obvykle sáhne i k pevnému pozicování. U této formy layoutu se obvykle alespoň určí šířka layoutu na pevný počet pixelů. Tato šířka obvykle míří na konkrétní obrazovková rozlišení.
Situace je odlišná u flexibilních layoutů. Zde není určena pevná šířka. Layout se zde pak řídí šířkou okna prohlížeče.
U těchto layoutů je například šířka udávána v procentech. Jestliže uživatel upravuje velikost okna prohlížeče, mění se i velikost layoutu.
Díky moderním vlastnostem CSS existuje další forma layoutu, a to tzv. responsivní layout. Zde se layout mění tak, aby vypadal například na smartphonu úplně jinak než na desktopu. Zde na webu PSD-Tutorials.de se například pracovalo s takovým layoutem. Jestliže uživatel otevře stránku na desktopu s "běžnou" velikostí okna prohlížeče, vznikne tento obrázek.
Pokud však okno setáhnete, dojde skutečně ke změně uspořádání prvků na stránce.
Vytvoření responsivního layoutu je poměrně náročné. Musíte totiž zjistit velikost obrazovky návštěvníka a následně mu předložit vhodný layout. Tento vhodný layout musíte vyvíjet pro různé obrazovkové velikosti. Například návštěvník, který otevře vaše stránky na velkém monitoru, dostane třísloupcový layout. Návštěvník přistoupí na web ze smartphonu, uvidí jednosloupcový layout.
Výhody a nevýhody jednotlivých variant
Před tím, než začnete s layoutem, musíte zvážit, kterou z uvedených forem layoutů chcete použít. Trochu vás proto chci seznámit s výhodami a nevýhodami pevných layoutů.
• Designové šablony lze zde nejsnáze aplikovat.
• Pokud se řídíte standardními rozlišeními, není problém s zobrazením stránky.
• Layouty jsou snadno pochopitelné. (Tento užitek budete mít, když budete chtít jako vývojář webových stránek vysvětlit layout zákazníkovi).
Pevné layouty však mají své nevýhody.
• Kvůli pevným rozměrům nejsou flexibilní, takže se například nehodí pro velmi malé nebo velké obrazovky. Často je zde mnoho ztraceného místa.
• Jsou zde omezení týkající se přístupnosti.
I flexibilní layouty mají své silné a slabé stránky. Nejprve k výhodám.
• Layouty se automaticky přizpůsobují velikosti okna prohlížeče.
• Návštěvníci tak mají velký vliv na zobrazení stránky.
Ale i zde jsou nevýhody.
• Vývojáři těžko kontrolujete výsledky. Nastavení layoutu se tedy dá jen částečně aplikovat.
• Obsah stránek musí být pečlivě upraven.
• Na velkých obrazovkách může být zobrazení krátkých textů "nehezké", protože se často zobrazují pouze na jednom řádku. (CSS zde však nabízí vhodné vlastnosti jako min-width).
Další formou layoutu představující zlatou střední cestu mezi pevnými a flexibilními layouty jsou tzv. elastické layouty. Jejich hlavním rys je jednotka em. (V této době se stále více používá rem. Na rozdíl od em se rem vždy řídí kořenovým prvkem, nikoli nadřazeným prvkem).
U těchto layoutů jsou šířka a výška flexibilní. Design stránky se postupně přizpůsobuje velikosti okna prohlížeče. Tato forma návrhu je ze strany implementace pravděpodobně nejnáročnější. To je z důvodu, že je třeba vědět přesně, jak se prvky budou chovat při změně velikosti okna prohlížeče. Elastické layouty se využívají především na webových stránkách, kde je nabízeno mnoho fotografií a videí.
Výhody elastických layoutů:
• Dostupné místo se optimálně využívá.
• Obsah je vždy zobrazen co největším způsobem.
Ale samozřejmě i elastické layouty mají své nevýhody.
• Návrh těchto layoutů je velmi složitý.
• Implementace není vůbec snadná.
Kvalita volby
Musíte se tedy rozhodnout, kterou z uvedených variant chcete použít. Pokud jste teprve na začátku vývoje v oblasti HTML/CSS, doporučil bych začít s pevným layoutem. Kdo má pokročilé znalosti ve vývoji webových stránek, měl by pracovat přímo s responsivními layouty. Zde jste na správné cestě, bez ohledu na to, s jakým zařízením bude vaše webová stránka nakonec zobrazena.
