Wat is Modern Webdesign?

Met de term Modern Webdesign bedoel ik het totaalbeeld van een website, dus zowel hoe het eruit ziet, als hoe de website werkt en ook de gebruikte techniek. In dit artikel zal ik uitleggen wat ik onder Modern Webdesign versta en waar een goede en moderne website aan moet voldoen.
Dit is een overzichtsartikel. Omdat het zo’n breed onderwerp is, kan ik er niet gedetailleerd op ingaan. Dan wordt het een boekwerk in plaats van een artikel ;-) Maar in toekomstige artikelen zal ik dieper ingaan op de deelonderwerpen. Veel leesplezier en reacties zijn uiteraard welkom.

Een moderne website:

• is gebruiksvriendelijk
• is toegankelijk
• is geoptimaliseerd voor zoekmachines
• voldoet aan de webstandaarden
• is mooi

Een gebruiksvriendelijke website

Gebruiksvriendlijkheid (usability) is erg belangrijk voor een website. Een gebruiksvriendelijke website is (simpel gezegd) een website die prettig (vriendelijk) is in het gebruik. Oftewel, een websitebezoeker moet een bepaalde taak op een voor hem prettige manier kunnen volbrengen. Die taak kan van alles zijn, het kopen van een product via internet, het boeken van een reis of bijvoorbeeld het vinden van achtergrondinformatie over een bepaald onderwerp.

Een voor de bezoeker prettige manier betekent dat de bezoeker zijn doel bereikt binnen een bepaalde tijd en dat hij niet geïrriteerd of gefrustreerd raakt. De beste manier om de term gebruiksvriendelijkheid te omschrijven vind ik zelf de titel van het bekende boek van Steve Krug: Don’t make me think!

Usability-expert Rob Goris (Rob Goris @LinkedIn) heeft veel ervaring met user centered design en geeft hierbij 10 richtlijnen voor gebruiksvriendelijk ontwerpen.

(bron: Webdesign van concept tot realisatie (2e editie) van Hedwyg van Groenendaal)

1. Ken de doelgroep
   Verdiep u in de toekomstige gebruiker. Als u een site ontwerpt voor hardrockers, ga dan een avondje stappen in een rockerscafé en koop en lees een heavy metal-tijdschrift.
2. Luister vooral naar de gebruiker en overtuig de klant
   Klanten weten vaak niet goed wie de gebruikers zijn en wat ze willen. Helaas denken ze vaak van wel en houden hardnekkig vast aan hun eigen ideeën. Echter, er moet ontworpen worden voor de eindgebruiker en niet voor de klant. Natuurlijk wilt u wel een tevreden klant dus ga er maar van uit dat u een deel van uw energie moet steken in het overtuigen van de klant van hetgeen de gebruiker nu echt wil.
3. Beter goed gejat dan slecht verzonnen
   Van de meer dan één miljard unieke websites is het grootste deel niet gebruiksvriendelijk en ook niet mooi. Maar er zijn enorm veel voorbeelden te vinden van prachtige goed doordachte en gebruiksvriendelijke sites waar u veel van kunt leren.
4. Een usability-test kan ook een sessie met uw moeder of vijfjarig nichtje zijn
   Usabiliy-testen zijn vaak kostbaar en moeilijk uit te voeren maar ook met minder middelen komt u een heel eind. Vraag collega’s of uw oma eens om naar het ontwerp te kijken en stel een aantal niet suggestieve vragen over de interactie. Als bijvoorbeeld drie van de vier mensen die u vraagt: ‘Wat denkt u dat er gebeurt als u op dit knopje drukt’ het niet weten, ga er dan maar van uit dat het ontwerp nog niet gebruiksvriendelijk is!
5. Ken de basisregels uit de usability-literatuur
   Ken uw vak en lees de literatuur. Het is bijna allemaal waarheid en met een stevige basiskennis bent u zekerder van beslissingen.
6. Laat de techniek ondergeschikt zijn aan de gebruikservaring
   Techniek is nooit sturend maar ondersteunend. Als een bepaalde oplossing niet lijkt te kunnen, kan het vaak toch maar dan moet u wel in de materie willen duiken.
