Adaptive Page Layout

Ukážka adaptívneho layoutu pre web stránku prispôsobujúcu sa šírke okna prehliadača.

Označenie adaptívny layout je trefné, pretože principiálne nemusí to byť identické s "fluidným" layoutom.

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

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] dusoft, 13. október 2006 15.51

co radsej pekne po slovensky: "prisposobujuci sa layout" (v horsom aspon: priposobivy)
[2] Bystro, 13. október 2006 15.57

Hned ma napadlo, aky je ten layout neprakticky. Na kazdom pocitaci (rozliseni) vyzera inac. Predstav si, ze zakaznik sa ta spyta "Kde najdem informacie o dodacich podmienkach?" Co odpovies? Vpravo hore na tej a tej stranke? Vlavo dole? V druhom stlpci? V prvom? Zakazdym je to na inom mieste :)

Rovnako si predstav, ze clovek si to pozera v kaviarni alebo na letisku v rozliseni 800×600, pride domov, a zrazu uvidi uplne inu stranku, vsetko je inac, bude zmateny. Pekna ptakovina :)
[3] Yanui, 13. október 2006 16.08

[2] Ale ved to vobec nie je problem - menu moze ostat fixne vo svojom rohu. Je samozrejme, ze link s kontaktom na svoju firmu nechcem mat kde-kade, ale na fixnom mieste. Ale ak pisem clanok, blog, dlhsi text a podobne, ocenujem, ak sa prehliadac snazi prisposobit MNE, nie akejsi imaginarnej väcsine.
[4] Bohumír Bednařík (BoboCop), 13. október 2006 16.19

A co teprve ta struktura dokumentu. Neměly by tabulky sloužit pouze pro tabulková data?
[5] Bystro, 13. október 2006 16.20

[3] A skusal si si vobec ten layout v uzsom okne prehliadaca? Teda mne na FF to skace ako pomatene. Vzdy sa kazdy blok textu prehodi na ine miesto. Podla mna je to totalny nezmysel. Stranka musi zostat vzdy co najviac rovnaka, aby nemiatna navstevnika. Je to vec pouzitelnosti, tak ako som pisal hore v prispevku. Mozno ty si zdatny uzivatel, ale vacsina uzivatelov nie je. Robia jej problemy zakladne ukony na webe a nieto este skakajuci obsah stranky!
[6] rony, 13. október 2006 17.02

[2] Bystro: odpoviem Alt-F, neboj, vynajdes sa. Vynasli sme sa pri supportovani Windows po telefone. Zvladneme aj tuto, menej zlozitu ulohu.
[7] rony, 13. október 2006 17.06

[5] blbost. nic nikde neskace. Zuzil som si to skoro na 300px a nic. roloval som nahor, nadol a nic neskakalo.

Dalsi, co vidi modlu v nejakom imaginarnom vacsinovom cloveku. Na tych v prvom rade zabudni a uvedom si, ze kazdy jeden je neopakovatelna entita so svojimi vlastnymi problemami. To len mimochodom :)

Akonahle pocujem dristy o tom, co vie, nevie, robi vacsina, tak mam chut dotycneho poslat na miting nejakej politickej strany :-)

Vacsina ti nikdy nepovie, ako a co vobec chce, takze neviem odkial mas schopnost to "vydedukovat" :-)))
[8] Bystro, 13. október 2006 17.22

[7] Pri 1024 je blok textu "Here's how it works:" napravo hore. Ked si to zuzis na 800, tak sa presunie dole nalavo pod hlavny text, a na jeho miesto sa vsunie ten roboticky pes (WTF??). Rovnako zmeni polohu aj "Differences IE vs. Firefox". Pozerane v prehliadaci Firefox 2.0.

Ako sa sprava "vacsina uzivatelov" sa da normalne zmerat pomocou statistik alebo pomocou testovania pouzitelnosti, ci inych nastrojov (eye tracking, click tracking ap.). Pri pouzitelnosti ale ide o to, aby web vedel pouzivat aj ten najsprostejsi z cielovej skupiny (aspon priblizne), takze na vyhodnotenie ze ten layout je nezmysel ti staci aj jeden uzivatel :-)

