Het ontwikkelen van een webdesign begint met het kiezen van de afmeting van de pagina. Omdat de bezoekers van de te ontwikkelen website gebruik maken van verschillende beeldschermen en verschillende resoluties is er geen standaard-formaat voor een webontwerp, zoals dat wel het geval kan zijn bij bijvoorbeeld het opstellen van een brief op briefpapier waarvan het formaat (vrijwel altijd) A4 zal zijn.
Resoluties
Afhankelijk van de verhoudingen (lengte x breedte) van het beeldscherm zijn er diverse resoluties mogelijk. Tot voor kort waren en een paar standaarden maar met de komst van de breedbeeld laptop zijn de resolutie-variaties aanzienlijk toegenomen. In het verleden was een resolutie van 800 x 600 (pixels) gangbaar maar tegenwoordig hebben de meeste gebruikers een resolutie van 1024 x 768 of hoger. Dit komt mede omdat beeldschermen groter worden en deze een scherper beeld geven. Statistieken van mondiaal gebruik van resoluties is te vinden op de website van het w3c.
Resolutie en de gebruikers
Resoluties zijn dus globaal af te lezen, maar kunnen ook afhankelijk zijn van de doelgroep van de website. Er is altijd een klein percentage van gebruikers met specifieke eigenschappen. De vraag is echter in hoeverre je de website nog wilt beschikbaar stellen voor bijvoorbeeld een klein percentage gebruikers met een relatief lage resolutie. Dit kan afhankelijk zijn van de doelgroep. Wordt de website bijvoorbeeld vaak bezocht door oudere mensen, dan is het aannemelijk dat de penetratie van lage resoluties hoog zal zijn. Kies in dit geval voor een website-breedte gebaseerd op 800 x 600 (of zelfs 600 x 480). Wordt de website bezocht door frequentiele computergebruikers (zoals gamers of designers) is het aannemelijk dat ze een groot beeldscherm hebben en dus een hoge resolutie hebben ingesteld.
Via diverse tools is het mogelijk om het gedrag en de technische “achtergrond” van de gebruiker te monitoren. Google analytics is een prima gratis product. Naast het vastleggen van de resoluties en besturingssystemen is het onder andere ook mogelijk om te zien welke pagina’s vaak worden bezocht of via welke pagina de website wordt verlaten.
De breedte vaststellen
De meeste websites worden zodanig ontworpen dat de gebruiker niet horizontaal hoeft te scrollen. In principe is de breedte van de website dus eenvoudig vast te stellen. Als we een website willen ontwikkelen voor een resolutie van 1024×768 kunnen we niet zeggen dat de breedte van de pagina dus 1024 pixels is. De ruimte die de scrollbalk van de browser inneemt gaat er af. In principe moeten we (om wat marge over te houden ivm verschillende besturingssystemen en browsers) 30 pixels van de totale breedte aftrekken. De ideale breedte zal in dit geval dus 1024-30=994 pixels zijn.
De hoogte vaststellen
Website’s kunnen effectief oneindig hoog worden omdat het verticaal scrollen door een pagina inmiddels ingeburgerd is. Natuurlijk is een overvloed aan informatie niet gebruiksvriendelijk dus de maximale hoogte hangt een beetje af van de inhoud van de pagina. Zaken om wel rekening mee te houden is het primairezicht gedeelte. Dit is het gedeelte wat de gebruiker te zien krijgt als de pagina wordt geopend. Dus alles wat binnen de browser valt en waarvoor niet hoeft te worden gescrold om het te “raadplegen”.
Om de hoogte vast te stellen van het kader kan de hoogte van de resolutie worden genomen. Trek hier dan 250 pixels van af (hoogte van de menubalk, url-balk etc). Dit is ook vrij ruim genomen omdat veel gebruikers toolbars hebben geïnstalleerd en dit vrij uiteen kan lopen.
Verder is het mogelijk om verticaal rekening te houden met verschillende resoluties. Funda.nl heeft dit op een slimme manier gedaan. Zo is de belangrijkste inhoud zichtbaar voor 800×600 en wordt de secundair belangrijke informatie toegevoegd aan een gedeelte wat tussen die hoogtelijn van 800×600 en 1024×768 valt. De rest van de informatie wordt daaronder geplaatst.
Vloeibaar design
Ook is het mogelijk om liquid design toe te passen op een ontwerp. De website rekt dan mee met de browser. Er zijn verschillende technieken om dit te realiseren. Via flash is het mogelijk om de website zowel verticaal als horizontaal mee te laten rekken. In HTML kan dit voornamelijk worden gedaan door de pagina horizontaal uit te laten rekken. Het heeft diverse voordelen, de browser is immers prima gevuld. Echter heeft de ontwerper geen invloed op bijvoorbeeld regellengte en is het niet mogelijk om afbeeldingen te plaatsen die over de volledige breedte van de colom worden weergegeven.
Wikipedia maakt gebruik van deze variant van “vormgeving”. De breedte wordt automatisch meegeschaald met de browser.
Template
Om de hoogte en breedte te bepalen bij het opzetten van een ontwerp is het handig om een sjabloom te gebruiken. Hierin zijn de beeld-lijnen van de twee meest gebruikte resoluties opgenomen.
Conclusie
Er zijn dus veel factoren die het formaat van de pagina kunnen bepalen. Over het algemeen is het wel zo dat een website geoptimaliseerd voor een resolutie van 800 x 600 door vrijwel alle gebruikers kan worden bekeken. De laatste jaren zien we echter dat veel websites de overstap maken naar een hogere resolutie: 1024 x 768. Welke standaarden gebruik jij met het vaststellen van het formaat?