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

Môže sa Vám ešte páčiť...

2 komentáre

  1. Michelangelo píše:

    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.

  2. dusoft píše:

    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_.