Este ma napadol jeden proti-argument. Neviem co by na to skakanie textu povedal copywriter ktory stravil niekolko dni nad pisanim textov, ktore su vycibrene a maju byt zobrazene presne v poradi, akom ich navrhol. Zrazu pride koder s "uzasnym" layoutom a hned sa z pevneho vycibreneho textu stava natahovacia guma, ktora je vzdy zobrazena v inom poradi :))
[9] dusoft, 13. október 2006 17.35

[8] Nezmysel. Texty v ramci jedneho boxu sa predsa nemenia. Pozicia ostava rovnaka. Presuvaju sa len jednotlive boxy. inac, rony asi myslel CTRL+F.
[10] Bystro, 13. október 2006 17.36

[9] "Presuvaju sa len jednotlive boxy". Ved ano, o tom hovorim :)) "Len"?
[11] dusoft, 13. október 2006 17.44

Chces mi povedat, ze niekto pise taxty tak, aby box vlavo nadvazoval na box vpravo (ak sa nejedna o preliv textu ako ma tusim NY Times). Ak ano, tak chyba pouzitelnosti je u daneho myslitela. Na webe nie je nic 100% rovnake. Kto na to zabuda, skodi sa sebe.
[12] Bystro, 13. október 2006 17.55

[11] Samozrejme. Ked mas viac stlpcovy layout, tak najdolezitejsie info chces dat vzdy hore (a najlepsie do lavej casti). Zrazu ti pri inom rozliseni jeden zo stlpcov skoci dole? A dolny stlpec ktory nie je tak dolezity zrazu vyskoci hore? Kde sme to? :) Niekto by to povazoval za chybu layoutu, nie za vyhodu.

Predstav si, ze v tom lavom stlpci mas nejake dolezite info o firme, a v pravom je napriklad vypis Top produktov, alebo mapa so zajazdami, kam dana cestovka vozi ludi. Alebo vyhladavanie zajazov. Dole by si mal napriklad prihlasenie do Newslettra. Kuknes na web v 800×600 a dolezite Top produkty sa presunu dole, a hore sa posunie nedolezite prihlasenie do Newslettra??

Vas problem je v tom, ze myslite iba "blogovo". Poznate iba text a clanky.
[13] rony, 13. október 2006 18.10

Bystro, to su nezmysly. Pozeraj na to z opacnej strany. Nie napriklad zo strany, ze ti tam naskakuju navrch boxy, ktore nechces. Ved preboha nejsi krepy aby si to nezvladol urobit tak, aby ti tam skakalo to co chces.

Okrem toho, ak si nemenis sirku okna, tak tam naozaj nic neskace. Preboha, zasa sem nesnaz vsuvat nezmysly o skakani, pocas procesu zuzovania okna.

Ty si pri citani webu drzis okraj okna mysou a trases nou dolava doprava?

Uz sa mi oci skrabu stlpkom z tych pseudoargumentov.

Pouzi fantaziu. Ak to nejde, tak skus nejake dogmy :))
[14] rony, 13. október 2006 18.11

Pozri ty myslis blogovy, co vidi do druhych.

Podobny "skakaci" layout je sucastou layout firmy, ktorej web som robil. Netrep mi tu blbosti o tom, ze som blogger a ine chujoviny uz prosim ta.
[15] Bystro, 13. október 2006 18.19

[13] :-)) Hovorim o tom, ked si jeden zakaznik bude pozerat web v 800×600 a druhy v 1024×768. Kazdy to bude mat inac. Ten co bude mat 1024 bude mat stastie, lebo uvidi este aj vyhladavac zajazdov, ktory je napriklad pre uspech stranky velmi dolezity. Ten s 800 ma smolu, a moze to byt kvoli tomu strateny zakaznik. Chcem ta vidiet, ako toto vysvetlujes klientovi.

Ved ten layout nema ziadne vyhody. Bavime sa stale len o nevyhodach :-)

Rony: "Ved preboha nejsi krepy aby si to nezvladol urobit tak, aby ti tam skakalo to co chces."

