Čo s tými 5 % vo fluidnom layoute
Veľmi radi sme si pomazali ego, až sa leskne, významom typografie na webe. Povýšili sme ju na jedinú modlu ohýbajúcu všetko ostatné vysielané obrazovkou k očiam nebohého návštevníka: Spravte najprv kostru s textom! Pohrajte sa s písmom! Otestujte čistý layout! A keď Vám zostane čas, vyplnte to troškou grafiky!
Práve posledná veta zostáva jablčným vínom sváru. Práve v tomto sa zamotávame v diskusiách o význame webu v komplementárnom spojení s vizuálnym zážitkom. V obrázkoch vkladaných ako púha (zároveň žiadaná, zároveň informačne zbytočná) ego vlastníka a autora masírujúca proprieta celku, ktorý hádžete ako svine perlám je tých zostávajúcich päť percent.
Najhlasnejšie skandovanie spojené s mexickými vlnami prichádza vo vetách ako je *nemožné skĺbiť dokonalú webovú grafiku* (povážte, že na 96 DPI webovej stránky voči 3-6 tisíckam DPI stránok časopisu Playboy) s viewport rešpektujúcim layoutom. Vraj to nejde. A ide to len s krvavými šrámami na koncepcií, vzhľade webu a hlavne *na duši grafika.*
Nejde ten 800 pixelov (pardón po novom 1024) široký obrázok „gumičkovať“ a keby sa gumičkoval, tak sa vlastne poškodzuje. Strašné veci sa to dejú.
Skúsme teraz hľadieť na layout stránky vrátane grafiky ako na *vrece plné objektov.*
Pozrime sa na svoje výtvory na webe – iba pohľadom. Odlíšte jednotlivé prvky, objekty. Sú to skutočne objekty? aj tá efektne ohnutá fotografia otočená o 10 stupňov s tieňom cez ktorú je položené plniace pero? Je to objekt? Alebo je celý tento výjav akási kompozícia a objektom je akýsi obdĺžnik?
Nie je náhodou ten kruh s extra super ponukou nakoniec fyzicky zložený z dvoch dielov, ktoré ste prácne „naštelovali“ k sebe ako dlaždičky?
Rozoznateľné objekty na stránke by mali byť skutočnými objektami v layoute.
Skutočné objekty rozmiestnite na stránke a určite im vo vzťahu k viewportu alebo k iným prvkom jasné pravidlá. Nastavte im medze voľnosti. To je zásadný rozdiel od postupu, kedy grafickú časť uložíme z Photoshopu ako JPEG.
Vytvorte aj objekty, ktoré nie je vidno. Ako príklad majme výjav, kde *skala* zakrýva *slnečný kruh,* sú tri objekty. *Pozadie s horizontom,* skala v popredí a slnko. Už nie je slnko necelý kruh. Ponechajme ho celé a objektom skala ho iba prekryme. Určime vzťah slnka k pozadiu, vzťah skaly k slnku.
Povedzme si, že slnko bude vždy niekoľko dĺžkových jednotiek od ľavého okraja kompozície. Skala bude vždy v strede kompozície.
Vo fixnom webe nemáme s kompozíciou problém – je to *jedna fotka a bodka.*
V adaptívnom layoute však menia objekty svoje vlastnosti. Pozadie sa rozširuje. V našom prípade sa rozširovaním pozadia mení vzdialenosť slnka a skaly. V jednom okamihu slnko vykukne spoza skaly celé. V inom sa úplne skryje.
Áno, je to pracné a náročné na fantáciu. Dokonca veľmi ťazko realizovateľné, pokiaľ podklad na web je jediný veľký jpeg.
Dokonca musíme myslieť aj na časti objektov, ktoré nie je v ideálnej kompozícií vidieť.
Po rozklade kompozície (skôr vo výtvarnom zmysle) by sme mali myslieť na už spomínané „neviditeľné“ časti objektov a aj celkom skryté objekty.
Fyzicky objekty *polohujeme prostriedkami CSS* (ale aj v štruktúre HTML dokumentu). Môžeme tak slnko nastaviť na pozíciu absolute top center. Kopec na top right. Pozadie bude nejaký horizont v background top right aby nam kopec neputoval krajinou pri rozširovaní okna prehliadača. Logo stránky absolute top left.
*Predstavili ste si to?*
Horizont musíme navrhnúť najlepšie opakovací – aby pri napojení pravého okraja plynule naviazal na ľavý – niečo ako 360 stupňový horizont. Objekty ako logo, slnko a vrch vytvorime s priesvitným alfa kanálom.
Môj príklad je pomerne jednoduchý a ľahko sa skonštruuje aj v hlave.
Celkom určite však urobíte aj omnoho zložitejšie konštrukcie aj so spojením fixovaných pozadí, zložitých prekrytí objektov vo viac ako dvoch vrstvách.
Dosť sa to podobá práci s programom Adobe Photoshop pri práci s layers.
Pokiaľ ste nepostrehli prečo hovorím o 5 percentách, tak si prečítajte články
* Web Design je z 95 % typografie (1. část)
* Web Design je z 95 % typografie (2. část)
Fotografia z fotosearch.com
