Het eerste waar de meeste ontwerpers aan denken bij het bouwen van hun webpagina, is welke resolutie moet worden ontworpen. Waar het echt op aan komt, is bepalen hoe breed je ontwerp zou moeten zijn. Er bestaat niet meer zoiets als een standaard website-breedte.
Waarom overwegen resolutie
In 1995 waren de standaard monitoren met een resolutie van 640x480 de grootste en beste monitoren die beschikbaar waren. Dit betekende dat webontwerpers zich concentreerden op het maken van pagina's die er goed uitzagen in webbrowsers gemaximaliseerd op een 12-inch tot 14-inch monitor met die resolutie.
Tegenwoordig is 640x480 resolutie minder dan 1 procent van het meeste websiteverkeer. Mensen gebruiken computers met veel hogere resoluties, waaronder 1366x768, 1600x900 en 5120x2880. In veel gevallen werkt ontwerpen voor een resolutiescherm van 1366x768.
We bevinden ons op een punt in de geschiedenis van webdesign, waar we ons niet veel zorgen hoeven te maken over de oplossing. De meeste mensen hebben grote breedbeeldmonitors en maximaliseren niet hun browservenster. Dus als u besluit een pagina te ontwerpen die niet meer dan 1366 pixels breed is, ziet uw pagina er waarschijnlijk goed uit in de meeste browservensters, zelfs op grote monitoren met een hogere resolutie.
Browserbreedte
Voordat je gaat denken: "oké, ik maak mijn pagina's 1366 pixels breed", er is meer aan dit verhaal. Een vaak over het hoofd gezien probleem bij het bepalen van de breedte van een webpagina is hoe groot uw klanten hun browsers behouden. Met name maximaliseren ze hun browsers op volledig schermformaat of houden ze deze kleiner dan het volledige scherm?
In één informeel onderzoek onder medewerkers die allemaal een standaard 1024x768-resolutie-laptop gebruikten, hielden er twee al hun applicaties gemaximaliseerd. De rest had om verschillende redenen vensters met verschillende afmetingen open. Dit illustreert dat als u het intranet van dit bedrijf ontwerpt op 1024 pixels breed, 85 procent van de gebruikers horizontaal moet scrollen om de hele pagina te zien.
Nadat u account hebt gemaakt voor klanten die dit maximaliseren of niet doen, moet u nadenken over de grenzen van de browser. Elke webbrowser heeft een schuifbalk en randen aan de zijkanten die de beschikbare ruimte verkleinen van 800 tot ongeveer 740 pixels of minder op 800x600 resoluties en ongeveer 980 pixels op gemaximaliseerde vensters met een resolutie van 1024x768. Dit wordt browser "chrome" genoemd en het kan de bruikbare ruimte voor uw paginaontwerp afnemen.
Vaste of vloeibare breedtepagina's
De werkelijke numerieke breedte is niet het enige waar u aan moet denken bij het ontwerpen van de breedte van uw website. U moet ook beslissen of u een vaste breedte of vloeistofbreedte heeft. Met andere woorden, gaat u de breedte instellen op een bepaald getal (vast) of op een percentage (vloeistof)?
Vaste breedte
Pagina's met een vaste breedte zijn precies zoals ze klinken. De breedte is vastgesteld op een bepaald nummer en verandert niet, hoe groot of klein de browser ook is. Dit kan goed zijn als u wilt dat uw ontwerp er hetzelfde uitziet, ongeacht de breedte of breedte van de browsers van uw lezer, maar deze methode houdt geen rekening met uw lezers. Mensen met browsers die smaller zijn dan uw ontwerp, moeten horizontaal scrollen en mensen met brede browsers hebben grote hoeveelheden lege ruimte op het scherm.
Om pagina's met een vaste breedte te maken, gebruikt u eenvoudig bepaalde pixelaantallen voor de breedten van uw paginadelen.
Vloeibare breedte
Vloeibare breedtepagina's (ook wel flexibele breedtepagina's genoemd) variëren in breedte, afhankelijk van hoe breed het browservenster is. Hiermee kunt u pagina's ontwerpen die meer op uw klanten zijn gericht. Het probleem met pagina's met vloeistofbreedte is dat ze moeilijk leesbaar zijn. Als de scanlengte van een regel tekst langer is dan 10 tot 12 woorden of korter dan 4 tot 5 woorden, kan het moeilijk zijn om deze te lezen. Dit betekent dat lezers met grote of kleine browservensters problemen hebben.
Als u pagina's met een flexibele breedte wilt maken, gebruikt u eenvoudigweg percentages of em's voor de breedten van uw paginadelen. U moet ook vertrouwd raken met de CSS max-width-eigenschap. Met deze eigenschap kunt u een breedte in percentages instellen, maar deze vervolgens beperken zodat deze niet zo groot wordt dat mensen deze niet kunnen lezen.
En de winnaar is: CSS Media Queries
De beste oplossing is tegenwoordig om CSS-mediaquery's en responsief ontwerp te gebruiken om een pagina te maken die zich aanpast aan de breedte van de browser die deze bekijkt. Een responsief webontwerp gebruikt dezelfde inhoud om een webpagina te maken die werkt, ongeacht of u deze bekijkt op 5120 pixels breed of 320 pixels breed. De pagina's met verschillende formaten zien er anders uit, maar ze bevatten dezelfde inhoud. Met de mediaquery in CSS3 beantwoordt elk ontvangend apparaat de query met de grootte en past de stylesheet zich aan aan die specifieke grootte.
