Switchy McLayout: Technika adaptívneho layoutu
Pružný layout založený na CSS býva úspešný v istom rozsahu na obrazovkách v šírkach od 800 do 1024 pixelov ale pretože často používame široké spektrum zariadení pristupujúcich na web, potrebujeme silnejšie a flexibilnejšie cesty správania sa layoutu. Pokiaľ chceme podporovať zariadenia, ktorých viewport sa pohybuje v rozsahu od 240 pixelov až nad 1680 pixelov a rozlíšenie (DPI) ide od 72 do 150 pixelov na palec, potrebujeme zjavne novú metódu jeho vytvárania.
Kde je problém s tekutými layoutami?
Pokiaľ tvoríte tekutý layout optimalizovaný pre maximálnu šírku 1024 pixelov – limituje nás dĺžka riadka textu na udržanie jeho čitateľnosti – na širokých obrazovkách sa proste rozbije a stane sa nepoužiteľným. Na maličkých obrazovkách mobilných zariadení je zasa váš text stlačený do uzučkého stĺpca ako sendvič. Žiadny dizajnér toto nechce. Pokiaľ by bol layout založený na technike vektorov realizovateľný na širokom spektre prehliadačov, mohli by sme jednoduchý generický layout vidieť rovnako vo všetkých veľkostiach obrazovky. Nemôžeme ale fantazírovať a nájdeme inú schodnejšiu cestu.
Tak definujme layout do série rozsahov šírky obrazoviek a nájdime cestu ako tieto layouty zobrazíme podľa toho, aký viewport používateľ má k dispozícii.
Switchy McLayout nás zachráni
Switchy McLayout ti umožní definovať rozmery pre tvoje objekty pre rôzne rozsahy veľkostí obrazovky. Stránka novín, napríklad, môže mať jeden layout pre široké obrazokvy, jeden pre bežné a ďalší pre PDA. Obrázky sa môžu prispôsobovať alebo odstraňovať v závislosti na veľkosti obrazovky, stĺpce sa môžu preskupovať tak, aby neutrpela čitateľnosť a zároveň aby si efektívne využil dostupné miesta pri každej veľkosti obrazovky.
Tento príklad stránky novín používa Switchy McLayout. Pre účely tejto ukážky je vytvorených sedem rozsahov veľkostí obrazovky a prináša pre každý z nich jeho vlastný layout, ktorý sa využije najefektívnejšie v dostupnom priestore. CSS je v príklade použité len pre ukážku.
Viac si prečítajte na origináli.
Autor článku rozdelil zariadenia na sedem skupín, ktorých sa môžeme držať aj vo všeobecnosti nielen v danom príklade:
* PDA vertikálne orientované so šírkou do 240px,
* PDA horizontálne orientované so šírkou medzi 240 až do 320px,
* Set top / TV (ja sem pridávam aj PDA s VGA rozlíšením) od 320 do 640px,
* staré CRT monitory od 640 do 800px,
* súčasné TFT obrazovky od 800 do 1024px,
* široké obrazovky od 1024 do 1280px,
* panoramatické obrazovky viac ako 1280px.
Všimnite si, že už dávno som na Spravodaji deklaroval, že nesmiete uvažovať o „najbežnejšej“ obrazovke ako o jedinom rozmere ale je nutné prepnúť myslenie na rozsahy (pásma).
Pouvažujme nad jednotlivými skupinami. Povedzme si, že nás otravujú ľudia s obrazovkami starých CRT monitorov a aj tak ich je málo. Zároveň si však musíme povedať, že nás ľudia s mobilnými zariadeniami zaujímajú. Dokonca sú zaujímaví aj obchodne – prečo by nemohol v eshope nakupovať nudiaci sa tínežer s mobilom kdesi vo vlaku?
Nesmieme o veľkosti obrazovky uvažovať ako o nemeniteľnom kamennom bloku. Ona sa môže a aj sa mení dokonca u jedinej kópie prehliadača jediného používateľa. Ale o tom som už popísal kvantá slov.
V našej bežnej práci sa sústredíme na to, že miesto siedmych layoutom ledva spáchame jediný. A dokonca sa odvažujeme tvrdiť, že je to maximum práce, ktorá je účelná a dokonca hodná obdivu. Tvrdíme, že nám zaplatili za jedno riešenie, klienti chcú iba jedno riešenie a že ich zmätieme rôznou vizážou ich webu. Dovolím si tvrdiť, že čas pokročil.
Firma inzeruje v dennej tlači, časopisoch a preto má vyhotovený grafický návrh peknej farebnej plošnej inzercie, zopár spotov reklamy v TV.
Chceš mi tvrdiť, že *všetky jej inzeráty sú za každých okolností rovnaké?* Naozaj majú všetky rovnaký rozmer? Rovnaký pomer šírky a výšky? Presviečaš ma, že u každého inzerátu bez ohľadu na fyzickú veľkosť, pomer strán je vždy presne to isté. Tvrdíš tým, že na osminkový inzerát sa proste „nazoomuje“ nejaký celoplošný inzerát z veľkoformátových novín?
Nie veru. Máme síce pripravenú jednotiacu grafiku, ktorá pri pohľade na maličký plošný inzerát (kľudne čiernobiely) a na veľký poster uprostred Playboya vždy ponúkne ich vzájomnú príbuznosť a identifikovateľnosť. Takmer vždy máme rôzne varianty pre veľkosť a technické podmienky daného média kam inzerát smeruje. Často meníme aj obsah. Vyhadzujeme slová, časti textu. Prispôsobujeme.
Pokiaľ teda je možné, aby firma inzerovala *plošnými inzerátmi,* ktoré nie sú totožné 1:1, tak prečo sa snažíš vytvárať jeden jediný pevne fixovaný web? Prečo nepripustíš, že to médium na ktorom publikuješ nie je jednotné ale mení všetky svoje atribúty rovnako ako „jediné“ médium „tlačovina“?
Prečo sa u inzerátov prispôsobuješ médiu a na webe to odmietaš?
Máš ešte dôvody pre ktoré odmávaš mobilným zariadeniam „padaj preč vole“ a tým trom bohatým majiteľom maličkého laptopu zobrazíš paškvil miesto stránky, kde rýchlo nájdu cestou na letisko kontakt na svojho kamaráta vo vašej firme aby si doobjednali tovar, čo im spomínal tvoj šéf?
Prečo si stále myslíš, že je nevhodné prezentovať firmu na webe niekoľkými rôznymi rozloženiami stránky?
Rozdelenie do siedmych typov obrazoviek má svoj zmysel a v každej skupine nájdete zaujímavého zákazníka. Vrátim sa k starým CRTčkam. Iste, umierajú. Ale keď už si dáš prácu s PDAčkovým layoutom a so širokými LCD, tak nie je to CRT už trošku maličkosť?
Týmto ťa chcem v prvom rade presvedčiť, že po masážach o výhodách CSS layoutu k nám kráča doba, keď sa budeš musieť snažiť obsah podať v prijateľnej forme. Že už svet počítačov nevyzerá jednotne – už počítač nie je bledosivá škatuľa pod stolom veľa koša, začadený monitor s guľatou obrazovkou a klávesnicou. Rozsah používaných zariadení sa extrémne rozšíril. Medzi väčší počet ľudí, na väčší rozsah veľkostí obrazoviek. A neplatí, že smer vývoja veľkostí obrazoviek ide v jedinej línií (vymieňame staré CRT na nové veľké LCD). Zďaleka nie. Ale to už vieš.
Každopádne je to vynikajúca vec. Myslím si, že každý web dizajnér by si to mal skúsiť a aplikovať. Bude to možno o pár riadkov CSS viac, ale to ešte nikoho nezabilo ;-).
pekne a mudro napisane. Bodaj by viacej ludi takto zacalo rozmyslat
btw skusal si si kuknut svoju stranku na mobile? Prave pozeram na spvcku a je to nieco priserne. Na opere mam nastavene najmensie pismo, ale tu mam brutalne velke, zmesti sa mi iba 10 riadkov na display. Uvod nevidim vobec, lebo mi to prekryva prijeb**a reklama. V exprdeli sa mi nezobrazi uz vobec nic – stranka je priliz velka:-(
bolek pozeravam ale v PocketIE. zaroven reklama a handheld som este neriesil ale poriesim medzi prvymi.
fiiha rony, prekvapuje ma ze obdivujes taketo riesenie… ved je to primitivne vyuzitie JS pri ktorom uz je CSS len podruzna pomocka… ale ja osobne podporujem take riesenia – len ma to prekvapuje u teba (pozitivne)
[4] tvoje prekvapenie je pochopitelne, pretoze necitas dlho Spravodaj.
* „Priklad 1“:http://spravodaj.madaj.net/view.php/2006/02-prekvapujuci-fluidny-layout
* Man in blue poznáš?
* „Vyhovujuce riesenie…“:http://spravodaj.madaj.net/view.php/2006/01-vyhovujuce-riesenie-s-fixnou-sirkou
Kto ti nakukal, ze som nejaky sialeny ortodoxny vyznavac fluidneho layoutu v CSS?! Preboha ziveho?!
Mna prekvapuje to, akym sposobom si dokaze ktokolvek uplne do extremu vylozit pomerne jasne napisane svoje vlastne slova!? Kde si preboha nabral ten dojem, ze ta cosi take ako moje zalinkovanie prevareneho riesenia McLayout v tebe vyvolalo dojem, ze som vzdy bol akysi ortodoxny „len preboha nijako inak ako v CSS a nikdy inak“ fanatik? :-O
Teraz trosku mimo temu, vzhladom na to, ze z archivu si musis prebrat par medzier o Spravodaji:
* „Tri skaly pristupnosti“:http://spravodaj.madaj.net/view.php/2006/08-tri-skaly-pristupnosti
* „Vyššia dievčenská škola: varíme na skutočnej ploche“:http://spravodaj.madaj.net/view.php/2006/09-vyssia-dievcenska-skola-varime-na-skutocnej-ploche
tie povazujem za vhodne doplnenie :-)
Ja viem, casto mi hovoria, ze som odtrhnuty od reality a v akomsi akademickom laboratoriu mentorsky bluznim nad vecami, ktore prax riesi uplne inak ;-) Ale to len tak bluznim o nezmysloch, ktore s tvojim prekvapenim nemaju nic spolocne ;-)))
Dopln si medzery, kym na to mas roky a nehanbi sa, ze to bude prave Spravodaj :-) ktory ta privedie na cestu dobra, lasky, nadeje a praveho duchovneho naplnenia. Pre jedine svetle chvilky ake ti len ta prava viera moze priniest.
Zastavim sa v nedelu rano. My dvaja z redakcie, v slusnych cistch satach s farebnymi casopismi, budeme zvonit a budeme si chciet pohovorit o webe ;-)
Zabudol som dodat, ze trosku fabulujem v tom komentari, aby si sa neurazil ;-) Ale jeho vysledkom by malo byt (podla mna), aby si si precital pozorne to, co trepem pod tou ciarou. Nad nou je len moj pokus o preklad clanku o McLayout. Niektorych napadol prave ten ManInBlue pretoze ten uz davno predtym podobne riesenie zverejnil (vratane Spravodaja). No a to pod ciarou su moje slova. Po ich precitani by ta nemalo nic prekvapit ;-)
fakt si trocha uletel :)… ja len vravim ze by som Ta netipol na pouzitie JS na takuto vec… ved aj ja osobne by som s tym mal trocha problem… moc by som univerzalnosti toho neveril…
preboha. vykladaci snov ;-)
dokonca ma uz osacovali na to, ze Switch McLayout pouzivam. Preboha.
Dokonca som siahodlhym komentarom naznacil, ze je to obdobne riesenie ako davnejsie publikoval maninblue.
No ja snad koncim.
Tolko roznych vykladov nema ani biblia :-) ale Spravodaj ano.
S clankom sa da viac menej suhlasit. Bohuzial, problem stale vidim v zakaznikoch.
Ak som vyvojar, ktory vyvyja pre zakaznikov weby tak pre nich v tejto oblasti mozem urobit jedine – ponuknut im takuto moznost. Kludne im spravim 6 roznych dizajnov a velmi rad, lebo na kazdom z nich nieco zarobim.
Bohuzial realita je trochu ina. Vacsina zakaznikov ma klasicku predstavu ze web musi byt tak do 5 tisic – pricom musi obsahovat jedinecnu grafiku (ziaden volne dostupny template), kopec flashovych prvkov, kopec dynamickych obsahovych prvkov (z databazy dotahovanych) a samozrejme vsetko maju mat moznost administrovat priamo na webe.
No a ked ich z 5 tisic dostanem do realnej financnej sfery v ktorej sa ich poziadavky pohybuju (to uz ochkaju ostosesto :)), tak ich vidim ako mi prikyvnu na navrh spravit im dizajn vo viacerych variantoch pricom kazdy z nich bude navysovat cenu.
Co sa realne stane je, ze sa ma spytaju ake je najcastejsie rozlisenie na webe. Ja pozriem do statistik, ktore sa mi generuju u inych zakaznikov a zistim ze cca 90 a viac % uzivatelov ma na sirku rozlisenie minimalne 1024 a zakaznik prikyvne ze ano, nech to nasijem na take rozlisenie.
Takze, Tvoj clanok je naozaj dobry a naozaj pravdivy, len sem treba nasmerovat najma zakaznikov a nie vyvojarov :)
[9] cely problém je teda v tom, že za 5 tisíc môžeš odovzdať jediný vzhľad a niečo ako rozdelenie na design pre handheldy, malé obrazovky, veľké obrazovky je vlastne vyrobenie grafiky vlastne niekoľkonásobne.
dá sa na to pozrieť aj takto.
pozrime sa na to aj inak: väčšina stránok, ktoré stoja päť tisíc má základnú HTML kostru rovnakú. Tak sa jedenkrát premôžem a tak alebo onak je vzhľad pre handheld unifikovaný – moc sa v tom nenahráš pretože viacmenej musíš hrať na praktickosť pri zobrazení stránky. Ak urobíš desať päťtisícoviek, tak ten jeden unifikovaný handheld vzhľad v tom spláchneš ako bonus.
Takže opäť sme pri tom, že NEMUSÍŠ klientovi robiť extra naviac hranolčeky ale iba mu povieš – a táto stránka pôjde aj na handheldoch či mu to ani nepovieš. Proste je to default akože mu neprezrádaš, že si tam pridal o jednu js knižnicu naviac a ani si sa nenamáhal mu vysvetľovať, čo to je.
Žiadne navyšovanie ceny – realita je krutá :-)
Iný pohľad – už ten základ navrhneš tak, aby šiel „preskupovať“ – nie sme tu laici a vieme, že layout su púhe boxy v nejakom vzťahu k sebe – postačí chvíľka kreatívneho myslenia a web preskupíš v priebehu pár sekúnd.
Viem o čom hovorím – koľkokrát mám pred sebou úlohu: a teraz ten tretí stĺpec nechceme, čo tak dať toto radšej sem… rozumieme si, že?
Takže zakázníkovi sa nehovorí pevné číslo 1024. Hovorí sa mu pásmo od do. A to tak, že si sám musíš vybrať, čo mu bude vyhovovať. Povieš mu od 800 do 1200 a vieš, že tým stratí 8 percent návštevníkov. Povieš mu 240 do 1200 a stratí 2 percentá. Je otázka či je pre jeho biznis únosné stratiť dve alebo osem.
Takže ti budem oponovať – zákazníka sem neťahaj, to ty musíš začať premýšľať a odpovedať v pásmach a nie exaktných číslach. To ty buduješ vo svojich zákazníkoch predstavu akéhosi unifikovaného návštevníka, ktorý ma všetko „ako väčšina“ a tá väčšina má LCD monitor Samsung 1280×960 17″ s jasom na 70%, procesor AMD 2 GHz, hardisk 240GB, čiernu Benq klávesnicu, DVD napaľovačku.
Ja tvrdím, že väčšina má tak rozdielne parametre, že púhe jedno jediné exaktné číslo ich nemôže nijako vystihovať.
Z praxe mávam jedinú otázku – aké farby preferujete. Z praxe viem, že ten istý web v inom farebnom podaní sa mu môže hnusiť a hľadá na ňom chyby ale keď mu ho dám rovno v jeho obľúbenej farbe, tak je spokojný. A na farbe predsa nezáleží. A hneď mi prejdú podvody typu: podčiarknuté odkazy, správne umiestnené logo, obvyklá navigácia a schopnosť webu zobraziť sa na handhelde.
Takže, keď budeš oboznamovať zákazníka so štatistikami, pamätaj na to. Väčšina je typicky omnoho viac roztrieštená ako menšina. Môžem vyhlásiť, že menšina má 1024×768. A mám pravdu. Ale u vyhlásenia, že väčšina má 1024×768 si tým nie som tak istý ;-)
Ja viem, že sa to radí ľahko ale stanoviť si hranicu, kedy je niečo pod tvoju úroveň je tiež dobrá vec. Web za päť tisíc rob kamošovi a zaprisahaj ho, že to nikomu nepovie :-) A ak sa k tomu dostaneš ver, že ťa čakajú problémy – čím menšia suma tým viac je zákazník „nepríjemný“ a dokonca môžeš dospieť k tomu, že ti ešte vyhodí na oči aký si nenažraný a pritom si spravil takú slabú prácu.
Ak by mi šlo o to, aby som si webdesignom mal zarábať, tak by som neustále makal na veciach do šuflíka. Priznajme si, že na tie menej honorované veci môžeš s kľudom urobiť aj niečo menej originálne a stačí sa spýtať na tú farbu :-)
A nehovor mi, že za päť tisíc riešiš veci typu: ktoré CMS im dám. Nie – mám svoje obľúbené, ktoré som už inštaloval všetkým počnúc nadnárodnou korporáciou v projekte za tristotisíc a aj roľníkovi za päť stovák a hektoliter mlieka. Takže aj CMSkom som limitovaný aby som používal unifikované HTML šablóny a iba sa hral s CSS ;-)
Switchy McLayout je ukážka z laboratória a v skutočnosti si z nej môžeš spraviť svoj štýl práce a ponúkať ho ako defaultný prefabrikát, do ktorého vložíš svoju prácu vo forme CSS v priamej úmere k sume akú obdržíš.
Problém s rozšírením vidím inde. Hlavne v tom, že systém je naozaj použiteľný a široko akreptovateľný až vtedy, ak sa presadí na veľkých portáloch a zvykne si naň väčšina BFU. Tu ale narážeme na problém s platenou bannerovou a nevektorovou grafickou inzerciou na veľkých portáloch. Toto zapracovať do fluidného layoutu je už oveľa väčší oriešok, hlavne v kombinácii s požiadavkami inzerentov portálu na presné umiestnenie reklamných plôch, prípadne ich vzájomných kombinácií. Od tohto systému sa totiž odvíja zaužívaný systém financovania tržieb za reklamu. Bohužiaľ, je to tak – tu sa nám situácia už značne komplikuje a je finačne a organizačne oveľa viac náročná.
Takže podľa môjho názoru platí to, že fluidný layout je (žiaľ) zatiaľ vhodný len pre niektoré weby.
[11] rozlisuj fluidny a adaptivny. uz sa to tento rok krystalizuje a ten rozdiel je uz znacny.