9. január 2007 14.35 WEB
Rozdiel medzi fluidným, adaptívnym a fixným layoutom
Doteraz sme (ste) zvyčajne chápali dva rozdielne prístupy k stavbe layoutu webovej stránky (viď. analógia k dvom stranám sporu, flejmu, mince). Tak bolo omnoho jednoduchšie zástancovi jednej strany argumentovať voči tej druhej. Priznám sa, že teraz v jasnejšie rozdelenom tábore na tri časti vidím omnoho menej argumentov v prospech fixného layoutu.
Fixný layout?
Vznikol v priaznivom období pre takýto úlet.Veľa schopných grafikov na web konvertovalo z klasického "umenia" a to predurčilo ich schopnosti, predstavivosť, fantáziu a aj využitie daných možností. V tejto dobe rovnako nešlo riešiť zložitejší layout inak ako takmer vedeckými metódami a fixne. Dnešná doba však už viac rozoviera medzeru medzi webovým grafikom a grafikom v printovom médiu pričom to webové zpočiatku bolo chudobné, nemohúce, plné kompromisov.
Ja viem, že teraz zo mňa cítiť averziu ale je to spôsobené len tým, že veľakrát je pri návrhu layoutu zbytočne zahadzovaná šanca urobiť niečo viac ako odvar printovej grafiky. A samozrejme je to oprávnená averzia. Fixný layout je hodenie flinty do žita, prejav neschopnosti (nepoviem akej, má to viac možností).
Sám som fixné layouty robil a nemyslím si, že ma ešte nejaké čakajú a preto ma nepasujte za nejakého fixobijca. Zamrzí ma však zbytočný negatívny postoj a lamentovanie nad tým, že klient to a hento, ja toto a nakoniec skutek utek.
Fluidný layout!?
Webová stránka s layoutom, ktorý sa zobrazí vždy podľa toho ako široké je okno pre ňu vytvorené prehliadačom je takpovediac opakom fixného layoutu aj keď to nie je celkom pravda.
V danom prostredí totiž fluidná stránka nemení svoju šírku (počas prehliadania stránky na jednom počítači v jednom prehliadači) pokiaľ nemeníš zároveň šírku okna prehliadača (a to sa robí málokedy). Videli ste, že by vám stránka "sama od seba" gumovo menila šírku? Ja nie.
Čiže v konečnom dôsledku ak som u fixného aj u fluidného layoutu spokojný so zobrazením stránky, tak vlastne nevnímam aký layout to je. Za tohto ideálneho prípadu.
U fluidného layoutu nemožno exaktne povedať, že je stránka gumová vo všetkých rozmeroch. Napríklad u stĺpcovej sadzby je možné určiť aj fixnú šírku nejakého stĺpca, či iné minimálne/maximálne hranice ich šírky a teda je tu pomerne dosť možností na to, aby layout vyzeral dobre.
Výhody fixného a fluidného layoutu
Priznám sa, že ma teší ako výhod fixného layoutu postupne ubúda. Argument o dĺžke riadka som už rozniesol na kopytách veľakrát. Zostáva už iba pomerne dôležitý argument a to je umiesťńovanie reklamných pozícii.
K tomu mám čo povedať ale ešte neexistuje pôda na prijatie takých názorov. Veľa s odpoveďou má hlavne kontextová reklama a pravdepodobne menšia revolúcia vo vizuálne zameranej reklame (takej, na ktoru nie je nutné klikať aby sa dostavil jej účinok) spolu so zvyšovaním ďalších formátov "propagácie" na internete.
Internetové webové stránky zároveň sú a aj nie sú reklamnou plochou samy o sebe.
Nie sú nimi pre pracovníkov reklamy a obchodu. Sú pre používateľov webu. Bez výnimky a takto.
Adaptívny layout!?
Stretol som sa s nepochopením, že adaptívny layout nie je totožný s fluidným layoutom. Myslím si, že v tom je pomerne radikálny rozdiel. Adaptívny layout je skôr metafluidný.
- fixný layout: stránka má pevne danú šírku tej časti, kde sa jej obsah vrátane grafiky zobrazuje. Naťahuje sa iba jej výška,
- fluidný layout: sa v surovej verzií naťahuje ako "guma" v závislosti od šírky okna prehliadača. Pre dobrú funkciu je mu vhodné stanoviť minimálnu a maximálnu hodnotu šírky po prekročení ktorých sa prestane stláčať alebo naťahovať.
Adaptívny layout nie je čisto CSS riešenie. Jeho princípom je prispôsobenie stránky rozličným podmienkam. Stránky už neprehliadame ako pionieri jednotne a rovnako. Máme už desiatky rôznych kombinácii a variácii podmienok a zariadení. Zhruba je však možné povedať, že sa takmer vždy hovorí o základnom parametri a to šírke okna do ktorého sa stránka nasype.
U fixného aj fluidného layoutu je takmer nemožné urobiť jedným CSS súborom tak široký rozsah zariadení a možností ako u adaptívneho layoutu. Je tu šanca pripraviť rôzne CSS pre media print, media layout. Ľudia, ktorí si už zvykli na to ich vyrábať nebudú mať s adaptívnym layoutom žiadny psychický problém ale zároveň nemôžu adaptívnym layoutom nahradiť napr. jednotlivé media verzie.
Prisposobovací (adaptívny) layout je súhra javascriptom riadeného prepínania zobrazenia stránky podľa toho v akých podmienkach sa stránka zobrazuje (hlavne podľa šírky). Kým vo fluide sa gumovo zužuje a rozširuje tak u adaptívneho je to naozaj skoková zmena.
Javascript doslova prepína predom pripravené "scenáre" a to tak u CSS ale určite sa dá meniť aj samotný HTML dokument (ostaňme však hlavne u CSS).
Takto môžeme mať scenár na veľmi široké obrazovky a my sa pri jeho príprave rozhodneme, či uprednostníme "úzku" špagetu v strede obrazovky alebo wide LCD vyplníme do šírky. Rovnako iný scenár na normálne až po scenáre pre mobilné obrazovky.
My sa dokonca rozhodneme či v rámci daného scenára bude CSS layout pružný alebo fixný. My sa rozhodneme, či miesto kam napcháme bannery bude práve a akurát tam, kde mu ani fluidný scenár neublíži. My budeme musieť zvážiť, že rozšírením počtu možností ako úspešne zobraziť stránku NESTRÁCAME (v súvislosti s pozíciami pre reklamu) ale naopak získavame.
Získavame totiž širšie publikum. My musíme prijať fakt, že aj keď v scenári na mobilnom zariadení reklamu nezobrazíme alebo obmedzíme, tak dávame dar čitateľovi, ktorý si stránku môže prečítať výnimočne v mobile a dáme mu šancu stať sa verným čitateľom (a konzumentom reklamy). Viac o tom, či fluid/adaptív potiera reklamu alebo nie, si radšej preberte vo svojej hlave :-)
Adaptívny layout je kritická voľba pre "nízkorozpočtové" weby. Musím povedať svoj názor:
- neberte prácu, za ktorú sa málo platí a nerobte ju nikdy tak, že naozaj vyzerá na to, koľko ste za ňu dostali zaplatené,
- profesionál vie, že už má pripravené štandardné nástroje a materiál aj pre nízkonákladové weby a preto ich v nich použije (jeho riešením teda nie je nepoužitie širších možností ale práve použitie nie síce úžasných ale dostatočných prostriedkov).
Preto môžete u slabo zaplateného projektu urobiť iba jediný grafický návrh. Ale ako media print prihodíte do šablóny jednoduché CSS tak, aby sa stránka proste vytlačila a nebudete riešiť nejaké cimprlátka naviac. Podobne u media handheld.
Pretože ste profesionáli tak už určite neriešite s každým projektom iné CMS, iné formáty šablón a iné postupy. Zrejme teda dáte to isté CMS dobre zaplatenému klientovi ako aj tomu nízkorozpočtovému. Rozlíšite ich teda práve tou pridanou hodnotou Vašej práce a nie tým, že tomu dobre platenému dáte Joomla a to tomu menej platenému dáte notepad do ruky.
Nie veru.
Chcel som vás naviesť práve k tomu, že na to, aby sa vám fluidný layout zapáčil a za ním aj adaptívny musí stáť kvantum práce za sebou. Čiže kvantum hotového materiálu takpovediac pripraveného na ďalšie projekty. Hotové "neidentifikovateľné" šablóny pre CMS, ktoré sa iba dovybavia individuálne navrhnutou grafikou. A k nim už možno pridávať aj scenáre adaptívneho layoutu.
Záver
Netvrdím, že adaptívny layout je technika, ktorú musíte okamžite všetci začať riešiť. Je to možnosť, ktorou sa technika webového designu cvalom vzďaluje printovému bratovi.
Nedávno som čítal celkom zaujímavú diskusiu na Novinky.cz pod článkom o internetovej reklame jedného Novinkového bloggera. Zaujímavý bol paradox. Ľudia vedia spoľahlivo rozoznať čo je reklama a sú schopní ju adresne a presne a cielene a veľmi nenávidieť. K smrti.
Paradox je v tom, že v našom kmeni sa skôr potľapkávame a utvrdzujeme v tom, že tí vonku sú hlúpi, sťažka rozoznajú čo je hore a čo dole, nevnímajú obsah, nerozpoznajú objekty na obrazovke. Proste stádo byvolov po lobotómii.
A odrazu sú oni vychytralí, zákerní a k prizabitiu. Rozbíjajú nám naše hračky! Rozpoznali naše malé legálne podvody a pasce na nich.
Čo s tým? No páni profesionáli, hra skončila, bude sa musieť začať naozaj makať. A menej podceňovať a viac vystupovať sebavedome, profesionálne a tak, aby ste neboli len rukavicou nasadenou na klientovej ruke. Pretože Vašim partnerom nie je zákazník ale tá masa. Tam vonku.
pošli do vybrali.sme.skKomentá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.
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?
Pekne rony, akurat sa tu s jednym fluidnym layoutom pasujem. Adaptivny layout moze byt fajn, ale tam to uz bez vopred pripravenych nastrojov skutocne nejde - teda pokial sa nechces iba hrat a experimentovat a stracat cas. Prinosny clanok, linkujem.
[1] mozno nie, treba to chapat tak, ze robis miesto jedneho layoutu viacej.