Als bouwer van websites wil je je bezoekers het zo aangenaam mogelijk maken. Dit probeer je onder andere te bewerkstelligen door een overzichtelijke layout, leesbare letters en een logische navigatiestructuur. Maar naast alle functies die je als bouwer in je website hebt gestopt, kan de gebruiker ook nog gebruik maken van vele andere functionaliteiten: die van de browser zelf. Enkele tips om optimaal gebruik te maken van de mogelijkheden van de browser.

Alles is relatief

Beschouw het volgende voorbeeld:

#content {
width: 450px;
font-size: 13px;
}

<div id="content">
  Lorem ipsum dolor sit amet.
<div>

Een browservenster heeft geen vaste grootte. Het achterhalen van de schermresolutie geeft geen garantie dat een gebruiker zijn venster ook gemaximaliseerd heeft. Waarom zou je dan wel een ontwerp maken met een vaste grootte? In plaats van het ontwerp letterlijk vast te leggen, kun je het ook laten aanpassen aan de gebruiker en diens instellingen: maak een vloeibaar ontwerp. Op deze manier benut je een venster altijd optimaal, ongeacht de schermresolutie of venstergrootte.

Maar niet alleen je layout kun je vloeibaar maken. Ook de lettergrootte kun je door de gebruiker laten bepalen. Het is niet eens nodig om lastige scripts te schrijven voor het wisselen van style sheet, want de functionaliteit hiervoor zit al in de browser ingebouwd. Het enige wat hiervoor nodig is, is een relatieve lettergrootte, bijvoorbeeld “0.8em” of “small”. De gebruiker kan dan de lettergrootte aanpassen naar zijn eigen voorkeur. Wanneer de lettergrootte in absolute eenheden wordt aangegeven (bijvoorbeeld “13px”), ontneem je de gebruiker deze keuze.

Als we deze punten toepassen op het voorbeeld, krijgen we het volgende vloeibare resultaat:

#content {
width: 80%;
font-size: small;
}

<div id="content">
  Lorem ipsum dolor sit amet.
<div>

Status vs. Tooltip

Onderschat de standaardfunctie van de statusbalk niet. Veel gebruikers willen graag zien waar een link naar verwijst en die informatie wordt door de statusbalk gegeven. Als je je eigen meldingen hierin plaatst, ontneem je de gebruiker deze informatie. Beter is om dergelijke meldingen in een tooltip te zetten. Niet alleen bij hyperlinks is het gebruik van tooltips aan te raden. Tooltips zijn een krachtige manier van het presenteren van metagegevens – informatie over informatie. Het toevoegen van een title bij een willekeurige tag is voldoende, de browser doet de rest.

acronym, .tooltip {
border-bottom: 1px dotted #000;
cursor: help;
}

Voorbeelden:

» Een zin met een tooltip
» Een goede zoekmachine
» UML

JavaScript - hulp of hinder?

Het gebruik van JavaScript en DHTML in websites zien we steeds vaker terug. Dit kan verschillen van de behulpzame variant (tabbladen of drop-down-menu’s) tot de irritante variant (hardnekkige popups en –unders). Het belangrijkste is dat je bij het gebruik van JavaScript de functionaliteit van de browser intact laat. Bekijk eens het volgende voorbeeld van het veelgebruikte ‘afbeelding in een popupvenster’ script:

function popup(i, w, h) {
window.open(i, 'popwin', 'width='+ w +',height='+ h);
}

<a href="#" onclick="popup('/img/drogeboot.jpg',330,260);" onmouseover="window.status='Popup!';return true;" onmouseout="window.status='';return true;">Pop mij up!</a>

» Pop mij up!

Door het te doen zoals in het voorbeeld staat, stuit de gebruiker op een aantal problemen:

• De gebruiker ziet in de statusbalk van het venster niet waar hij/zij heen gaat, conform ‘normale’ links;
• De gebruiker kan de link niet openen in nieuw venster door middel van bijvoorbeeld een shift-klik;
• Bij een normale klik op de link, scrollt het venster ongevraagd helemaal naar boven;
• Wanneer de gebruiker JavaScript uit heeft staan, komt hij/zij niet bij de afbeelding terecht.

Om deze minpunten te verhelpen, vervangen we de voorbeeldcode met het volgende:

function openPopup(i, w, h) {
window.open(i, 'popwin', 'width='+ w +',height='+ h);
return false;
}

<a href="/img/drogeboot.jpg" onclick="return openPopup(this.href,330,260);" title="Popup!">Pop mij op!</a>

» Pop mij op!

De voordelen hierbij zijn:

• De gebruiker ziet in de statusbalk de locatie van het plaatje, terwijl de melding 'popup!' aanwezig blijft in de tooltip;
• Het openen in een nieuw venster wordt genegeerd door de 'return false', waarna het popupscript gewoon wordt uitgevoerd;
• De pagina blijft staan op de plek waar die stond - er wordt niet gescrolld;
• JavaScript-loze gebruikers krijgen de afbeelding te zien in het huidige venster.

Tot slot

Het is verstandig om te beseffen dat het wiel al is uitgevonden. Code die mogelijkheden van de browser kopieert, is in principe overbodig. Denk hierbij aan de zelfgemaakte terug-knop (<a href="javascript:history.go(-1);">Terug</a>) of aan het automatisch sluiten van een venster (<body onblur="window.close();">).

Een browser en een website horen elkaar niet in de weg te zitten, maar elkaar goed te doen. De twee vormen een synergie. Hiermee rekening houden is alleen maar goed voor bouwer en gebruiker.

• Home
• Artikelen
• Colofon