Toegankelijkheidstips

Leesbaarheid & pagina-indeling

Katinka Hesselink 2006

Deze pagina gaat over twee aspecten van het visuele aspect van een webpagina. Deze zaken zijn voor pratende browsers van geen belang en ook zoekmachines maakt het niets uit: regellengte en de plekken waar mensen informatie zoeken

Regellengte

Een website wordt bekeken op schermen met diverse groottes. De statistieken van mijn site laten schermen zien van (December 2005 1) 800x600 pixels tot1280x960 pixels. In theorie bestaan er ook schermen van 2048x1536 pixels. Van kleinst tot grootst voorkomend op dit moment scheelt een factor 1,5. Dat is nogal wat. 

Een statische layout , met een vastgelegde breedte in pixels, maakt geen gebruik van de grootte van het scherm. Deze oplossing wordt veel gebruikt, maar heeft duidelijke nadelen.

Heb je een groot scherm - heb je er niets aan!

Een oplossing daarvoor is de vloeibare layout (fluid layout): de breedte van bijvoorbeeld paragrafen wordt niet in pixels, maar in procenten gegeven. Hier zit een ander nadeel aan: 

Uit onderzoek blijkt dat mensen tekst het makkelijkst lezen als de regels 12 woorden bevatten: niet meer en niet minder. Vertaald in web-maten is dit zo'n 30 of 35 em. 2

De oplossing lijkt duidelijk. De breedte wordt normaal gesproken bijvoorbeeld 70% van het scherm, maar niet breder dan 33 em. Omdat de max-width na de width komt heeft die voorrang: past 33 em op het scherm, dan zal de browser dat gebruiken. Dat geldt voor gebruikers met een groot scherm. Gebruikers met een klein scherm hebben geen overlap naar rechts, omdat ze een main-content zien die 'slechts' 70% van het scherm in beslag neemt. Deze oplossing wordt wel de elastische layout genoemd. Gebruikers met een groot scherm hoeven niet te veel heen en weer te draaien met hun hoofd:

#main {width: 70%; max-width: 33em;}

Jammer genoeg stuiten we op het gebruikelijke probleem: IE pikt dit niet op. In Nederland is dat toch zo'n 95% van de gebruikers. 1 Hiervoor heb ik in het aparte IE-stylesheet de volgende ingewikkelde code staan:

#main {width:expression( 
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto");}

De plekken waar mensen informatie zoeken

In het Nederlands lezen mensen van links naar rechts en van boven naar beneden. Daardoor zoeken ze eerst linksboven naar informatie, vervolgens lezend naar rechts en naar onder . De plek waar dus de belangrijkste informatie komt te staan is, als je verstandig bent: links-boven. Het belangrijkst is je merk, je logo, je identiteit . Waar sta je voor? 

Vervolgens is belangrijk voor de gebruiker: het menu : waar kan ik heen, wat voor informatie kan ik op deze website verwachten? Links-boven, eventueel onder het logo is dan ook de meest voorkomende plek voor een menu (zoals op deze site). De volgende logische plek voor het menu is bovenaan, onder het logo: horizontaal. Niet essentiële informatie kan onderaan. Mensen die de moeite nemen naar beneden te scrollen kunnen er gebruik van maken, maar ze missen niet veel als ze dat niet doen.

Bronnen

Voetnoot

1 Update augustus 2006: ik heb nu in mijn website-statistieken ook schermen tot 2048px breed tegen gekomen. Dit zijn er nog heel weinig. Zelfs de percentages bezoekers met schermen met  de maat 1440x900 is nog uitzonderlijk. Het kunnen er echter alleen maar meer worden. Deze zomer heb ik ervaring opgedaan met het werken met een groot, dubbel scherm en het is heerlijk. 

2 Overigens: als mensen een groot scherm nemen, omdat hun ogen niet zo goed zijn, is er een omweg: het scherm instellen alsof het kleiner is. Windows zorgt er dan voor dat de computer de pixels groter neemt. Hoe de webdesigner zijn pagina ook in stelt - je ziet alles groter, omdat je eigen computer groter is ingesteld.

In Windows XP ga je via het start menu naar 'configuratiescherm', ;'vormgeving en thema's', 'beeldscherm-resolutie wijzigen'. Kies vervolgens een of twee stappen kleiner dan de automatische instelling.