De tips in het kort:

1. Maak van elke link een echte link
2. Geef een link een beschrijvende tekst
3. Zorg dat duidelijk is wat een link is (en wat niet)
4. Maak onderscheid in onbezochte en bezochte links
5. Open links niet in een nieuw venster
6. Gebruik iconen om links te verhelderen

1. Maak van elke link een echte link

Wanneer je links hebt waar bezoekers javascript voor nodig hebben om erop te kunnen klikken, dan heb je onechte links. Meestal staat er iets dergelijks in als:

<a href="javascript:newwindow()">link</a>
<a href="#" onclick="javascript:popUp('http://www.example.com')">link</a>

Die link leidt nergens naartoe wanneer javascript uitstaat. Nou hebben de meeste mensen wel javascript aan, maar zoekmachines niet. Daarom kunnen veel sites met javascriptmenu’s een hoge score in zoekmachines bij voorbaat al vergeten; er valt voor een zoekmachine weinig te indexeren. Daarnaast blijven er altijd mensen die bijvoorbeeld vanwege bedrijfsveiligheid javascript niet aan hebben staan (ongeveer 5%). En zelfs voor je webstatistiekenpakket kan het een probleem zijn. Kortom, zorg dat elke link ook zonder javascript ergens naartoe leidt. (Alternatieve menu’s bouw je met CSS, zoals wordt uitgelegd in het Listutorial. Gevorderde alternatieven zijn de o.a. de Son of Suckerfish dropdowns of de UDM4.)

2. Geef een link een beschrijvende tekst

Uit onderzoek blijkt dat veel bezoekers pagina’s niet lezen, maar door de pagina scannen naar informatie. Bezoekers letten op kopjes, dikgedrukte woorden, lijsten/opsommingen, maar ook op links. Immers, links zijn veelal bedoeld om aan te geven dat je naar meer informatie kun navigeren.

Tot voor kort was één van de meestvoorkomende linkteksten: “klik hier”. Wanneer je weet dat mensen de pagina niet lezen, maar scannen naar woorden en zinsdelen die aangeven dat er bepaalde informatie volgt, dan wordt duidelijk dat ‘klik hier’ de bezoeker weinig zegt. Men moet dan alsnog de context lezen om te begrijpen waar de link naartoe leidt. Bovendien is de ‘klik hier’-zin tekstueel gezien veelal overbodig; het is vaak voldoende om een woord of zinsdeel uit de voorgaande zin te linken.

In bovenstaande afbeelding had men makkelijk kunnen volstaan door alles te verwijderen behalve de kopjes en vervolgens een link te maken van ‘Lenen via internet’ en ‘Muziek lenen’. Niet alleen is meteen duidelijk wat het onderwerp van de link is, de extra regels ‘klik hier voor meer informatie’ zijn ook nog duidelijk overbodig.

3. Zorg dat duidelijk is wat een link is (en wat niet)

Links zijn vaak onderstreept. Maar op sommige sites wordt daarnaast onderstreping gebruikt om tekstkopjes te maken, of om een bepaald tekstdeel nadruk te geven. Bij teksten op papier is onderstreping daar erg geschikt voor, maar op internet valt zo moeilijker te onderscheiden wat een link is en wat niet.

Voorbeeld:
Dit is onderstreepte tekst en dit is een link naar de homepage.

Onderstreep dus nooit in internetteksten, tenzij het een link is. Het W3C heeft niet voor niks het underline-element afgekeurd, zoals ook valt te lezen in mijn artikel over achterhaalde elementen.

Hoewel links dus vaak onderstreept zijn, kiezen sommige sites ervoor de onderstreping van links juist weg te halen. Dat maakt links moeilijker te herkennen. In dat geval is het belangrijk dat je links op andere manieren goed zichtbaar maakt, bijvoorbeeld door ze zowel een andere kleur mee te geven, als door ze dikgedrukt te maken. Let er dan wel goed op dat die links niet lijken op andere elementen in de tekst die geen links zijn.

