«   » 

5. február 2006 17.45 WEB

Prekvapujúci fluidný layout

Musím povedať, že fluidnému layoutu fandím za každých okolností. Pragmatické dôvody k nemu mám a budem mať. Čím dlhšie, tým logickejší mi pripadá :-) Toľko úvod pre tých, čo moje militantné výpady na adresu fixkových layoutov nestihli :-)

V posledných mesiacoch už rôzne tie galérie webdesignu nechŕlia desiatky nových výtvorov (nudne rovnakých) a preto je ich prezeranie občasnou zábavou.

Dnes som si však uvedomil, že obdobie evanjelizovania netabuľkového layoutu skončilo. Dokonca sa objavujú teoretické úvahy o tom, že logická stavba layoutu do CSS vlastne nepatrí. Neoddeľuje totiž v dokumentoch obsah od ostatných jeho častí. V tomto musím dať za pravdu dôkazom cez vyhľadávače. Tie totiž v podstate rovnaký význam dávajú textom v nedôležitých boxoch, slovám v menu. Pritom najskôr ma pri hľadaní zaujíma blok s obsahom. Ten však layoutom nie je možné "štandardne" definovať.

Chcel som si pozrieť jeden web a nechal som ho načítať v záložke na pozadí. Pozrel som naň a ako tradične som chytil pravý okraj okna prehliadača a urobil pohyb doprava a doľava. Lenže on sa rozťahoval! Naozajstné prekvapenie! Doslova som očakával, že buď zostane fixný alebo sa nanajvýš "premiestni" do stredu.

Tento web je pre mňa takým malým dôkazom ako sa navonok zložitý grafický návrh premení na fluidistické evanjelium. Až po pár sekundách skúsenejšie oko rozoznáva kadiaľ asi vedú CSSkové boxy.

Tentoraz ma položka z galérie až tak nenudila :-)

Hneď po nej som sa zahral ešte s jedným zaujímavým webom presýpaním boxov (taktiež meňte šírku okna). Floatové hrátky s pretekaním boxov som už neoficiálne riešil pri vývoji firemného CSS layoutu. Vtedy ma v nadšení napadlo, že Spravodaj prerobím na "sypúce sa kočky". Nestalo sa ;-) Vráťme sa k linkovanému webu: úžasné.

Pokiaľ sa ti zdá, že tento článok by sa hodil do výberu zaujímavých stránok, tak ho pošli do vybrali.sme.sk

Komentáre k obsahu príspevku:

Chcete napísať nesúhlasný komentár? Prosím, zvážte nasledovné: je šanca, aby niekto zmenil Váš názor alebo chcete iba trvať na svojom? V prvom prípade sú Vaše slová vítané.

Chcete urážať? Nepíšte sem urážky a invektívy. Každý, kto na týchto stránkach publikuje je automaticky (doplňte vhodný výraz). Takže už to všetci vopred vieme, čo si myslíte a preto sa neopakujte.

1. [1] SuE, 5. február 2006 17.56

   na tom uxmag se mi nic nepřesýpá :-(

   ale tady máš hezký píseček pro tahání myšičky :-)
   http://cssliquid.com/

2. [2] rony, 5. február 2006 18.11

   mne tie stvorce sa presypali podla toho aku sirku okna som mal.
   takze raz to bolo 5 vedla seba a raz 3

   hodne pekne to bolo.

3. [3] Piki, 5. február 2006 19.30

   Ten uxmag sa veru nepreskladal. Pekne zobrazil posuvník dole. FF 1.5 aj IE 6 aj O8čosi. Klasická hnusná stredová 800. Ak potrebuješ príklad, môžeš si ho u mňa napísať ;-) Dva fluidné by som potreboval.

4. [4] rony, 5. február 2006 19.50

   [3] sakra, tak preco to mne funguje?
   skusal si naozaj menit sirku okna?
   Ono mi to funguje takto: zmenim sirku okna, vnutri sa nic nedeje. Pustim lave tlacitko mysi, ktorym som drzal okraj okna. A vtedy sa boxy presypu.
   Pokial vam to nerobi asi si to ale viete predstavit ;-)
   Je to u neho riesene javascriptom - po nacitani stranky presype layout.

5. [5] Piki, 5. február 2006 20.38

   Už je jasne kde je problém. Hraničná hodnota pre preskupenie je cca 1030px (zistené pokus-omyl, lekárnik naozaj nemusí vedieť javaskript:-). Takže normálny 4:3 LCD už pri obvyklom laptopovskom rozlíšení 1024×768 po načítaní celej stránky hneď spustí ten skript a preskupí stránku. Na širokouhlom displeji s rozlíšením 1280×800 sa na maximalizovanom okne už zobrazí plná šírka a preskupí sa to až pri zmenšovaní okna, tak ako píšeš.
   #
   Celkovo krásna idea, ale zbytočne skoro nechajú preorganizovať obsah, prípadne mohli vymyslieť ešte jednen skok pri cca 780px. Akokoľvek, je to konečne prvý dizajn, ktorý nediskriminuje ľudí, ktorí investovali do poriadneho monitora.

6. [6] dusoft, 5. február 2006 23.34

   No, problem s pouzitelnostou znamena, ze je to zle naimplemetovana idea. Pouzitie javascriptu len kvoli dosiahnutiu efektu je blbost.

7. [7] rony, 6. február 2006 08.45

   [6] netvrdil by som, bez toho javascriptu je stranka funkcna. Tvrdis, ze nie? ;-)
   Navyse bol pikiho a Suein problem odhaleny: maju maly monitor, kde to nemalo sancu zafungovat :-)
   Takze stranka je okej, implementacia je okej. Averzia k javascriptu vzdy a vsade okej nie je ;-)

8. [8] SuE, 6. február 2006 11.07

   na collylogic to mají taky a dává tam to řešení k volnému použití (jen se musí do toho obšlohnutého js napsat, že je převzatý od nich):
   http://www.collylogic.com/?/comments/redesign-notes-1-width-based-layout/
   tam je to vidět i na "malém" monitoru ... tss, prý malý, 17" je tak akorát :-)

9. [9] dusoft, 6. február 2006 12.19

   Nie, ale kym sa neda riesit preklapajuci sa layout cez CSS, tak je to zas len hack.

   Rozmyslam, ci by to neslo riesit za pouzitia max-width rodica a plavajucich divov-deti.

10. [10] dusoft, 6. február 2006 13.25

    Lebo, ako boli robene vyskumy, neoplati sa roztahovat do nekonecna. Ak mas suvisly text na velku sirku, zle sa to cita... Ale vsak to je nam jasne, dufam ;-)

11. [11] rony, 9. február 2006 07.56

    [10] poskumaj web jednej banky a uvidis tam plavajuce boxy (bohuzial na fixnom materskom prvku)
    je to skoro, to, co si chcel povedat :-)

12. A tvoj názor?