[ Content | Sidebar ]

800×600 er fortsatt en greie

Jeg ser at flere og flere designer nettsidene sine til de store, fine skjermene og ikke minst oppløsningen vi har i dag i den tro at alle tar bruk i hele skjermen eller faktisk bruker den høye oppløsningen de kan bruke.

Folk ser ut til å glemme at vi nå har enda flere valgmuligheter når det gjelder oppløsning og vindubredde enn vi hadde før, og å glemme dette er å ta fra folk nettopp valgfriheten.

Det skal ikke være slik at webdesigneren skal bestemme hvor høy oppløsning eller skjermstørrelse en besøkende skal ha.

Selv sitter jeg med en skjerm med høy oppløsning, hvilket gjør at jeg ofte minsker vinduet for å gjøre det mer behagelig for meg selv å lese tekst. Og da finnes det ikke noe mer irriterende i verden enn å få horisontal scrolling, spesielt når jeg må ta denne i bruk for å lese hele teksten.

Men jeg har et valg, hva med de som ikke har det? Det er faktisk folk rundt omkring som sitter med høy oppløsning på grunn av dårlig syn. Disse må da tro at det er meningen at man skal måtte scrolle både opp og ned og fra side til side.

Og jeg vet ikke om folk har tenkt mobiler i det hele tatt. Noen som har surfet sider med mobilen sin hvor vidden har blitt satt i fast bredde?

Så, hva kan gjøres? For mobiler kan man faktisk lage et eget stilark, men ellers.. Man kan selvfølgelig lage minimalistiske sider hvor den faste vidden er mindre enn 800px. 780px har jeg alltid ment har vært toppen her. Oppdatering 22.4.07: 770px er nok en bedre topp da man også må ta hensyn til vidden på scollbarer.

Og så har vi muligheten med prosent vidde, såkalt ‘flytende’ vidde som justerer seg etter vindusbredden.

Men hva da om du ønsker en mellomting? Du har opprinnelig laget et design/ layout som har 900px fast vidde, for det ser perfekt ut for deg, og det er ikke aktuelt for deg å endre det.

Og nå vil vel kanskje folk si at “Jammen, ingen av dine sider har en vidde som er mindre enn 800px” og de vil har rett i det. Men; det er likevel blitt tatt hensyn til folk med mindre oppløsning eller små vinduer likevel. For det finnes en mellomløsning som heter elastisk vidde.

Roger Johansson skrev for to år siden en artikkel om hvordan man gjør dette: Fixed or fluid width? Elastic!.

Kort fortalt så setter rett og slett vidden i max-width, og bruker prosent på resten av elementene. Dette gjør at siden virker som om den er i fast vidde helt til man har et vindu som er mindre enn vidden man har satt.

Elastisk vidde gir deg friheten til å lage den layouten du vil, samtidig som den gir dine besøkende friheten å bruke hvilken oppløsning eller vindusbredde som passer for akkurat dem.

Published April 20, 2007

Filed in Uncategorized

Tags: , , , , , ,

RSS Comments 13 Comments