4. Maak onderscheid in onbezochte en bezochte links

Zeker wanneer je een grote website hebt, is het handig als bezoekers ziet welke pagina’s ze al wel hebben bezocht en welke nog niet. Hoe frustrerend is het als je op een site naar informatie zoekt en je meerdere malen op dezelfde pagina terecht komt, terwijl je daar al bent geweest? Voorkom zulke ergernissen op je eigen site en geef bezochte links een ander kleurtje mee. Hiervoor gebruik je de link-pseudo-classes a:link en a:visited.

Je kunt je pagina nóg gebruiksvriendelijker maken door links op te lichten wanneer je muis er overheen gaat (a:hover), door links op te lichten als je met de tabknop erop staat (a:focus) en door links op te lichten wanneer je erop klikt (a:active). Tip: let in je CSS op de volgorde van de link-states.

5. Open links niet in een nieuw venster

Sites openen links in een nieuw venster meestal om twee redenen:

• Om te voorkomen dat mensen je site verlaten.
• Om de huidige pagina te houden, maar tegelijkertijd een aanvulling te tonen, zoals een extra uitleg, een vergroting van een foto, of een invulscherm.

Met name het eerste punt is een veelgehoorde reden om een nieuw venster te laten openen. En inderdaad zijn er veel mensen die een nieuw scherm op prijs stellen. Het blijkt echter dat er net zoveel mensen zijn die helemaal geen nieuw venster willen openen, of op z’n minst zelf de keus daarover willen hebben. Dus hoewel je de helft helpt, val je de andere helft er mee lastig. Mensen zelf laten kiezen voor een nieuw scherm is dan de beste optie. Bovendien is het maar de vraag of je mensen kwijt bent zodra je de link in hetzelfde venster opent. Raakt Google mensen kwijt doordat geen enkele link in een nieuw scherm wordt geopend?

Voor het tweede punt, het tonen van aanvullende info over de betreffende pagina, heeft men tegenwoordig methodes bedacht die als alternatief kunnen dienen voor het openen van een nieuw scherm. De informatie die je in het nieuwe scherm zou zetten, kun je bijvoorbeeld ook verwerken in je huidige pagina; je verbergt het met CSS en toont het slechts wanneer men erom vraagt. Een ander alternatief is om de ‘popup-pagina’ te openen binnen hetzelfde scherm met behulp van scripts zoals Lightbox2 of Thickbox. Is een nieuw scherm toch nodig, zorg dan in ieder geval dat de popuplink leidt naar een echte pagina (zie punt 1).

6. Gebruik iconen om links te verhelderen

Soms werkt het verhelderend om in één oogopslag te zien wat een link doet of waar het naartoe leidt. Op dit blog bijvoorbeeld gebruik ik een icoon om aan te geven dat een link naar een externe website leidt. Ik gebruik daarvoor attribuut-selectors.

Meer leesvoer

• Webrichtlijnen: Links en navigatie
• Usarchy: Nooit meer “Klik hier” en “Lees verder”
• Usarchy: Usability mythe #2: open externe links in nieuw venster
• UseIt: Top Ten Mistakes in Web Design
• Dev.Opera: Accessible Context-sensitive Help with Unobtrusive DOM Scripting

Inhoud

• De valide doctypes
• De afvallers
• HTML of XHTML?
• Conclusie

De valide doctypes

Als je de broncodes van websites bekijkt, zijn er talloze doctypes in de omloop. De lijst met valide doctypes is echter beperkt. Voor webpagina’s komt het in de praktijk neer op de volgende doctypes:

• Drie HTML 4.01 doctypes (Transitional, Strict, Frameset).
• Drie XHTML 1.0 doctypes (Transitional, Strict, Frameset).
• Eén XHTML 1.1 doctype.

De afvallers