7. Bereid uw argumentatie voor ontwerpbeslissingen goed voor
   Ontwerpen is een deels analytische en deels creatieve bezigheid. Beslissingen die u neemt, moet u goed kunnen onderbouwen. Eerdergenoemde literatuur helpt maar ook met het gezonde verstand kunt u beslissingen vaak beredeneren.
8. Vormgeving is ook usability
   Interactieontwerp en vormgeving kunnen niet los van elkaar worden gezien. Probeer al in een vroeg stadium een idee te krijgen van hoe webpagina´s eruit gaan zien en experimenteer met de vormgeving. Het is een illusie om te denken dat met een sitemap de site ontworpen is. De navigatie, vlakverdeling en kleuren bepalen het grootste deel van de gebruiksvriendelijkheid.
9. Itereer
   Pas een gedegen ontwerpproces toe en plan veel momenten in waarop anderen naar het ontwerp kunnen kijken en beoordelen, het liefst ook gebruikers. Met de opmerkingen kunt u dan weer aan de slag. Dit komt de kwaliteit ten goede en bovendien creëert u zo ook steun bij bijvoorbeeld een opdrachtgever als deze inspraak heeft of denkt te hebben.
10. Gebruik pen, papier en kleurpotloden
    Ondanks moderne software waarmee efficiënt een site kan worden gebouwd, is ontwerpen een heel abstract proces waarbij u zich niet moet laten afleiden door (on)mogelijkheden van de software. Pen, papier en kleurpotloden zijn nog steeds de meest directe gereedschappen om ideeën vast te leggen. Op papier kunt u bijna 90% van het functioneel ontwerp vastleggen en beoordelen.

Een toegankelijke website

Een ander woord voor toegankelijkheid is accessibility. Mensen met een functiebeperking moeten ook gebruik kunnen maken van websites. Zo bedienen mensen met een motorische beperking een website bijvoorbeeld met het toetsenbord in plaats van met de muis. En blinden maken bijvoorbeeld gebruik van een spraakbrowser of braille leesregels. Senioren willen bijvoorbeeld graag de tekst en afbeeldingen vergroten. Door een website toegankelijk te maken kunnen mensen met een functiebeperking en senioren websites beter gebruiken.

De Stichting Waarmerk drempelvrij.nl heeft als doelstelling de toegankelijkheid van Nederlandse websites te bevorderen voor iedereen, inclusief mensen met een functiebeperking en senioren. Hiervoor is een transparante regeling met logo’s en heldere normen opgezet die door de Stichting beheerd wordt.

Enkele tips met betrekking tot toegankelijk bouwen van Norbert Breugelmans van Triptic:
(bron: Webdesign van concept tot realisatie (3e editie) van Hedwyg van Groenendaal)

• Denk in een zo vroeg mogelijk stadium na over de mate van toegankelijkheid die je wilt bereiken. Je kunt dan afwegingen maken over de technieken of toepassingen die je wel of niet gaat gebruiken. Denk aan video, Flash en jQuery. Deze keuzes kunnen je later veel tijd en inspanning besparen.
• Kijk bij de keuze van een eventueel Content Management Systeem of hiermee een toegankelijke site is te bouwen en te beheren.
• Zorg dat iedereen die iets met de site te maken heeft bewust (en bekend is met) de webstandaarden en toegankelijk bouwen. Dus ook de stagiaire die een half jaar na oplevering van het project een banner plaatst.
• Tijdens de jaarlijkse toetsing is het verstandig om geen onderhoud aan de site uit te voeren. Zorg dat de toetsing niet samenvalt met grote acties of evenementen.
• Check zelf, of laat vóór de jaarlijkse toetsing, de site checken. Dit kan je een herkeuring besparen.
• Tijdens een check worden alle bestanden die onder een domeinnaam vallen gecheckt. Nieuwsbrieven die je hier bijvoorbeeld ook plaatst, worden dus meegenomen en moeten aan de richtlijnen voldoen.

Een website die geoptimaliseerd is voor zoekmachines

De meeste internetbezoekers gebruiken zoekmachines om informatie te vinden op internet. Het is daarom uitermate belangrijk voor een website dat deze goed is geoptimaliseerd voor zoekmachines. Soms lijkt het of er allerlei trucs aan te pas moeten komen om hoog in de zoekmachines te scoren, maar dat is allang verleden tijd.

