Primul lucru pe care cei mai mulți designeri îl iau în considerare atunci când construiesc pagina lor web este soluția la care trebuie proiectată. Ceea ce este cu adevărat este de a decide cât de mare ar trebui să fie design-ul dvs. Nu mai există așa ceva ca o lățime standard a site-ului web.
De ce să luați în considerare rezoluția
În 1995, monitoarele de rezoluție standard de 640x480 au fost cele mai mari și mai bune monitoare disponibile. Acest lucru a însemnat că designerii de web-uri s-au concentrat pe crearea paginilor care arătau bune în browserele web maximizate pe un monitor de 12 inch la 14 inci la acea rezoluție.
Aceste zile, rezoluția de 640x480 reprezintă mai puțin de 1% din traficul de site-uri web. Oamenii folosesc calculatoare cu rezoluții mult mai mari, inclusiv 1366x768, 1600x900 și 5120x2880. În multe cazuri, proiectarea unui ecran de rezoluție de 1366x768 funcționează.
Suntem la un moment dat în istoria designului web unde nu trebuie să ne îngrijorăm prea mult despre rezolvare. Majoritatea oamenilor au monitoare mari, cu ecran lat și nu maximizează fereastra browserului. Deci, dacă vă decideți să proiectați o pagină care nu depășește 1366 de pixeli, pagina dvs. va arăta probabil bine în majoritatea ferestrelor browserului chiar și pe monitoarele mari cu rezoluții mai mari.
Browser Width
Înainte de a vă gândi "bine, voi face paginile mele 1366 pixeli lățime", există mai mult pentru această poveste. O problemă adesea ignorată atunci când decideți lățimea unei pagini web este cât de mari clienții dvs. își păstrează browserele. Mai exact, maximizează browserele lor la o dimensiune completă a ecranului sau le mențin mai mici decât ecranul complet?
Într-un sondaj informal al colaboratorilor care au folosit toți un laptop de rezoluție standard de 1024x768, două companii au păstrat toate aplicațiile maximizate. Restul avea ferestre de dimensiuni diferite deschise din diverse motive. Acest lucru ilustrează faptul că, dacă proiectați intranetul acestei companii la o lățime de 1024 de pixeli, 85% dintre utilizatori ar trebui să parcurgă orizontal pentru a vedea întreaga pagină.
După ce contabilizați clienții care maximizează sau nu, gândiți-vă la limitele browserului. Fiecare browser web are o bară de parcurgere și marginează marginile care micșorează spațiul disponibil de la 800 la aproximativ 740 pixeli sau mai puțin la rezoluții de 800x600 și aproximativ 980 de pixeli pe ferestre maximizate la rezoluții de 1024x768. Acest lucru se numește browser "crom" și poate lua departe de spațiul utilizabil pentru proiectarea paginii.
Pagini cu lățime fixă sau lichidă
Lățimea numerică reală nu este singurul lucru pe care trebuie să vă gândiți la proiectarea lățimii site-ului dvs. De asemenea, trebuie să decideți dacă veți avea o lățime fixă sau o lățime lichidă . Cu alte cuvinte, intenționați să setați lățimea la un anumit număr (fix) sau la un procent (lichid)?
Lățime fixă
Paginile cu lățime fixă sunt exact așa cum au sunat. Lățimea este fixată la un anumit număr și nu se schimbă, indiferent cât de mare sau mic este browserul. Acest lucru poate fi bun dacă aveți nevoie de designul dvs. să arate exact la fel, indiferent de cât de larg sau îngust sunt browserele cititorilor dvs., dar această metodă nu ia în considerare cititorii dvs. Persoanele cu browsere mai restrânse decât designul dvs. vor trebui să parcurgă pe 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ă, pur și simplu utilizați numere specifice de pixeli pentru lățimile diviziunilor dvs. de pagină.
Lățimea lichidului
Lățimea paginilor lichide (uneori numite pagini cu lățime flexibilă) variază în funcție de lățimea ferestrei browserului. Acest lucru vă permite să proiectați pagini care se concentrează mai mult pe clienții dvs. Problema cu paginile cu lățime lichidă este că pot fi dificil de citit. Dacă lungimea de scanare a unei linii de text este mai mare de 10-12 cuvinte sau mai mică de 4 până la 5 cuvinte, poate fi dificil de citit. Acest lucru înseamnă că cititorii cu ferestre de browser mari sau mici au probleme.
Pentru a crea pagini de lățime flexibile, pur și simplu utilizați procente sau ems pentru lățimile diviziunilor paginii. De asemenea, trebuie să vă familiarizați cu proprietatea CSS max-width. 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.
Și Câștigătorul este: CSS Media Queries
Cea mai bună soluție în aceste zile este să utilizați interogările media CSS și designul 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ă dacă o vizualizați la o lățime de 5120 pixeli sau o lățime de 320 de pixeli. Paginile cu dimensiuni diferite arată diferit, dar conțin același conținut. Cu interogarea media în CSS3, fiecare dispozitiv de primire răspunde la interogare cu dimensiunea sa, iar foaia de stil se ajustează la dimensiunea respectivă.