Wanneer je geen frames gebruikt, vallen er al weer twee af uit de lijst. Frames zijn namelijk niet aan te raden. Een Transitional doctype wordt gebruikt voor sites in een overgangsfase, bijvoorbeeld voor sites die een contentmanagementsysteem gebruiken dat verouderde HTML levert. Overstappen op een Strict-doctype kan in zulke gevallen ongewenste bijwerkingen in browserweergave hebben. Nieuwe sites hebben dit probleem niet. Daar zou je dan ook geen Transitional-doctype moeten gebruiken. In veruit de meeste gevallen zijn er dan ook geen goede redenen meer om een Transitional doctype te blijven kiezen. Daarmee houden we de volgende doctypes over:

• Eén HTML 4.01 doctype (Strict).
• Eén XHTML 1.0 doctype (Strict).
• Eén XHTML 1.1 doctype.

Wil je dat bezoekers met Internet Explorer (IE) jouw pagina’s nog steeds kunnen bekijken, dan kun je ook XHTML 1.1 vergeten; IE kan niet met (correct geserveerde) XHTML 1.1-pagina’s omgaan. Dit is ook het geval bij XHTML 1.0, maar daar is incorrect serveren nog toegestaan. Dan blijven er nog twee doctypes over:

HTML 4.01:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Rest de vraag: kies ik HTML of XHTML?

HTML of XHTML?

XHTML is nieuwer dan HTML en nieuwer is beter, toch? Dat valt te betwijfelen. Tussen 2003 en 2005 zijn veel websites inderdaad overgestapt op XHTML, maar daar begint men op terug te komen. Belangrijkste kritiekpunt is dat de meest gebruikte browser, IE, zelfs in versie 7 en versie 8 niet goed omgaat met XHTML. Sterker nog, als je IE XHTML voorlegt zoals XHTML bedoeld is, dan zie je een leeg scherm. Een mogelijke oplossing is om – in ieder geval voor IE – XHTML te serveren als HTML. Wanneer de server een IE-browser tegenkomt, dan geeft hij XHTML in een HTML-jasje mee; aan alle andere browsers levert hij échte XHTML. Dat kan echter ook weer problemen met zich meebrengen.

Sommigen vinden dat momenteel het serveren van XHTML geen nut heeft, aangezien 85% van de internetters met IE surft en het daarom in 85% van de gevallen niet werkt, zeker de komende jaren. Zij vinden dat je daarom beter een doctype kunt gebruiken waar alle browsers mee overweg kunnen, namelijk HTML 4.01 Strict. Anderen vinden dat je waar mogelijk XHTML zou moeten gebruiken (dus voor alle andere browsers behalve IE), bijvoorbeeld om vooruitgang op het web te voorspoedigen. Ook biedt XHTML uitbreidingsmogelijkheden; echter, voor veruit de meeste sitebouwers zullen die mogelijkheden van geen nut zijn. De keuze tussen HTML en XHTML komt dus eigenlijk neer op een persoonlijke voorkeur.

Conclusie

Van de talloze doctypes die je kunt vinden op internet, zijn er momenteel bij het bouwen van een nieuwe website meestal maar twee relevant: HTML 4.01 Strict en XHTML 1.0 Strict. Gezien de verwaarloosbare meerwaarde en het ontbreken van correcte XHTML-ondersteuning door IE ligt voor mij persoonlijk voor de hand om te kiezen voor HTML 4.01 Strict. Welke van de twee je ook kiest, het houden aan de specificaties van deze doctypes draagt bij aan de toegankelijkheid en vindbaarheid van je site en aan de overzichtelijkheid en duurzaamheid van de markup. Maar bovenal zorgt een correct doctype voor minder problemen met je layout. En wie wil er nou niet minder sitebouwproblemen?

Inhoud

• Gebruik CSS voor layout en (tekst)opmaak
• Welke elementen zijn afgekeurd?
  • Center
  • Font
  • U
• Wordt vervolgd

Gebruik CSS voor layout en (tekst)opmaak