Zoekmachineoptimalisatie (ook wel SEO, Search Engine Optimalization, genoemd) gaat om het opzetten van een dusdanige site dat de zoekrobot, ook wel spider genoemd, de site goed kan indexeren. Als iemand informatie gaat zoeken via een zoekmachine typt hij een of meerdere zoekwoorden in. En op die zoekwoorden is alles gebaseerd. De zoekmachine moet dan met websites op de proppen komen die het beste bij die zoekwoorden passen zodat de bezoeker direct de sites vindt die hij nodig heeft. Een zoekmachine heeft er niets aan om websites die niets met een van de zoekwoorden te maken hebben een hoge positie te geven. De geloofwaardigheid van een zoekmachine gaat dan verloren.

Het is zaak om uw website op een integere manier te (laten) optimaliseren. Dus als uw website gaat over fotograferen, dan komen woorden als fotograferen, fotografie, foto’s, camera en sluitertijd automatisch op uw website voor. Ook in de titel van de website zal het woord fotograferen waarschijnlijk voorkomen. Als u dus duidelijk een website hebt over fotografie en mensen typen in een zoekmachine woorden in als fotograferen of fotografie, kunt u gevonden worden.

De kans dat uw site ook daadwerkelijk wordt gevonden is dan wel weer van een hoop factoren afhankelijk. Hoe specifieker het onderwerp en hoe specifieker de zoekwoorden, hoe groter de kans dat u goed scoort in de zoekmachines. U kunt de zoekmachines echter wel een handje helpen. Als u uw website op een goede en integere manier optimaliseert hebt u de grootste kans hoog in de zoekmachines te scoren. Trucjes werken tegenwoordig niet meer en kunnen er juist voor zorgen dat u lager scoort of juist helemaal uit de index verdwijnt.

Het is belangrijk dat u een site hebt voor de bezoekers en niet voor de zoekmachines.

U moet een zoekmachine niet iets anders voorschotelen dan de bezoeker (dit wordt cloaking genoemd). Een goede vraag die u zichzelf kunt stellen is “Zou ik dit ook doen als er geen zoekmachines zouden bestaan?”.

Google geeft op haar site veel advies over hoe u uw website dient te optimaliseren. Een site moet minimaal voldaan aan de algemene richtijnen. Google noemt dit de kwaliteitsrichtlijnen. Als u niet minimaal deze richtlijnen toepast op uw site kan het voorkomen dat Google uw site uit de index verwijderd. Uw site verschijnt dan ook niet meer in de zoekresultaten van Google en dat is waarschijnlijk het laatste wat u wilt.

De kwaliteitsrichtlijnen die Google hanteert zijn:

• Maak een website voor gebruikers, niet voor zoekmachines.
• Probeer niet via allerlei trucjes uw positie in de zoekresultaten op te schroeven.
• Doe niet mee aan uitwisselingsprogramma’s van koppelingen die bedoeld zijn om uw positie te verbeteren.
• Gebruik geen illegale programma’s voor het automatisch aanmelden van pagina’s.
• Vermijd verborgen teksten en verborgen koppelingen.
• Laat u niet in met cloaking of met stiekeme redirects.
• Bestook Google niet met automatische zoekopdrachten.
• Stop uw pagina’s niet vol met irrelevante woorden.
• Maak geen extra pagina’s, subdomeinen of domeinen aan om zo de inhoud van uw site te dupliceren.
• Maak geen doorway-pagina’s die alleen maar bedoeld zijn voor zoekmachines.

U kunt deze richtlijnen ook nalezen op www.google.nl/webmasters/guidelines.html.

Een website die voldoet aan de webstandaarden

Tegenwoordig zijn standaarden op het gebied van webdesign erg belangrijk. We hebben het dan over standaarden voor webtalen (zoals HTML, XHTML, CSS, DOM en ECMAScript) en ook over standaarden met betrekking tot bijvoorbeeld accessibility (toegankelijkheid).

Standaarden zijn belangrijk omdat ze een goed uitgangspunt vormen. Over een standaard is door veel mensen nagedacht, door mensen uit de praktijk. Een standaard staat ergens voor en is er niet voor niets. De bedoeling van standaarden is dat u zich eraan houdt. Stelt u zich eens voor dat alle browsers zich precies aan de W3C-standaarden zouden houden. Als u als webontwikkelaar dat vervolgens ook doet, kunnen we er met zijn allen voor zorgen dat we webdocumenten ontwikkelen die eenvoudiger, beter toegankelijk, beter uitwisselbaar en goedkoper zijn.

