5 antwoorden over de breedte van je website
Als het gaat over de breedte van een website is het vaak lastig te bepalen hoe breed de website nu moet worden, wil hij goed gezien worden door alle gebruikers, dus ook op bijvoorbeeld een iphone, of een extra groot beeldscherm. Wat is nu de meest gebruikte resolutie en hoe zit het met vaste breedtes ten opzichten van variabele breedtes? 5 prangende vragen beantwoord.
1. Kunnen we 800×600 nu eindelijk negeren?
Ook al zijn er nog maar weinig gebruikers die een computer hebben met als schermresolutie 800×600, toch kun je dit formaat beter niet negeren. Er zijn mensen die wel een groot scherm hebben, maar toch hun browser kleiner openen. Hier heb je geen invloed op. Niet iedereen opent een scherm maximaal.
Daarnaast is er een groep die 800×600 gebruikt omdat ze slechtziend zijn en met een groot beeldscherm deze resolutie gebruiken en zodoende alles kunnen lezen.
Niet negeren dus 800×600 pixels.
Wat is het beste schermformaat om een website in te maken bij 800×600 en 1024×768?
Een optimaal formaat voor beide schermen is moeilijk aan te geven. Zo zul je rekening moeten houden met het feit dat er scrollbars in beeld kunnen komen en bijvoorbeeld randen. Hou toch wel rekening met een verlies van een 20 tot 50 pixels.
3. Wat is de meest voorkomende schermresolutie?
Volgens de meeste websites die bezoekersaantallen bijhouden is momenteel 1024×768 het meest gebruikte scherm, maar de grotere schermen zijn in opkomst. Daarnaast wordt het gebruik van kleine schermen van bijvoorbeeld mobiele telefoons en PDA’s ook steeds belangrijker.
Voor HTML-site geldt de volgende verdeling als het gaat over het afgelopen jaar.
Daarbij valt op dat 1280×1024 de meest voorkomende resolutie is, daarbij moet je wel bedenken dat de meeste bezoekers iets doen met websites maken en vaak al wat duurdere computers gebruiken dan de gemiddelde Nederlander, denk ik dan toch…
4. Moet je verschillende resoluties verschillende stylesheets geven met JavaScript?
Er zijn verschillende JavaScripts gemaakt om ervoor te zorgen dat de verschillende beeldschermen aparte stijlbladen voorgeschoteld krijgen. Nadeel is dat JavaScript niet aan hoeft te staan op computers van bezoekers, een en ander kan matig tot slecht functioneren of soms helemaal niet werken omdat er een andere breedte gekozen is, maar het alternatief is veel eenvoudiger.
Met CSS kun je variabele breedtes meegeven, de zogenaamde ‘fluid layout’. Dit doe je met percentages in plaats van vaste breedtes in pixels.
JavaScript is sowieso geen optie voor ‘handhelds’. Veel mobieltjes ondersteunen dit niet. Daarvoor heb je het alternatieve stijlblad nodig. ‘media=”handheld”‘ bijvoorbeeld.
Vaste breedte tegenover variabele breedte, hoe zit dat?
Vaste breedte, of fixed layout wordt veel gebruikt als er een website gemaakt wordt die veel gebruik maakt van plaatjes. Bijvoorbeeld om een achtergrond exact te plaatsen. Voordeel is dat je vrij nauwkeurig zaken op hun plaats kunt zetten. Nadeel is dat je te maken hebt met veel verschillende groottes.
Hou je bijvoorbeeld rekening met 800×600, dan valt de website wel erg in het niet op een heel groot beeldscherm. Maak je de website te groot dan is deze weer niet goed zichtbaar voor gebruikers van kleine schermen.
Voorbeeldcode:
body { width: 760px;}
Bij websites met een variabele grootte, fluid layout, is de grootte afhankelijk van de browser. Deze wordt bepaald in percentages. De breedte wordt bijvoorbeeld op 50% gezet en de website zal in iedere browser de helft van het scherm innemen. Een nadeel kan zijn dat in grote schermen de regels bijvoorbeeld wel erg lang gaan worden, waardoor de layout ook wel eens uit zijn verband kan schieten.
Voordeel is natuurlijk de kleinere afhankelijkheid van de schermgrootte.
Voorbeeldcode:
body { width: 95%;}
Tip, max-width en min-height
Nog even een tip. Tegenwoordig kun je om dat hele uitgerekte scherm te voorkomen ook de maximale breedte instellen. Dit wordt in de oudere Internet Explorer browsers wat matig tot niet ondersteunt, maar hier zijn wat oplossingen voor, beschreven in het artikel CSS hacks voor verschillende browsers.
Sorry, maar als ik me aan de regels van dit artikel moet houden komen we nooit verder.
“800×600 niet negeren omdat nog steeds een zogenaamd groot aantal mensen dit gebruiken.”
Niet echt.
http://w3schools.com/browsers/browsers_display.asp
4% gebruikte nog die resolutie aan het BEGIN van dit jaar. Moet je voorstellen hoeveel nu nog, en ok, mag je er 1% voor de mensen die hun scherm verkleinen.
Daarnaast is er gewoon ontwikkeling nodig. Je kunt gewoon niet met iedereen rekening houden. Denk je eens in: “IE6 niet negeren, want er zijn nog steeds zo’n 10% die deze browser gebruiken”. Ok, negeren we hem niet. Denk je dan dat er ooit enige vooruitgang komt?
Naar mijn weten is 90% van de sites die ik bezoek (lees: recente ontwerpen, en niet uit 1999) In de schermgrootte van 1024*768, en ik kan zelfs sites aanwijzen die al gebaseerd zijn op de nieuwe breedte, 1280*1024. DAT is vooruitgang!
Ik voeg mij aan bij de comment van Daan, 800×600 is te negeren.
ook de reden waarom mensen nog 800 x 600 reso’s zouden gebruiken vind ik ver gezocht, houd CTRL in en scrollen maar, zo wordt de tekst ook groter..
Of je 800×600 moet negeren hangt natuurlijk volkomen van de doelgroep af voor wie je de website maakt, evenals of je IE6 moet ondersteunen.
Veel grote bedrijven willen maar niet upgraden naar een “nieuwere” browser. Zo draait KPN, maar ook bijv Achmea en al haar dochter ondernemingen nog op IE6
Gerelateerde vraag: als je kiest voor een fixed layout van zeg 950 pixels, hoe zorg je er in CSS dan voor dat hij in een 1280 scherm in het midden centreert? Ik heb al van alles geprobeerd maar hij blijft het links zetten als je werkt met div’s en ‘position: absolute’…
Wel grappig artikel, alleen vind ik dat je de plank een beetje misslaat met dat blijven ondersteunen van 800*600, die resolutie lijkt me nu toch écht eindelijk eens uitgerangeerd.
@Ronald:
HTML-code:
CSS-code:
#fixed_950 {
margin: 0px auto;
width: 950px;
min-height: 200px;
}
Ik zet de min-height er altijd bij, gewoon omdat daarvan hou 🙂
Maak nooit sites voor 800×600.
Heeft totaal geen zin. Waarom?
1) Handhelds hebben nu al veel betere browsers. Waarbij Opera de meeste populaire is. Ik browse elke dag op sites met een hoge resolutie en heb geen enkel probleem ermee.
2) Slechtzienden:
Die werken misschien op 800×600. Dan moeten ze maar meer scrollen. Als ze vergrootglas gebruiken, moeten ze dat toch sowieso doen. Daarnaast, zijn ze dat gewend en browsen slechtzienden veel en veel langzamer.
3) Nieuwe monitors
Veel mensen hebben een nieuwe monitors, daarbij bedoel ik geen CRT’s meer. Resoluties worden steeds hoger, dus je kan beter die doelgroep aanhoren.
Ik maak altijd sites met een maximale breedte van 980px.
@Ronald & Daan:
CSS :
body {margin:0px;}
#container {margin-left:auto; margin-right:auto;}
gebruik ik altijd.
@Ryan, de code die jij geeft word eigenlijk zo samengevat:
margin: 0px auto;
waar 0px staat voor boven en onder, en auto voor links en rechts (precies wat jij zegt, alleen korter en sneller)
Als je deze op de wrapper zet, heeft dit 9/10 keer hetzelfde effect, in een stel regels code minder dan die van jou.
Vergeten vorige comment af te maken, sorry 🙁
Toelichting tot de 1/10 keer dat het niet werkt, is als je bijvoorbeeld je header div buiten je wrapper hebt.
daarbij moet je wel een width instellen. Anders werkt het niet…
inderdaad moet er altijd een width aangegeven worden, spreekt voor zich.
dat het ook zo kon was mij nog niet duidelijk, echter vindt ik dit onduidelijk, maar ieder z’n eigen weg ;D
@DNA, ja, stond in mn vorige comment wel 🙂
@DNA, @Ryan, @Daan: Bedankt jongens, ik ben er uit. Ging niet helemaal vanzelf, want met een margin: auto ging wel de container naar het midden maar bleven de div’s erbinnen naar de linkerbovenhoek verwijzen. Maar ik heb ontdekt dat als je de container position: relative meegeeft en de divs daarbinnen position: absolute dat het dan weer allemaal goed meegaat naar het midden. Moet je ook maar weten 😉
@Ronald, het zou ook moeten werken zonder positions aan te geven.
Gewoon automatisch. 😉
800×600 niet negeren, afhankelijk van de soort site. Heb je een simpele blog, houd je dan vooral aan die 800×600 resolutie. Heb je een wat uitgebreidere site dan kun je wel een bredere resolutie gebruiken. Pas op met fluid layouts naar mijn mening, ik vind ze meestal irritant ogen.
@Daan: gewoon 0 in plaats van 0px! Nul is nul.
Vergeet ook niet voor IE6:
body { text-align: center; }
#fixed_950 { text-align: left; }
met deze code centreert IE6 de div…
Kan iemand hiermee mij kunnen helpen. Ik wil een heel kleine aanpassing weet best weinig van css. Ik vind eigenlijk mijn huidige webshop te small graag iets breder of met %percentage werken.
stuur me anders even een mail webmasterAThtml-site.nl