Prva stvar koju većina dizajnera uzima u obzir pri izgradnji svoje web stranice je ono što rješenje za dizajniranje. Ono što ovo doista iznosi je odlučivanje koliko bi trebao biti vaš dizajn. Više nema takve stvari kao standardna širina web stranice.
Zašto razmotriti Rezoluciju
Godine 1995. standardni 640x480 rezolucijski monitori bili su najveći i najbolji monitori dostupni. To je značilo da su web dizajneri usredotočeni na izradu stranica koje su izgledale dobre u web preglednicima maksimizirane na monitoru od 12 inča do 14 inča u toj rezoluciji.
Ovih dana, rezolucija od 640x480 čini manje od 1 posto većine web prometa. Ljudi koriste računala s mnogo većim razlučivostima, uključujući 1366x768, 1600x900 i 5120x2880. U mnogim slučajevima, dizajniranje zaslona rezolucije od 1366x768 funkcionira.
Mi smo na mjestu u povijesti web dizajna gdje ne moramo brinuti mnogo o rezoluciji. Većina ljudi ima velike, široke zaslone i ne povećavaju prozor preglednika. Dakle, ako odlučite dizajnirati stranicu koja nije širina veća od 1366 piksela, vaša će stranica vjerojatno izgledati dobro u većini prozora preglednika čak i na velikim monitorima s većim razlučivostima.
Širina preglednika
Prije nego što odete razmišljati "u redu, ja ću napraviti svoje stranice 1366 piksela širine", ima više na ovu priču. Često zanemariv problem prilikom odlučivanja o širini web stranice je koliko vaši klijenti njeguju svoje preglednike. Naime, povećavaju li svoje preglednike veličinu na cijelom zaslonu ili ih čuvaju manje od cijelog zaslona?
U jednom neformalnom istraživanju suradnika koji su svi koristili standardno 1024x768 rezoluciju laptop, dva su zadržali sve njihove aplikacije maksimizirani. Ostali su prozori različitih veličina otvoreni iz raznih razloga. To pokazuje da ako planirate intranet tvrtke na širokoj od 1024 piksela, 85 posto korisnika moralo bi se pomaknuti vodoravno da bi vidio cijelu stranicu.
Nakon što račun za kupce koji maksimiziraju ili ne, razmislite o granicama preglednika. Svaki web preglednik ima traku za pomicanje i granice na stranicama koje smanjuju raspoloživi prostor od 800 do oko 740 piksela ili manje na 800x600 rezolucijama i oko 980 piksela na maksimiziranim prozorima pri rezolucijama od 1024x768. To se zove preglednik "chrome" i može oduzeti od korisnog prostora za dizajn stranice.
Stranice s fiksnim ili tekućim širinama
Stvarna numerička širina nije jedina stvar koju trebate razmisliti prilikom oblikovanja širine vaše web stranice. Također morate odlučiti hoćete li imati fiksnu širinu ili širinu tekućine . Drugim riječima, hoćete li postaviti širinu na određeni broj (fiksni) ili na postotak (tekućina)?
Širina fiksne
Stranice s fiksnom širinom točno su kao da zvuče. Širina je fiksna na određenom broju i ne mijenja se bez obzira na to koliko je velik ili malen preglednik. To može biti dobro ako vam je potreban vaš dizajn da izgleda upravo isto, bez obzira koliko široki ili uski preglednici vaših čitatelja, ali ova metoda ne uzima u obzir svoje čitatelje. Ljudi s preglednicima koji su uži od vašeg dizajna morat će se pomaknuti vodoravno, a osobe s velikim preglednicima imat će velike količine praznih mjesta na zaslonu.
Da biste izradili stranice sa fiksnom širinom, jednostavno upotrijebite određene brojeve piksela za širinu odjeljaka stranice.
Tekuća širina
Stranice tekuće širine (koje se ponekad nazivaju fleksibilne stranice širine) razlikuju se po širini ovisno o tome koliko je prozor preglednika širok. To vam omogućuje dizajniranje stranica koje se više fokusiraju na vaše klijente. Problem s stranicama širine tekućine je da ih je teško čitati. Ako je duljina skeniranja retka teksta dulja od 10 do 12 riječi ili kraća od 4 do 5 riječi, može biti teško čitati. To znači da čitatelji s velikim ili malim prozorima preglednika imaju problema.
Da biste stvorili fleksibilne stranice širine, jednostavno upotrijebite postotke ili ems za širinu odjeljaka stranice. Također biste se upoznali s imovinom CSS maks-width. Ovo svojstvo omogućuje da postavite širinu u postocima, ali ga ograničite tako da ne postane tako velika da ga ljudi ne mogu čitati.
A pobjednik je: CSS medijski upiti
Najbolje rješenje ovih dana je korištenje CSS medijskih upita i responzivnog dizajna za stvaranje stranice koja se prilagođava širini preglednika koji ga pregledava. Odgovarajući web dizajn upotrebljava isti sadržaj za stvaranje web stranice koja funkcionira bez obzira na to gledate li je na širini od 5120 piksela ili 320 piksela. Stranice različitih veličina izgledaju drugačije, ali sadrže isti sadržaj. S upitom medija u CSS3, svaki prijemni uređaj odgovara upitu s veličinom, a list stilova prilagođava se određenoj veličini.