Određivanje širine vaše web stranice

Prvo je što većina dizajnera uzima u obzir prilikom izrade svoje web stranice razlučivost dizajnirati za. Ovo zapravo znači odlučivanje koliko širok treba biti vaš dizajn. Standardna širina web mjesta više ne postoji.

Zašto razmotriti Rezoluciju

1995. godine, standardni monitori od 640 piksela sa 480 piksela bili su najveći i najbolji dostupni monitori. To je značilo da su se web dizajneri usredotočili na to da stranice koje izgledaju dobro u web preglednicima maksimiziraju na monitoru od 12 do 14 inča pri toj razlučivosti.

Danas rezolucija 640 puta 480 čini manje od 1 posto većine prometa na web mjestu. Ljudi koriste računala s mnogo višim rezolucijama, uključujući 1366 puta 768, 1600 puta 900 i 5120 puta 2880. U mnogim slučajevima funkcionira dizajn za zaslon razlučivosti 1366 x 768.

Todya, većina ljudi ima velike monitore sa širokim zaslonom i ne povećavaju prozor svog preglednika. Dakle, ako se odlučite za dizajn stranice širine najviše 1366 piksela, vaša će stranica vjerojatno izgledati dobro u većini prozora preglednika čak i na velikim monitorima s višim rezolucijama.

instagram viewer

Širina preglednika

Jedan od problema koji se često zanemaruje pri odlučivanju o širini web stranice je koliko vaši kupci zadržavaju svoje preglednike. Točnije, maksimiziraju li svoje preglednike na cijelom zaslonu ili ih drže manjima od cijelog zaslona?

Nakon što uzmete u obzir kupce koji maksimiziraju ili ne, razmislite o granicama preglednika. Svaki web preglednik koristi traku za pomicanje i obrube na stranama koji smanjuju raspoloživi prostor s 800 na oko 740 piksela ili manje na rezolucijama 800 x 600 i oko 980 piksela na maksimiziranim prozorima pri 1024 x 768 rezolucije. To se naziva preglednik krom i može vam oduzeti korisni prostor za dizajn vaše stranice.

Stranice s fiksnom ili tekućom širinom

Stvarna numerička širina nije jedino o čemu morate razmišljati prilikom dizajniranja širine web mjesta. Također morate odlučiti hoćete li imati fiksna širina ili širina tekućine. Drugim riječima, hoćete li postaviti širinu na određeni broj (fiksni) ili na postotak (tekućina)?

Fiksna širina

Stranice fiksne širine točno su onakve kakve zvuče. Širina je fiksna na određeni broj i ne mijenja se bez obzira na to koliko je velik ili mali preglednik. Ovaj pristup može biti dobar ako vam treba da vaš dizajn izgleda potpuno isto bez obzira na to koliko su široki ili suženi preglednici vaših čitača, ali ova metoda ne uzima u obzir vaše čitatelje. Osobe s preglednicima užim od vašeg dizajna morat će se pomicati vodoravno, a osobe s širokim preglednicima imat će veliku količinu praznog prostora na zaslonu.

Da biste stvorili stranice fiksne širine, upotrijebite određene brojeve piksela za širine odjeljenja stranica.

Širina tekućine

Stranice širine tekućine (ponekad se nazivaju stranice fleksibilne širine) variraju u širini ovisno o tome koliko je širok prozor preglednika. Ova strategija donosi dizajne koji su više usmjereni na kupce. Problem sa stranicama širine tekućine je što ih je teško pročitati. Ako je duljina skeniranja reda teksta dulji je od 10 do 12 riječi ili kraći od 4 do 5 riječi, može biti teško pročitati. To znači da čitatelji s velikim ili malim prozorima preglednika imaju problema.

Da biste stvorili stranice fleksibilne širine, upotrijebite postotke ili ems za širine odjeljaka vaše stranice. Upoznajte se s CSS-om maksimalna širina imovine. Ovo svojstvo omogućuje vam postavljanje širine u postocima, ali zatim je ograničite tako da ne postane toliko velika da je ljudi ne mogu pročitati.

CSS medijski upiti

Najbolje rješenje danas je korištenje CSS medijskih upita i responzivnog dizajna za stvaranje stranice koja se prilagođava širini preglednika koji je pregledava. Reagirajući web dizajn koristi isti sadržaj za stvaranje web stranice koja radi bez obzira gledate li je širine 5120 piksela ili širine 320 piksela. Stranice različite veličine izgledaju drugačije, ali sadrže isti sadržaj. Uz medijski upit u CSS3, svaki uređaj koji prima uređaj na upit odgovara svojom veličinom, a tabela se prilagođava toj veličini.

instagram story viewer