Pointa je v tom, aby nic neskakalo, a vsetci navstevnici videli presne to, co navrhnes s klientom a co je pre web dolezite!!
[16] rony, 13. október 2006 18.33

Chce to asi 2x precitat si komentare, takze idem na to.

[2] nezmysly, ked vies navrhnut stranku, tak toto ani nevyslovis. ty riesis zadanie a ty urcujes, co kde moze byt. nikto ale netvrdi, ze to ma byt ako posrany A4 letacik firmy co predava kvetinace na Dolnej 42.

[8] vobec to nenarusa zmysel dokumentu. Ten tvoj pes je ilustracia, ktora je pri dostatocnej sirke zasunuta do odstavca, ak je uzky viewport, tak sa zasunie pod odstavec. To je normalny sposob prace typografa pri sadzbe. Nechapem, co na tom sa ti zda zle. Mne nie. Mozno bude problem v statickom strnulom predstavovani si a v tom, ze obe riesenia su prijatelne, tak preco by sa nemohli obe aj pouzit? Garantujem ti, ze si to nikto nezoberie ako "chybu". Nejde o chybu, ide skor o sikovne vyuzitie.

Kurva, to su mi novinky, s pozorovanim pouzivatelov. Lenze to clovece pozorujes vzorku. Nie vacsinu. Doprdele :) Povedzme si na rovinu, ze nieco ti to napovie ale vzdy nazries do mudrej knizky. Nechcem to rozoberat. Podla mna si v argumentacii brat "vacsinu" do ust je skor sposob ako sa navzajom v dileme dojebavat ako dojst k nejakemu vseobecnemu vacsinovemu rieseniu. To proste nejde. A ani o to nejde.

Poznamka s copywriterom s tym nema nic spolocne. Preboha ziveho, ved sa nesekaju texty v prostred vety. Netrep prosim ta a ak to nemyslis vazne, tak to aspon nejako naznac. Nie plany argument to je. Placnutie do vody :)

[12] snazis sa najst argumenty ale to predsa nijako nevylucuje, ze ty navrhujes layout a ty urcujes ako ti to ma "skakat" ty kengura :)

Clovece, prichadza doba, ked sa znacne rozsiruje pouzivany rozsah zobrazovacich zariadeni. Je potrebne sa prebudit z tych osemstoviek a tisicdvadsatstvorok. To uz nebude o par rokov, ze budes riesit zobrazovanie webu na displeji 5×6 cm. Dnesne mini opery sice zvladaju zobrazit web akoze vyzoomovany, no prax ti ukaze, ze ti je to na milu rit pozerat na weby navrhnute pre displej s rozmermi 80 × 60 cm.

Urazas ma tym oznacenim za blogove myslenie. Ja sa na webe ani tu ani nikde nespravam a nemyslim blogovo. Povazujem to za urazku. To len tak na zlahcenie temy a zvysenie poctu usmevov v diskusii ;-)

K [15] pred 3 rokmi som riesil CSS layout firemnej stranky. Mal som tam objekty - titulok, ilustracia, text, odkaz. Klasicky pekny objekt - box. Tak som si navrhol to, aby tieto boxy sa v danom priestore, ktory urcim (je jedno ci fix alebo fluid) naskladali ako detske kocky. Mal som rozne typy boxov (cojaviem sirka polka priestoru, sirka stvrtka priestoru a pod.) a oni sa proste tam naskladali. Pritom ziadny ten tvoj blogovy clanok a ine nezmysly.

Narazas zrejme na to, ze blogy su akesi jednoduchsie a ty robis na webzinoch, kde je po pravej a lavej strane kopec nezmyslenych boxikov s kopcom zbytocnych informacii ze? (nereaguj, kopol som naspat) :-)

Pozri, cely ten adaptivny layout je demonstracia toho, ze web nie je tlacena A4ka. Ze musis uvazovat s tym, ze riesis kompromisy.

Bud cast ludi tu tvoju vynikajucu poziciu vpravo hore (a vzdy vpravo hore) nikdy neuvidi - tak ako ja nikdy neuvidim krasny banner na strankach SME, ktory je kdesi vpravo a nemam chut ani dovod rolovat tam. Presne tak dopadaju chimery o tom, ze vsetko musi byt tam na jednom mieste a nedajboh aby sa to pohlo.