- Trackback

  1. Trackback from pligg.com

    800600 er fortsatt en greie
    Fru W…

    Br webdesignere kreve at beskende bruket et stort nettleservindu og/eller har stor skjerm?…

    April 20, 2007 @ 7:53 pm

  2. Comment by xiando(tm)

    Jeg føler meg litt truffet. Du har mange gode poeng. Folk surfer pr0n-sider med “T-Mobile Dash Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; Smartphone; 320×240)” og Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; i-mate K-JAM PPC; 240×320.

    Ja. 240×320 og 320×240. Riktignok er det en liten prosent som bruker slikt, men likevel: Noen nettleser vinduer har 240px bredde. Loggene gir inntrykk av at de fleste som bruker en slik nettleser surfer etter “den” typen innhold, men det kan være et falskt inntrykk fordi jeg har betydelig flere besøkende på “sånne” sider enn f.eks norsk-språklig hobbyjall.

    Bør vanlige nettlesere ta hensyn til 240px brede skjermer? Hvem vet. WP-temaet ditt skalerer ihvertfall fett nok ned til 240px (riktignok havner sidemenyen havner under innlegget, men det funker). Sånt blir selvfølgelig litt vanskeligere hvis du skal la WP-brukere laste opp egne 880×300px topp-bilder. ;)

    April 20, 2007 @ 8:40 pm

  3. Comment by Kristin

    Jeg vil anta at ‘bilde’ sider vil ha enda flere besøkende med mobil, noen kan jo lastes ned hvis man ønsker det - ‘bilder’ mener jeg.

    Ellers må man nok regne med menyer som stikker av i små vinduer, men dette er vanlig hvis man bruker tabell-løs layout, og forfengelighet foran brukervennlighet synes jeg lite om.

    Det WP bildet burde vel ikke være noe problem hvis man setter det som bakgrunnsbilde, eller?

    April 20, 2007 @ 9:04 pm

  4. Comment by bza

    Dersom du surfer med 320/240px oppløsning så bruker du nok en håndholdt enhet. Denne vil da mest sannynlig også identifisere seg som en håndholdt enhet, og dermed kan du fint lage en fleksibel, minigrafikk-løsning med @media handheld { } i CSS.

    April 20, 2007 @ 11:50 pm

  5. Comment by Kristin

    Det har jeg så vidt nevnt i artikkelen, at man kan bruke egen stil/ stilark for dette.

    April 21, 2007 @ 8:03 am

  6. Comment by bza

    Ja, jeg så det. Tenkte mer på kommentaren til xiando. Forøvrig ser jeg at du anbefaler 780px for statiske bredde tilpasset en oppløsning på 800×600. Er det ikke slik at WinXP-theme gir en scrollbarbredde på 24px? I så tilfelle er det vel bedre med 776 eller mindre. Personlig foretrekker jeg 760px som et utgangspunkt for statisk bredde.

    April 21, 2007 @ 12:07 pm

  7. Comment by Eugenie

    Ser fordelen med å oppgi bredder og andre mål i %, siden det da vil endre seg etter vindusstørrelsen og til en viss grad etter skriftstørrelsen.
    Hvordan vil det funke å oppgi bildestørrelser i %? Tenker på bilder man bruker i poster eller sider..
    Har prøvd i et par poster, og det ser ut til å funke fint, men er det lurt?
    Har alltid oppgitt bildestørrelser i piksler, men da holder bildene fast størrelse dersom vindu- eller skriftstørrelsen endres.
    Takler nettleserne bildestørrelsen oppgitt i %?

    April 21, 2007 @ 12:25 pm

  8. Comment by Kristin

    bza: Jeg endret til 770px til “toppbredde” som er litt lettere å huske på enn 776.

    Eugenie: Jeg bruker å sette inn dette i CSS filene mine:

    img {
    max-width:100%;
    overflow: hidden;
    }

    April 22, 2007 @ 9:55 am

  9. Comment by Eugenie

    Ja det har jeg også gjort, men fant ut at det blir enda bedre om jeg setter det inn i kodene sammen med bildet i posten…

    Setter man kodene inn i css-fila, beholder bildet samme størrelse, selv om skjermbildet blir mindre, eller om man bruker rullehjulet på musa for å endre skriftstørrelsen. Bildet blir bare ”kuttet av” når det ikke blir plass, men setter jeg inn width=”85%”, så endrer bildestørrelsen seg fint med vindusstørrelsen.

    Om jeg oppgir vidden i %, ser jeg for meg at det blir mye lettere om jeg skulle bytte tema, og trenger ikke være redd for at bildene skal bli for brede.

    Men har ikke endret dette så mange plasser, fordi jeg er usikker på hvordan dette ser ut i forskjellige nettlesere.

    April 22, 2007 @ 12:50 pm

  10. Comment by Kristin

    Eugenie; det fungerer i hvert fall for meg på Firefox og Opera -> Linux. Men jeg mener at høyde og vidde er noe man setter på bilder for at de skal lastes fortere, så jeg er litt usikker på hva % vidde i bildet gjør i den sammenhengen.

    April 22, 2007 @ 9:07 pm

  11. Comment by Eugenie

    Tja, du sier noe…
    her er i alle fall en side hvor jeg har oppgitt bildestørrelsen i % for å teste, og den har noen bilder:

    http://www.eugenie.no/jarek/tiden-hos-forvertene/

    Hadde vært greit med tilbakemeldinger…

    April 22, 2007 @ 10:02 pm

  12. Comment by Sverre

    Nei, men 1000×700 ish bør være minimum. Jeg bruker opera og liker et par verktøylinjer, og irriterer meg over sider hvor man må skrolle en halv side ned for å se innholdet. Menyer bør bare være 100px fra toppen og nedover.

    April 27, 2007 @ 9:37 pm

  13. Comment by Kristin

    Du mener kanskje 700×1000? For 1000px bred side har vi allerede sagt er for bredt. Men ja, det finnes endel sider med for høye bannere etc. så hovedinnholdet ligger nesten nederst på siden - i hvert fall føles det slik. Men høyre-venstre scrolling er verre enn nedover scrolling.

    April 28, 2007 @ 8:34 am