» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #47

Gebruik die browser! -

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:

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:

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.

Auteur

Lodewijk Schutte

bouwt websites voor Webkracht en houdt een weblog / bandlog bij op low.jimmyhat.nl. Daarnaast steekt hij veel tijd in zijn band jimmyhat, waar hij de drums bespeelt en de site beheert.

Ook schrijft hij cd-recensies voor about:blank en is hij verantwoordelijk voor werfpop.nl.

Publicatiedatum: 24 april 2003

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-2016 » NAAR VOREN en de auteurs