Prva stvar koju većina dizajnera uzima u obzir prilikom izgradnje svoje web stranice je to što rješenje treba dizajnirati. Ono što stvarno donosi jeste da odlučite koliko bi trebalo da bude vaš dizajn. Više ne postoji takva stvar kao standardna širina sajta.
Zašto razmatrati rezoluciju
1995. godine standardni monitorji rezolucije 640x480 su bili najveći i najbolji monitori dostupni. To je značilo da su se web dizajneri fokusirali na pravljenje stranica koje su izgledale dobro u web pretraživačima maksimalno na monitoru od 12 inča do 14 inča u toj rezoluciji.
Ovih dana, rezolucija 640x480 čini manje od 1% većine prometa na web sajtu. Ljudi koriste računare sa mnogo većim rezolucijama, uključujući 1366x768, 1600x900 i 5120x2880. U mnogim slučajevima radi projektovanje za ekran rezolucije 1366x768.
Mi smo u istoriji web dizajna gde ne moramo mnogo brinuti o rezoluciji. Većina ljudi ima velike monitore širokog ekrana i ne povećava prozor svog pretraživača. Dakle, ako odlučite da dizajnirate stranicu koja nije široka od 1366 piksela, vaša stranica će verovatno izgledati dobro u većini prozora pregledača čak i na velikim monitori sa većim rezolucijama.
Širina pretraživača
Pre nego što počnete da razmišljate "okej, napraviću svoje stranice širokim 1366 piksela", ima još ove priče. Često se zanemaruje pitanje kada se odlučuje o širini web stranice koliko su vaši klijenti zadržali svoje pretraživače. Konkretno, da li maksimiziraju svoje pregledače u punoj veličini ili da li ih drže manje od celog ekrana?
U jednom neformalnom istraživanju saradnika koji su svi koristili standardni laptop računar od 1024x768, dva su čuvala sve svoje aplikacije maksimalno. Ostali su imali različite veličine prozora koji su otvoreni iz različitih razloga. Ovo ilustruje da ako dizajnirate intranet ove kompanije na širini od 1024 piksela, 85 posto korisnika bi moralo da se pomera horizontalno da vidi celu stranicu.
Nakon što prijavite korisnike koji maksimiziraju ili ne, razmislite o granicama pregledača. Svaki veb pretraživač ima traku za pomicanje i granice sa strane koji smanjuju raspoloživi prostor od 800 do oko 740 piksela ili manje na rezolucijama od 800x600 i oko 980 piksela na maksimalnim prozorima na rezoluciji 1024x768. Ovo se zove pretraživač "hrom" i može se oduzeti iz korisnog prostora za dizajn vaše stranice.
Fiksne ili Liquid Width Pages
Stvarna numerička širina nije jedina stvar o kojoj treba razmišljati prilikom dizajniranja širine vaše web stranice. Morate takođe odlučiti da li ćete imati fiksnu širinu ili širinu tečnosti . Drugim rečima, da li ćete postaviti širinu na određeni broj (fiksni) ili procenat (tečnost)?
Fiksna širina
Stranice fiksne širine su upravo tačne. Širina je fiksirana na određenom broju i ne menja se bez obzira koliko je veliki ili mali pretraživač. Ovo može biti dobro ako vam treba dizajn da izgleda potpuno isto, bez obzira na to koliko su široki ili suži vaši čitači čitača, ali ova metoda ne uzima u obzir vaše čitaoce. Ljudi sa pretraživačima koji su uži u odnosu na vaš dizajn moraju se pomerati horizontalno, a ljudi sa širokim pretraživačima će imati velike količine praznog prostora na ekranu.
Da biste kreirali stranice fiksne širine, jednostavno koristite specifične brojeve piksela za širinu stranica vaših stranica.
Liquid Width
Stranice širine tekućine (ponekad zvane fleksibilne stranice širine) variraju u zavisnosti od toga koliko je prozor pregledača širok. Ovo vam omogućava da dizajnirate stranice koje se više fokusiraju na vaše kupce. Problem sa stranicama širine tečnosti je to što je teško čitati. Ako je dužina skeniranja linije teksta duže od 10 do 12 reči ili kraća od 4 do 5 reči, može biti teško čitati. To znači da čitaoci sa velikim ili malim prozorima pregledača imaju problema.
Da biste kreirali fleksibilne stranice širine, jednostavno koristite procente ili ems za širinu razdelaka stranica. Trebali bi se upoznati i sa CSS max-width svojstvima. Ova svojina vam omogućava da postavite širinu u procentima, ali onda je ograničite tako da se ne postaje tako velika da ljudi ne mogu pročitati.
A pobjednik je: CSS Media Queries
Najbolje rješenje ovih dana je korištenje CSS medijskih upita i odgovarajući dizajn za kreiranje stranice koja se prilagođava širini browsera koji ga gleda. Odgovarajući web dizajn koristi isti sadržaj kako bi kreirao web stranicu koja radi bez obzira na to da li je gledate na 5120 piksela ili široku 320 piksela. Stranice različitih veličina izgledaju drugačije, ali one sadrže isti sadržaj. Sa medijskim upitom u CSS3, svaki prijemni uređaj odgovara na upit s njegovom veličinom, a stilski stil se prilagođava određenoj veličini.