Predtým než začnete prakticky implementovať layout, je potrebné vyjasniť niektoré základné veci. Prvým krokom by malo byť rozhodnutie o type layoutu. V zásade tu existujú tri možnosti.
• Fixné
• Flexibilné
• Elastické
CSS umožňuje layouty s pevnými alebo flexibilnými rozmermi. Pevné layouty sa zvyčajne pracuje s pixelovými hodnotami. Naopak flexibilné layouty sú založené na percentuálnych hodnotách. Obe varianty layoutu majú svoje výhody a nevýhody.
Pevné layouty sa zvyčajne používajú v prípade, že sú grafiky dôležité pre vytvorenie layoutu. (Aj keď existujú výnimky vďaka použitiu CSS pozadí). Ak je pri layoutoch dôležitá presná pozícia prvkov v pixeloch, zvykne sa používať pevná pozícia. V tomto type layoutu sa zvyčajne aspoň šírka layoutu stanovuje na pevný počet pixelov. Táto šírka sa zvyčajne nastavuje pre konkrétne obrazovkové rozlíšenia.
Naopak u flexibilných layoutov nie je stanovená pevná šírka. Layout sa zde prispôsobí šírke okna prehliadača.
U týchto layoutov sa napríklad šírka udáva v percentách. Ak užívateľ zmení veľkosť okna prehliadača, zmení sa aj veľkosť layoutu.
Vďaka moderným vlastnostiam CSS existuje ďalšia layoutová možnosť, tzv. responzívny layout. Tento layout sa prispôsobuje tak, že na smartphone vyzerá odlišne oproti počítaču. Tu na stránke PSD-Tutorials.de sa pracovalo s takýmto layoutom. Keď užívateľ otvorí stránku na počítači s "normálnou" veľkosťou okna prehliadača, zobrazí sa nasledovný obrázok.
Ak užívateľ zmení veľkosť okna, zmení sa aj usporiadanie prvkov na webovej stránke.
Vytvorenie responzívneho layoutu si vyžaduje značné úsilie. Je potrebné identifikovať veľkosť obrazovky návštevníka a následne mu zobraziť vhodný layout. A tento vhodný layout musíte vyvinúť pre rôzne veľkosti obrazoviek. Návštevník, ktorý zobrazí vašu stránku na veľkom monitore, napríklad dostane trojstĺpcový layout. Ak ju však zobrazí iný návštevník na smartfóne, uvidí jednostĺpcový layout.
Pre a proti jednotlivých variantov
Skôr než implementujete layout, musíte premýšľať o tom, ktorý z uvedených typov layoutu chcete použiť. Chcel by som vám stručne ukázať výhody a nevýhody pevných layoutov.
• Návrhové šablóny sa tu dajú určite najjednoduchšie implementovať.
• Ak sa orientujete na štandardné rozlíšenia, takmer nevznikajú problémy s vykresľovaním webovej stránky.
• Layouty sú ľahko pochopiteľné. (Tento benefit vám samozrejme pomôže, ak ako webový vývojár musíte zákazníkovi vysvetliť layout).
Pevné layouty však majú aj nevýhody.
• Vzhľadom na pevné rozmery sú nepružné a napríklad sa neprispôsobia veľmi malým alebo veľkým obrazovkám. Často sa plytvá veľa miesta.
• S ohľadom na dostupnosť majú nejaké obmedzenia.
Aj flexibilné layouty majú svoje výhody a nevýhody. Najskôr k výhodám.
• Layouty sa automaticky prispôsobia veľkosti okna prehliadača.
• Návštevníci si tak môžu veľmi ovplyvniť zobrazenie webovej stránky.
Avšak aj tu sú nevýhody.
• Výsledky môžete ako vývojár ťažko kontrolovať. Pokyny o layoute sa tak môžu implementovať len čiastočne.
• Obsah stránok by sa musel zložito prispôsobovať.
• Na veľkých obrazovkách sa krátke texty môžu zobraziť „neskvele“, keďže sa často zobrazujú len na jednom riadku. (CSS však ponúka príslušné vlastnosti ako min-width pre túto situáciu).
Elastické layouty predstavujú strednú cestu medzi pevnými a flexibilnými layoutmi. Ich hlavnou charakteristikou je jednotka em. (V súčasnosti sa stále viac preferuje rem. Oproti em sa rem vždy orientuje na koreňový element, a nie ako em na nadradený prvok).
V týchto layoutoch sú šírka a výška flexibilné. Dizajn stránky sa pomerne zväčšuje vzhľadom na veľkosť okna prehliadača. Tento typ dizajnu je určite najkomplexnejší, pokiaľ ide o praktickú implementáciu. To jednoducho preto, že je potrebné presne vedieť, ako sa prvky správajú pri zmene veľkosti okna prehliadača. Elastické layouty sa používajú najmä na webových stránkach, kde sa ponúka množstvo fotografií a videí.
Výhody elastických layoutov:
• Dostupné miesto sa optimálne využije.
• Obsah sa zobrazuje vždy maximálne veľkým spôsobom.
Ale samozrejme aj elastické layouty majú svoje nevýhody.
• Navrhovanie týchto layoutov je veľmi komplikované.
• Aj implementácia nie je vôbec jednoduchá.
Vyberanie
Musíte sa teda rozhodnúť, ktorú z uvedených variantov chcete použiť. Ak máte len začiatočnícke vedomosti v oblasti HTML/CSS, odporúčal by som vám začať s pevným layoutom. Kto už má pokročilé znalosti vo webovom vývoji, mal by naopak priamo pracovať s responzívnymi layoutmi. Tu ste na správnej ceste, nezáleží na tom, s ktorým zariadením sa nakoniec vaša stránka otvorí.
