12. január 2010 10.00 WEB
Výber layoutu pre webový projekt
Prečítajte si zoznam typov layoutov pre web. Je to delené z pohľadu prispôsobenia sa webu viewportu (v článku je vymyslené pomenovanie contentport - správnejší je viewport). Zoznam typov v článku je dobre poznať a rozhodne aj v širšom rozsahu. Dobre je si všetky odskúšať na nejakom wireframe modeli bez odsúdenia.
Nasledujúci text je bez diakritiky - prepáčte!
Už dlhé roky som skôr priaznivec toho, ak layout webu co najviac mysli na co najsirsi rozsah pouzitelnych klientov (prehliadacova/zariadeni/navstevnikov). V zmysle zasady: nech radsej vyvojar (v akejkolvek oblasti) venuje 10000 minut k praci naviac ako keby mal pouzivatel jeho prace venovat jej pouzitiu minutu naviac ako je nevyhnutne (minutu nevenovanu ucelu ale roznym podruznym neprijemnostiam).
Takze preto sa NEDA nikdy urcit, co je najlepsie – taky hentaky layout. Viem len velmi zhruba urcit, ze pre istu velku cast projektov je fixny layout zle riesenie. S urcitostou viem aj to, ze pre istu presne definovanu cielovu skupinu je hlupe venovat sa alternativam, ktore nastanu v skutocne extremnych podmienkach.
Rovnako som sa za niekolko rokov naucil, ze prihliadat na aktualny stav statistik typu „teraz frcia 17“ monitory a rozlisenie 1024×768px" je najhlupejsia cesta ako definovat vychodzie parametre pre svoj projekt. V istom mensom percente si to mozem vsak dovolit ak mam dopredu jasny plan „o rok sa znovu redizajnuje a mam to uz aj zaplatene“.
Kym pred par rokmi sa zdalo, ze svet webu sa skonsolidoval a standardizoval takmer do unifikovaneho stavu – vsetci maju pocitac, vsetci maju horedole podobny monitor (takmer rovnaky pomer stran, takmer unisono rozlisenia – holt LCD…), takmer rovnako spravajuce sa prehliadace, takmer identicke vstupne zariadenia (mys v pravej ruke). Dnes sa ukazuje, ze sa v poslednych par rokoch toto vsetko rozislo ako smrad.
Mame tu odrazu tisice pouzivatelov, ktori uz nemaju JEDINE okno do webu. Maju pocitac doma, v praci. Maju mobil, maju maly notebook. Lenze okrem tychto technicky odlisnych zariadeni mozu v klude mate pre kazdy z nich ine naroky na obsah, ktory chcu z nich dostat. Dokonca aj pre sucasne otvorene rovnake URL by chceli mat na kazdom takom zariadeni „trochu“ inak zobrazene data, dokonca mozno aj trochu inak prioritizovane – typicky, pridem domov a v tych istych „novinach“ ma viac zaujimaju trochu ine temy ako na tom istom webe v praci.
Takze aky layout zo vsetkych menovanych?
Nech to preboha neurci prstom grafik, koder ci nebodaj databazovy specialista.
Materiály k layoutu, ktoré máte počas celej éry Spravodaja k dispozícií:
- Depent layout
- Adaptive Page Layout
- Switchy McLayout
- Rozdiel medzi fluidným, adaptívnym a fixným layoutom
- Profík uvažuje s hraničnými situáciami
- minmax.js - minwidth a maxwidth v instantnej podobe
- Zisťovanie veľkosti viewportu
- Čo s tými 5 % vo fluidnom layoute
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.
Zmena od 1.2.2010: Komentovať môžete už iba prostredníctvom IntenseDebate (dolenižšie). Odporúčam Vám registráciu, čo prinesie výhody v nemoderovanom prístupe (nemusím Vám schvaľovať komentáre).
Ja začínam používať @media all and (max-width:Npx){} v CSS a je to skvelé. Odporúčam práve pre takéto účely. Je lepšie, keď mám navigáciu na mobile inak usporiadanú, ako na poriadnej zobrazovacej ploche. Aj prispôsobenie veľkosti písma je na mieste z tohto pohľadu. To isté platí o potrebnom obsahu, o prvkoch-hladných-po-akcii.
Niekedy je brzdou marketing predávajúci bannerovú reklamu. Tí sú fixní ako koľajnice.
tiez som v principe za definovanie layoutu (az na vynimky) v em a nastavenie max-width pre elementy, kde to je potrebne (napr. sirku obsahu, aby sa neroztahoval do nekonecna a bol citatelny). rovnako fonty - bud definovat percentami alebo em, px uz pouzivam takmer vyhradne na definiciu border a pod. - teda casti, ktore si kvoli grafike vyzaduju sirku v px.