Ved preboha - ten adaptivny layout riesi presne ten problem, ze informacie unikaju zo zorneho pola a nim ich davame zasa na miesto, kde na ne cloviecik natrafi.

Skus nad tym popremyslat. Ja osobne si myslim, ze MAM pravdu v tom, ze takyto sposob stavby layoutu zvysuje pozitok z webu, necini problem ani jebom z osobitnej a dokonca sposobi uspokojenie tym, ktorym zalezi aby "to bolo vidno".

Len si treba prestat predstavovat web ako tu posranu z ofsetu vyletenu A4ku!!!

Ak sa ti nieco zdalo ako urazajuca invektiva, neber si to tak.
[17] Bystro, 13. október 2006 18.39

[16] Asi si pozorne necital co som pisal. Uplne si minul pointu.
[18] rony, 13. október 2006 18.44

[15] ale nezmysel. Ak budes chciet dat prioritne veci obom na oko, tak to urobis. Uz sa zobud a zapni fantaziu :))) Netoc mi tu o osemstovkach prosim ta. Nic take neexistuje. Mylis si monitor s prehliadacom ako moj otec monitor s pocitacom.

Mily Bystro, zopakujem ti to ako krepemu: naozaj tam nic neskace. zobraz si este raz tu stranku. Nesprava j sa ako hlupy jano a nemykaj sirkou okna. Roluj nahor a nadol po obsahu. SKACE TI TAM nejaky box z miesta na miesto? Nie doriti. Neskace. Tak uz ma nesnaz nasrat nezmyslami, co trepes.

Tvoj nezmysl o tom, ci tam nieco jeden uvidi alebo jeden neuvidi je v tom, ze nechapes. Nechces. Alebo proste nemas na to, aby si to videl.

je to dlhsia tema na rozhovor, no musel by som ti asi zacat vysvetlovat, to, co v tom predoslom dlhom komentari. Tak strucne: pri fixnom layoute ti mensie okno prehliadaca proste zakryje to, co sa fixne drzi kdesi v zakryte za rohom. Ver, ze to je to naj naj naj naj horsie. PRetoze TY ojebavas klienta, pretoze s klientom ste si vybrali tvoj alebo klientov monitor s rozlisenim milion patsto. Alebo ste si zaonanovali este nad 800×600.

Preboha ziveho - v roku 1992 som ziadal sponzora o podporu mojho softwaru a 2x sa mi chalani vratili, ze sa sponzorovi nepaci logo ako som ho spravil. Tak som sa nasral siel tam. Posadili ma k monitoru a zaplo mi to. Pokrutil som gombikmi a obraz sa zmenil. (nie nie jas a kontrast). Preved si to na to, co hovorim o tom spolocnom "onanovani" s klientom.

Iste, klient ma posledne slovo a nech je to aj kokotina na entu, musis to nakoniec urobit. Ak ho nevies zmanipulovat od rozhodnuti, ktore su objektivne nahovno. Ja osobne pouzivam strategiu podhadzovania bezcennej koristi, ktora odputava pozornost aby sa zasadne veci nemenili. Ak robis s klientami, vies co hovorim.

Poznal som par natvrdlych "webdesignerov" a aj oni pouzivali manipulativne nezmysly pre podporu svojich teorii a zastitovali sa klientami a pod. nezmyslami.

Mna zaujimaju vlastne tri veci:

nechcem rolovat doprava.

nechcem citat pidipismo v obsahu

nechcem mavat mysou a skumat, co je a co ne je link.

V tychto troch veciach ma dokaze web dokonale nasrat, pretoze nie on vyhral, ze nasral nejakeho bezvyznamneho ronyho. Nasral sam sebe do taniera, pretoze si vychovava bezradnych pouzivatelov, ktori sa musia ucit ovladat web chybami a pokusmi.
[19] rony, 13. október 2006 18.47

[17] vysvetli. Hlásim presun na Massacre board, kde je tema otvoreená.
A tvoj názor?

Adaptive Page Layout

Komentáre k obsahu príspevku:

Čítal som

kde to ste?

príspevky

média