Redimensionare: layouturi fixe, variabile si auto-ajustare

Atunci cand desenam cu creionul pe hartie primele noastre blocuri de layout, am explicat ca dreptunghiul exterior in care desenam reprezinta blocul container. In designul tiparit, blocul container este un obiect fizic, de exemplu o carte de vizita sau un panou. Pe web, container-ul nostru este fereastra browser-ului.

Ar trebui ca designul sa umple fereastra browser-ului sau ar trebui sa aiba o latime impusa? Decizia aceasta chinuieste designerii web inca din vremurile cand foloseam tabele si fisiere de tip spacer.gif pentru a aranja continutul paginii web. OK, fie, poate nu acum mii de ani, insa este totusi o controversa foarte veche.

Latimea fixa

Daca ati inceput layoutul dumneavoastra cu 960 Grid System despre care am vorbit mai devreme, este foarte probabil sa va indreptati catre un layout cu latime fixa. Aceste solutii de design sunt incadrate intr-un tag div a carui latime este exprimata in pixeli(sa zicem 960 de pixeli) si care este centrat in cadrul tag-ului body folosind proprietatile margin:0 auto; Daca fereastra browser-ului este mai mare de 960 de pixeli, veti vedea fundalul elementului body la stanga si la dreapta container-ului; daca este mai ingusta, veti avea o bara de derulare orizontala. Este mai usor sa faceti design pentru – si sa intretineti – layouturile cu latime fixa pentru ca dezvoltati exact designul pe care il faceti in Photoshop.

Latime variabila

Un layout variabil sau lichid este dezvoltat folosind latimi exprimate in procente, asa incat container-ul se extinde atunci cand redimensionati fereastra browser-ului. Acestea sunt mai greu de planificat deoarece trebuie sa prevedeti problemele ce ar putea aparea la fiecare latime posibila. Uneori, intr-un layout variabil, coloanele cu dimensiuni exprimate in pixeli sunt amestecate cu cele exprimate in procente, insa ideea este ca prezentati utilizatorului cat de mult continut orizontal va incapea pe ecranul sau. De obicei, layouturuile variabile se folosesc de proprietatile min-width si max-width din CSS si prin acestea se asigura ca un container nu devine ridicol de ingust sau de lat.

Un alt motiv pentru care unii designeri resping layouturile variabile este acela ca ei cred ca ii impiedica sa foloseasca o grila pentru a crea solutiile lor de design. Sunt disponibile cateva resurse pentru realizarea unor layouturi variabile pe o grila, inclusiv o adaptare variabila pentru 960 Grid System. Totusi, in cele din urma, decizia de a folosi un anumit tip de layout sau altul ar trebui sa fie luata in functie de publicul tinta si de telurile de accesibilitate ale fiecarui site in parte. Argumentele pro si contra pentru fiecare layout sunt destul de bine definite.

Layouturi fise versus fluide: pro si contra

Latime fixa-PRO

-ofera designerului mai mult control asupra felului in care va arata o imagine plasata in cadrul continutului

-permite planificarea spatiului gol

-imbunatateste lizibilitatea prin blocuri de text mai inguste

Latime fixa-CONTRA

-poate parea mic in ferestre mari de browser

-preia controlul de la utilizator

Latime fluida-PRO

-adaptabil la majoritatea rezolutiilor si a dispozitivelor

-reduce derularea paginilor

Latime fluida-CONTRA

-greu de citit atunci cand textul se intinde pe o distanta mare

-mai dificil de realizat cu succes

-limiteaza sau afecteaza spatiul gol.

Avand in minte aceste argumente pro si contra, am facut mai multe layouturi cu latime fixa decat variabila. Imi place sa controlez cum va fi afisat continutul si sa lucrez cu spatiul de fundal. Pe de alta parte, cateodata imi plac provocarile pe care le pun layouturile variabile. Insa, indiferent de preferintele personale, este important sa puneti pe primul loc nevoile clientilor dumneavoastra. Daca va hotarati asupra latimii unui layout cu latime fixa, trebuie sa va ganditi la publicul pentru care faceti designul si creati un layout care satisface nevoile acelor utilizatori.

Alternativa: layouturi auto-ajustabile

Se spune ca, pentru orice regula, exista o exceptie. De obicei, acest lucru este adevarul in lumea web-ului si designerii au creat mai multe variante si hibrizi cu structuri de layout cu latime fixa si latime variabila.