Een internetpagina bestaat vaak uit plaatjes, geluid of andere multimediale elementen (objecten), tekst, scripts, opmaak en een taal die het allemaal aan elkaar verbindt (markup). Deze taal is meestal HTML of XHTML. Hoewel (X)HTML ook gebruikt kan worden om de opmaak van de pagina te regelen, bestaat er sinds 1996 een taal die nadrukkelijk bedoeld is om de opmaak van internetpagina’s te regelen: Cacading Style Sheets, kortweg CSS. Door nalatigheid van browserfabrikanten heeft het nog jaren geduurd voordat CSS goed gebruikt kon worden, maar daar is anno 2006 geen excuus meer voor: iedereen heeft tegenwoordig een browser die met CSS om kan gaan (tenzij je met speciale soft- of hardware op internet surft). Het W3C, het instituut dat de HTML-specificaties maakt, heeft dan ook besloten om elementen te schrappen (‘deprecated‘) die door CSS geregeld kunnen (en zouden moeten) worden.

Welke elementen zijn afgekeurd?

De afgekeurde elementen zijn applet, basefont, center, dir, font, isindex, menu, s, strike en u. Hiervan bespreek ik de meestgebruikte.

Center

center wordt gebruikt om elementen horizontaal te centreren. HTML is echter niet bedoeld voor layoutdoeleinden, daar is CSS voor. Horizontaal centeren doe je in CSS met margin. Heb je een div in de body, dan centreer je de div binnen body als volgt:

 div {margin: 0 auto} 

Vergeet de div niet een bepaalde breedte mee te geven; iets centreren dat een onbekende breedte heeft, is namelijk niet te centreren. In het voorbeeld van horizontaal centreren met margins centreer ik een div van 400 pixels.

Het kan voorkomen dat je site dan nog steeds niet gecentreerd is. Een mogelijke oorzaak kan zijn, dat je de site bekijkt IE5, maar die gebruikt tegenwoordig niemand meer. Een meer plausibele verklaring is dat je geen valide doctype gebruikt. Wanneer je met CSS werkt, is een correct doctype essentieel. Lees elders op deze site over het nut van een doctype en welk doctype je dan zou moeten kiezen.

Font

font wordt gebruikt om de tekstopmaak te regelen. Zoals je wellicht zelf al gemerkt hebt, komt als je niet oplet na verloop van tijd je document vol te staan met font-elementen. Da’s niet overzichtelijk, niet handig om te onderhouden en bovendien achterhaald. CSS to the rescue.

Wil je alle alinea’s in Arial, dan regel je dat als volgt:

 p {font-family: Arial, sans-serif} 

Ik heb een voorbeeld gemaakt waarin alle alinea’s in Arial worden weergegeven en alle andere elementen in het standaardfont van je browser (meestal Times New Roman).

U

u staat voor underline, het onderstrepen van elementen. Dit is met CSS te regelen via text-decoration: underline, maar ook dat is niet aan te raden. Het onderstrepen van elementen die geen links zijn, schept op internet namelijk veel verwarring onder websitebezoekers. Men denkt dan vaak ten onrechte dat er op te klikken valt. Onderstreep dus nooit tekst die geen link is!

Wordt vervolgd

In deel 2 ga ik verder in op elementen die niet zijn afgekeurd, maar waar wel een beter alternatief voor is. Ook behandel ik elementen die je wel eens tegenkomt, maar nooit tot de specificaties hebben behoord.

Je kunt meer lezen over overbodige metatags in het artikel De zin en onzin van metatags.

Wijziging 28 januari 2008: IE5-specifieke CSS verwijderd, aangezien er niet meer met IE5 wordt gesurft.

Inhoud

• Wat is een doctype?
• Wat voor verschil maakt een doctype?
  • Quirksmode
  • Standardsmode
  • Eerst zien, dan geloven?
• Conclusie
• Meer leesvoer

Wat is een doctype?

