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é.

Môže sa Vám ešte páčiť...

11 komentárov

  1. SuE píše:

    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. rony píše:

    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. Piki píše:

    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. rony píše:

    [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. Piki píše:

    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. dusoft píše:

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

  7. rony píše:

    [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. SuE píše:

    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. dusoft píše:

    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. dusoft píše:

    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. rony píše:

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