«   » 

19. máj 2006 10.45 WEB

Fluidná stránka je krokom k zvýšeniu jej prístupnosti

Carmen Mardiros vo svojom článku Liquid Design - A Step Forward To Make Your Website Accessible opakuje dôležité argumenty pre fluidný layout stránky.

Vytvorenie univerzálne prístupnej stránky je nemožné ale použitím vhodných techník minimálne ukážeme snahu. Vaša stránka sa bude určite niekomu javiť menej prístupná ako inému človeku. S tým nikdy nič nevykonáte.

Čo je fluidný layout?

Ako používatelia chápeme obrazovku ako box s fixnými rozmermi, ktoré sa nemenia. Vždy však chápeme SVOJU obrazovku a SVOJE nastavenia za "štandard". Pre webdizajnéra však obrazovka nemá fixné rozmery pretože sa tieto hodnoty neustále menia (dokonca aj počas čítania už zobrazenej stránky, nielen počítač od počítača). Ľudia môžu mať nastavené rôzne lišty, pomocné programy alebo jednoducho nemaximalizované okná.

Fluidný layout sa teda adaptuje na podmienky, aké poskytne používateľove prostredie a naleje stránku ako dobrú whisky do pohára a nesnaží sa narvať whisky do brčka. Whisky sa pije z pohára a nie brčkom ;-)

Doporučujeme fluidný layout pre vytvorenie prístupnejšieho webu

Výhodou fluidného layoutu je v eliminovaní iritujúcich defektov v návrhu stránok akými sú najčastejšie "biele miesta" (vyplnené často iba kobercovými vzormi) alebo naopak vybiehaním častí stránky mimo hranice vnímania (budovanie úzkych slížov alebo horizonálne rolovanie).

Štatistiky rozlíšení a ich výklad

Úlohou webdesignéra je určiť dostupnú plochu pre zobrazenie webstránky. Musí vedieť aj kto bude najčastejšie jeho stránku pozerať. Ľudia vybavení špičkovým vybavením majú obrazovky s veľkými fyzickými rozmermi a pravdepodobne aj rozlíšeniami. Ľudia pristupujúci z počítačov na univerzitách, školách, v práci zasa s menšími obrazovkami a rôznorodejším prostredím.

Štatistiky hovoria o "špičke" krivky, ktorá sa momentálne pohybuje v pásme, ktorého stred je kdesi okolo tisíc pixelov šírky rozlíšenia OBRAZOVKY (nemusí byť zhodné s miestom aké poskytne prehliadač stránke!). Táto hodnota sa v čase pohybuje - doteraz smerom nahor.

Efektívna plocha sa však od rozmerov obrazovky a použitého rozlíšenia (opakujem: to sú DVE rôzne hodnoty) líši. Je to teda TRETÍ rozmer, ktorý časť grafikov a webdesignérov ignoruje.

Dôvod je v spomínaných lištách (hore, po bokoch, naspodu) a samotná plocha pre stránku je preto kus od kusu, čas od času rôzna.

Ľadové, huspeninové a fluidné stránky

Podľa prístupu k šírke možno rozdeliť stránky na

• Ľadové stránky sú veľmi rigidné. Box s obsahom je fixne nalepený doľava. Pri vyššom rozlíšení (resp. širšom viewporte) je takáto stránka sprevádzaná efektom bielej plochy (nemusí byť biela ale je nevyužitá). Takáto stránka ukazuje na nedostatok zručnosti vo využití možností webdesignu,
• Huspeninové stránky sú stredom medzi ľadovými a fluidnými stránkami. Box s obsahom je centrovaný ale po bokoch sú nevyužité biele miesta. Môže sa stať, že sa sem zaradia stránky, ktoré "zoomovaním" zväčšujú šírku stĺpca s obsahom (ale je to ojedinelý jav).
• Fluidné stránky sú momentálne niečo ako utópia. Využívajú všetky dostupné prostriedky pre vyplnenie poskytnutého priestoru. Nejde len o fakt, že sa "gumovo" natiahnu ale skutočne inteligentne využijú dostupný priestor.

Je adekvátne používať fluidný layout všade?

Fluidný layout je extrémne ideálny pre stránky s množstvom informácií. Zvýši tým čítavosť stránky (informácie sa naskladajú do celej plochy viewportu - opakujem fluidný neznamená, že sa stránka iba gumovo natiahne a riadky predĺžia!).

Praktický spôsob implementácie fluidného layoutu

V prvom rade musíte layout stránky chápať ako "od prirodzenia" elastický. Častým problémom je použitie grafiky (myslené vyslovene bitmapy). Tie sa v dnešných prehliadačoch zvyčajne zobrazujú fixne (ak je raz gif s rozmermi 200 na 150, tak nijako sa neprispôsobí iným rozmerom viewportu). Akonáhle robíme grafiku v stránke systémom dlaždičiek, tak už determinujeme layout a možné komplikácie, ktorým sa snažíme vyhnúť (nútia premýšľať "v pohybe"). Navrhnúť lietadlo je ťažšie ako položiť dlažbu.

Posledný tip pre webdizajnérov

Zaistite, aby riadok s textom nebol príliš dlhý. Voľte layout, ktorý je riešený po stĺpcoch, aby majiteľia rozľahlých obrazoviek nemali pocit prázdnoty a zároveň ste splnili bobríka vyplnenosti pretože ste maximum informácií napchali už do viewportu (a nie na zarolovanú časť stránky vo svojom predlhom úzkom slíži). Tip odo mňa: layout, ktorý počet stĺpcov reguluje podľa dostupnej plochy pričom sa neobmedzujte na stĺpce odhora nadol ale ponechajte titulku mimo stĺpcovú sadzbu (ľahšie navrhnete grafiku pre hlavičku).

Tento článok vznikol ako voľné prerozprávanie s pridanou hodnotou a NIE JE PREKLADOM!

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] emmacore, 20. máj 2006 21.57

   Este tak zopar linkov s odporucaniami inspirativnych webov by potesilo ;-)

2. [2] rony, 20. máj 2006 22.40

   http://cssliquid.com/feed/

   archiv: http://www.cssliquid.com/2005/11/

3. [3] emmacore, 21. máj 2006 18.43

   Thnx!

4. [4] d.m.i.b.a, 21. máj 2006 21.02

   Este tak naucit grafikov aby mysleli ako my webdizajneri. Oni su povacsinou limitovany formatmi A4, A3.....

5. A tvoj názor?

---

Tvoje meno*:

Tvoj komentár k príspevku (odkazy na stránky píšte vo formáte TEXTILE!):

Podmienky pre Váš komentár: Tlačidlo na odoslanie stlačte 1x, v texte nenadávajte, nevkladajte linky za účelom SEO, nepropagujte, Váš text musí mať zmysel, neporušujete vlastnícke práva majiteľa tejto stránky, ste pravidelný čitateľ tejto stránky, komentujete príspevok (nie erupcie Slnka) a nemýlite si komentáre s kvákacími fórami a chatom. Používajte formátovanie TEXTILE najmä na odkazy! Rozumiete tomuto poučeniu? áno, nie alebo Týmto sa pošle komentár?