Primul lucru pe care îl iau în considerare majoritatea designerilor atunci când își construiesc pagina web este ce rezoluţie a proiecta pentru. Ceea ce înseamnă cu adevărat este să decideți cât de larg ar trebui să fie designul dvs. Nu mai există așa ceva ca lățimea standard a site-ului web.
De ce să luăm în considerare rezoluția
În 1995, monitoarele standard de 640 pixeli cu 480 pixeli erau cele mai mari și mai bune monitoare disponibile. Acest lucru a însemnat că designerii de web s-au concentrat pe realizarea de pagini care arătau bine în browserele web maximizate pe un monitor de 12-inch-14-inch la acea rezoluție.
În aceste zile, rezoluția 640 x 480 reprezintă mai puțin de 1% din majoritatea traficului pe site. Oamenii folosesc computere cu rezoluții mult mai mari, inclusiv 1366-by-768, 1600-by-900 și 5120-by-2880. În multe cazuri, proiectarea pentru un ecran de rezoluție 1366-pe-768 funcționează.
Todya, majoritatea oamenilor au monitoare mari, cu ecran lat și nu își maximizează fereastra browserului. Deci, dacă decideți să proiectați o pagină cu o lățime de cel mult 1366 pixeli, pagina dvs. va arăta probabil în majoritatea ferestrelor browserului chiar și pe monitoarele mari cu rezoluții mai mari.
Lățimea browserului
O problemă adesea trecută cu vederea atunci când decideți lățimea unei pagini web este cât de mare își păstrează clienții browserele. Mai exact, își maximizează browserele la dimensiunea ecranului complet sau le mențin mai mici decât ecranul complet?
După ce țineți cont de clienții care maximizează sau nu, gândiți-vă la marginile browserului. Fiecare browser web folosește o bară de derulare și margini pe laturi care micșorează spațiul disponibil de la 800 la aproximativ 740 pixeli sau mai puțin la rezoluțiile 800 x 600 și aproximativ 980 pixeli la ferestrele maximizate la 1024 x 768 rezoluții. Aceasta se numește browser crom și poate elimina spațiul utilizabil pentru proiectarea paginii.
Pagini cu lățime fixă sau lichidă
Lățimea numerică reală nu este singurul lucru la care trebuie să vă gândiți atunci când proiectați lățimea site-ului dvs. web. De asemenea, trebuie să decideți dacă veți avea un lățime fixă sau lățime lichidă. Cu alte cuvinte, veți seta lățimea la un anumit număr (fix) sau la un procent (lichid)?
Lățime fixă
Paginile cu lățime fixă sunt exact cum sună. Lățimea este fixată la un anumit număr și nu se schimbă indiferent de cât de mare sau mic este browserul. Această abordare poate fi bună dacă aveți nevoie ca designul dvs. să arate exact la fel, indiferent cât de largi sau înguste sunt browserele cititorilor dvs., dar această metodă nu ține cont de cititorii dvs. Persoanele cu browsere mai înguste decât designul dvs. vor trebui să deruleze orizontal, iar persoanele cu browsere largi vor avea o cantitate mare de spațiu gol pe ecran.
Pentru a crea pagini cu lățime fixă, utilizați numere de pixeli specifice pentru lățimile diviziilor de pagină.
Lățimea lichidului
Pagini cu lățime lichidă (uneori numite pagini cu lățime flexibilă) variază în lățime în funcție de cât de largă este fereastra browserului. Această strategie aduce modele care se concentrează mai mult pe clienți. Problema cu paginile cu lățime lichidă este că pot fi greu de citit. Dacă lungimea scanării dintr-un rând de text este mai lung de 10 până la 12 cuvinte sau mai scurt de 4 până la 5 cuvinte, poate fi dificil de citit. Aceasta înseamnă că cititorii cu ferestre mari sau mici ale browserului au probleme.
Pentru a crea pagini cu lățime flexibilă, utilizați procente sau ems pentru lățimile diviziilor de pagină. Familiarizați-vă cu CSS lățimea maximă proprietate. Această proprietate vă permite să setați o lățime în procente, dar apoi să o limitați astfel încât să nu devină atât de mare încât oamenii să nu o poată citi.
Interogări CSS Media
Cea mai bună soluție în zilele noastre este de a utiliza interogări media CSS și design receptiv pentru a crea o pagină care să se adapteze la lățimea browserului care o vizualizează. Un design web receptiv utilizează același conținut pentru a crea o pagină web care funcționează indiferent dacă o vizualizați la 5120 pixeli lățime sau 320 pixeli lățime. Paginile de dimensiuni diferite arată diferit, dar conțin același conținut. Cu interogarea media în CSS3, fiecare dispozitiv receptor primește interogarea cu dimensiunea sa, iar foaia de stil se ajustează la acea dimensiune specială.