Een doctype is over het algemeen de eerste regel in een HTML-pagina (boven het html-element) die aangeeft welke (X)HTML-versie er wordt gebruikt en op welke manier de browser zou moeten omgaan met regels voor layoutweergave. Een voorbeeld van een doctype is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Er zijn veel verouderde boeken en tutorials in de omloop die deze basis van een HTML-pagina niet behandelen. Tot een aantal jaren geleden kon men daar nog mee wegkomen, maar tegenwoordig hangt de weergave van je pagina af van het doctype dat erboven staat. Wanneer je een bron tegenkomt die het niet over doctype heeft, leg deze bron dan terzijde; die is verouderd.

Wat voor verschil maakt een doctype?

Browsers hebben grofweg twee manieren om een pagina weer te geven, namelijk quirksmode en standardsmode. Het hangt van het (ontbreken van een) doctype bovenaan het document af in welke modus een browser de webpagina weergeeft. Daarnaast is ook van invloed of er code boven het doctype staat (ook de XML prolog kan problemen veroorzaken).

Quirksmode

Zoals de naam al aangeeft, heeft quirksmode nogal wat rare afwijkingen (quirks) in de weergave; elke browser gokt dan namelijk een beetje op basis van eigen aannames hoe een pagina eruit moet komen te zien. En de makers van bijv. Firefox deden andere aannames dan de makers van bijv. Internet Explorer (IE). Resultaat: er kunnen grote verschillen ontstaan in weergave. Toch laat men deze modus er nog inzitten, want veel websites missen een doctype, gebruiken een ongeldig doctype, of hebben code boven het doctype staan. De makers van deze sites rekenen daarmee op de ‘quirks’ van browsers voor een correcte weergave. Afstappen van quirksmode zou voor vele bestaande sites betekenen dat de sitelayout plots uit elkaar valt.

Standardsmode

Naast quirksmode heb je standardsmode. In deze modus volgt de browser zoveel mogelijk de webstandaarden zoals de W3C ze heeft vastgesteld. Door deze uniforme regels is de weergave van een webpagina door de diverse browsers veel beter te voorspellen; er zijn veel minder verschillen in weergave. Aan te raden is dus om te zorgen dat pagina’s in standardsmode worden weergegeven.

Eerst zien, dan geloven?

Om een simpel en veelvoorkomend voorbeeld te geven wat voor het verschil het maakt, heb ik drie pagina’s gemaakt waarop een rechthoek te zien is. De pagina’s verschillen alleen in het gebruikte doctype. Wanneer je deze pagina’s in IE6 of IE7 1 met elkaar vergelijkt, zul je grote verschillen zien.

• Op de eerste pagina zonder doctype is de box smal (totale breedte = width);
• Op de tweede pagina met onvolledig (Transitional) doctype is de box ook smal (totale breedte = width)
• Maar op de derde pagina met volledig doctype is de box breder, zoals in de W3C-specificaties wordt bedoeld (totale breedte = width + padding + border + margin)

Op de eerste en tweede pagina wordt er gebruik gemaakt van quirksmode, in de derde van standardsmode. In quirksmode maakt IE gebruik van elementafmetingen die werken volgens het door IE (zelfbedachte) boxmodel; in standardsmode maakt IE net als alle andere browsers gebruik van het standaard boxmodel van het W3C.

Conclusie

Duidelijk is dat een doctype erg veel kan uitmaken. Wil je verschillen in weergave tussen diverse browsers vermijden, dan zou je gebruik moeten maken van standardsmode, waarin de browser zo veel mogelijk uitgaat van door W3C vastgelegde regels. Dat betekent dat je een volledig doctype zou moeten gebruiken.

Maar welk volledig doctype moet je dan kiezen? Dat komt aan bod in deel 2 over doctype.

Meer leesvoer

• The box model
• Internet Explorer and the CSS box model
• Activating the right layout mode using the doctype declaration
• Rendering mode and doctype switching
• Box model mastery

1Waarom zie je geen verschil in IE5.x of lager? Omdat Microsoft het t/m IE5.x niet zo nauw nam op het gebied van webstandaarden.