Het toepassen van standaarden zorgt er bijvoorbeeld voor dat mensen met een visuele handicap een spraakbrowser kunnen gebruiken die webpagina’s voorleest of ze kunnen de tekst vergroten zodat ze makkelijker kunnen lezen. Ook zoekmachines kunnen beter hun werk doen en websites eenvoudiger indexeren. Als uw website voldoet aan de webstandaarden kan een zoekmachines uw site beter indexeren, waardoor u uiteindelijk beter vindbaar bent op internet.

Ook komt er steeds meer nieuwe software en hardware waarop een website getoond moet worden zoals mobiele telefoons en PDA’s. Om voor elk medium een nieuwe site te bouwen is geen doen. Het is beter één site te hebben die altijd werkt. Websites gebaseerd op webstandaarden doen het goed in oudere browsers en zullen ook in toekomstige browsers blijven werken. De webstandaarden zijn namelijk ontworpen voor zowel achterwaartse als voorwaartse compatibiliteit.

Het World Wide Web Consoritum (W3C, www.w3.org) is de belangrijkste organisatie op het gebied van webstandaarden, maar er zijn nog andere organisaties die ook veel doen, zoals Opera en de Nederlandse initiatieven Webrichtlijnen en Fronteers.

Opera heeft een volledig curriculum ontwikkeld, het Web Standards Curriculum. Dit bestaat uit meer dan 50 artikelen die de webontwikkelaar leert hoe hij HTML, CSS en JavaScript op de juiste manier toepast volgens de webstandaarden. Een must voor elke webontwikkelaar.

Een belangrijk overheidsinitiatief zijn de Webrichtlijnen. De Nederlandse overheid heeft de internationale webstandaarden samengebracht in een kwaliteitsmodel Webrichtlijnen. Dit omvat (maar liefst) 125 kwaliteitseisen ten behoeve van betere websites.

Op de site www.webrichtlijnen.nl vindt u een complete handleiding voor het bouwen van toegankelijke en duurzame overheidswebsites en een tool om een gedeelte van de richtlijnen te toetsen. De Webrichtlijnen zijn uiteraard ook toepasbaar voor niet-overheidssites.

Een Nederlands initiatief is de vakvereniging Fronteers. Deze vereniging is in oktober 2007 opgericht. De doelstelling van Fronteers is de professionalisering van het beroep front-end web development. Daarbij streven ze naar erkenning, verbetering en ondersteuning van de (positie van) Nederlandse front-end web ontwikkelaars. De vereniging organiseert regelmatig bijeenkomsten en een keer per jaar een congres. De leden van de vereniging hebben de webstandaarden over het algemeen hoog in het vaandel en proberen dit zo veel mogelijk uit te dragen.

Een mooie website

Over smaak valt wel degelijk te twisten, maar dat ga ik nu niet doen. Een website moet naast genoemde punten ook gewoon mooi zijn. Een goed doordachte stijl is belangrijk. De stijl bepaalt immers de uitstraling van de site. Als een stijl op een goede manier wordt toegepast in een site, roept deze het juiste gevoel op bij de bezoeker. Deze werkt dan uitnodigend om de site verder te bekijken. Een stijl die niet bij de doelgroep past, werkt afstotend.

Een bestaande huisstijl is vaak het uitgangspunt voor een toe te passen stijl op internet, maar het is geen must. Als er goede redenen zijn om van de huisstijl af te wijken, moet u dat zeker doen. Een stijl is een samengaan van kleuren, afbeeldingen, vormen, compositie, lettertypen, enzovoort. Op internet zijn veel verschillende stijlen te vinden. Een zakelijke stijl voor een serieus bedrijf, een speelse stijl als het allemaal wat losser mag, een stijl met primaire kleuren als het heel voordelig moet zijn, een minimalistische stijl zonder toeters en bellen en een drukke stijl voor bijvoorbeeld jongeren.

Waar het om gaat is dat een site altijd in harmonie is met datgene wat met de site moet worden bereikt (doelen) en met de mensen die de site moeten bezoeken (doelgroep).