Det første de fleste designere vurderer når de bygger sin nettside, er hvilken oppløsning å designe for. Hva dette egentlig betyr, er å avgjøre hvor bredt designet skal være. Det er ikke noe mer som en vanlig nettsidebredde.
Hvorfor vurdere løsningen
I 1995 var standard 640x480 oppløsning skjermer de største og beste skjermer tilgjengelig. Dette betydde at webdesignere fokuserte på å lage sider som så bra ut i nettlesere som maksimert på en 12-tommers til 14-tommers skjerm ved den oppløsningen.
I disse dager utgjør 640x480 oppløsning mindre enn 1 prosent av de fleste nettstedstrafikk. Folk bruker datamaskiner med mye høyere oppløsninger, inkludert 1366x768, 1600x900 og 5120x2880. I mange tilfeller fungerer design for en 1366x768 oppløsning skjerm.
Vi er på et punkt i historien om webdesign der vi ikke trenger å bekymre oss mye om oppløsning. De fleste har store skjermskjermer og de maksimerer ikke nettleservinduet. Så hvis du bestemmer deg for å designe en side som ikke er mer enn 1366 piksler bred, vil siden din trolig se bra ut i de fleste nettleservinduer selv på store skjermer med høyere oppløsninger.
Nettleserbredde
Før du går av å tenke "OK, gjør jeg sidene mine 1366 piksler bredt," det er mer til denne historien. Et ofte oversett problem når du bestemmer bredden på en nettside, er hvor stor kundene dine holder nettleserne deres. Spesifikt maksimerer de nettleserne deres på en fullskjermstørrelse, eller holder de dem mindre enn fullskjermen?
I en uformell undersøkelse av medarbeidere som alle brukte en 1024x768 oppløsning bærbar PC-standard, holdt to av dem alle sine applikasjoner maksimert. Resten hadde forskjellig størrelse vinduer åpne av ulike grunner. Dette illustrerer at hvis du designer dette firmaets intranett med 1024 piksler bredt, vil 85 prosent av brukerne måtte rulle horisontalt for å se hele siden.
Når du er klar over kunder som maksimerer eller ikke, kan du tenke på nettleserens grenser. Hver nettleser har en rullefelt og grenser på sidene som krymper ledig plass fra 800 til rundt 740 piksler eller mindre på 800x600 oppløsninger og rundt 980 piksler på maksimerte vinduer ved 1024x768 resolusjoner. Dette kalles nettleserens "krom", og det kan ta bort fra det brukbare plassen for sidedesignet.
Faste eller flytende bredde sider
Den faktiske numeriske bredden er ikke det eneste du må tenke på når du designer nettsiden sin bredde. Du må også bestemme om du har en fast bredde eller væskebredde. Med andre ord, skal du sette bredden til et bestemt tall (fast) eller til en prosentandel (flytende)?
Fast bredde
Sidene med fast bredde er akkurat som de høres ut. Bredden er fast til et bestemt nummer og endres ikke uansett hvor stor eller liten nettleseren er. Dette kan være bra hvis du trenger ditt design for å se nøyaktig det samme uansett hvor bredt eller smalt leserne dine nettlesere er, men denne metoden tar ikke hensyn til leserne dine. Personer med nettlesere som er smalere enn designet ditt, må rulle horisontalt, og folk med brede nettlesere vil ha store mengder tomt plass på skjermen.
Hvis du vil opprette sider med fast bredde, kan du bare bruke bestemte pikselnumre for breddene på sidedivisjonene dine.
Flytende bredde
Væskebreddsider (noen ganger kalt fleksible bredde sider) varierer i bredden avhengig av hvor bredt nettleservinduet er. Dette gjør det mulig å designe sider som fokuserer mer på kundene dine. Problemet med sider med flytende bredde er at de kan være vanskelige å lese. Hvis skanne lengden på en tekstlinje er lengre enn 10 til 12 ord eller kortere enn 4 til 5 ord, kan det være vanskelig å lese. Dette betyr at lesere med store eller små nettleservinduer har problemer.
Hvis du vil opprette fleksible breddssider, bruker du bare prosentandeler eller ems for bredden på sidedivisjonene dine. Du bør også gjøre deg kjent med CSS maksimal breddeegenskap. Denne egenskapen lar deg sette en bredde i prosent, men begrens det så at det ikke blir så stort at folk ikke kan lese det.
Og vinneren er: CSS Media Queries
Den beste løsningen i disse dager er å bruke CSS media spørringer og responsive design for å lage en side som justerer seg til bredden av nettleseren å se den. Et responsivt webdesign bruker det samme innholdet til å lage en nettside som fungerer om du ser den på 5120 piksler bred eller 320 piksler bred. De forskjellige sidene ser annerledes ut, men de inneholder det samme innholdet. Med medieforespørselen i CSS3 svarer hver mottaker enhet av spørringen med størrelsen, og stilarket justerer seg til den aktuelle størrelsen.
