Waarom zijn er verschillen tussen wat de ene WordPress–ontwikkelaar in rekening brengt vergeleken met de andere? Om deze vraag te kunnen beantwoorden, moet je eerst nadenken over de reden waarom je eigenlijk een website wilt en wat het doel van deze website is.

Sommige ontwikkelaars richten zich uitsluitend op een mooi uitziend eindproduct: het schrijven van code die met elkaar een prima uitziend design vormt.

Andere ontwikkelaars hebben daarnaast ook kaas gegeten van marketing en houden zich daarom bezig met meer dan alleen iets in elkaar te zetten dat er leuk uitziet. Zij treden op als consultant voor klanten die specifieke doelstellingen met hun websites willen bereiken. Deze ontwikkelaars koppelen de laatste marketinginzichten met prachtig ontwerp.

Webdesign is nauw verbonden met jouw zakelijke doelstellingen.
Webdesign is nauw verbonden met jouw zakelijke doelstellingen.

Stel dat je iemand hebt ingehuurd om een website te maken. Deze persoon lijkt echter niet heel geïnteresseerd en vraagt niet naar het doel en het door jou gewenste resultaat van de site. Dat is natuurlijk een slecht teken. Het is belangrijk om bij het volgende stil te staan: zelfs het mooiste webdesign leidt niet per se tot betere conversie van bezoekers naar klanten.

Toch beoordeelt 94% van de mensen jouw geloofwaardigheid op basis van het ontwerp van jouw website.

Het is het daarom zeker waard om je te verdiepen in hoe je jouw ontwerp kan gebruiken om de perfecte gebruikersbeleving te bieden. Je moet het je bezoekers aan de ene kant zo makkelijk mogelijk maken om de informatie te vinden waarnaar ze zoeken, terwijl je ze tegelijkertijd in de richting van conversies stuurt.

Deze best practices voor webdesign richten zich op het snijvlak tussen het maken van een mooi uitziende website en een website die bijdraagt aan de (conversie)doelstellingen van jouw bedrijf.

e

Bekijk je liever de video-versie?

Wat houden de best practices voor webdesign in?

De meeste mensen, inclusief de kapper op de hoek, hebben wel een mening over hoe een goed ontworpen website eruitziet. Hoe interessant de mening van Jan en alleman ook moge zijn, het is wellicht verstandiger om te kijken naar wat experts over goed webdesign te zeggen hebben.

Volgens Orbit Media, kan je de best practices voor webdesign groeperen in deze drie basiscategorieën:

  • Merkstandaarden: Je bent misschien meer gewend om woorden als branding, stijlgidsen, of moodboards te gebruiken om dit concept te omschrijven. Deze normen omvatten alles wat te maken heeft met hoe een website eruitziet. Daarbij wordt gebruik gemaakt van kleuren, typografie en elementen die relevant zijn voor het specifieke bedrijf.
  • Coderingsstandaarden: Websites moeten gebouwd worden volgens de programmeerstandaarden die overeen zijn gekomen door het W3C, een internationale organisatie die de webstandaarden voor het wereldwijde web ontwerpt.
  • Toegankelijkheidsnormen: Toegang tot informatie is een fundamenteel mensenrecht, erkend door het VN-Verdrag inzake de rechten van personen met een handicap. Daarnaast heeft het toegankelijk maken van jouw website positieve effecten — niet alleen op de verkoop, maar ook op de SEO. Het W3C verstrekt een basislijst met normen die moeten worden opgevolgd om een toegankelijke website te ontwerpen. We zullen verderop in dit artikel nader ingaan op gerelateerde best practices voor toegankelijkheid.

Hoe kan jij deze practices voor webdesign toepassen op basis van deze normen?

Merkstandaarden

Websites zonder consequente branding kunnen bij bezoekers voor verwarring zorgen. Het is dus niet raar dat ongeveer 38% van de bezoekers overweegt om een website te verlaten als de inhoud of opmaak onaantrekkelijk is opgesteld.

Maar houd er rekening mee dat branding niet alleen de opmaak is, consequente branding gaat nog veel verder. Hier volgen een aantal fundamentele ontwerpprincipes waarmee je een website kan maken die mensen willen bezoeken:

Balann

Balans is het ontwerpprincipe dat ons voorschrijft hoe we visuele elementen effectief kunnen indelen.  Over het algemeen ziet een gebalanceerd ontwerp er helder en natuurlijk uit met goede symmetrie (hoewel dat niet noodzakelijk een voorwaarde voor balans is). Je kan balans in webdesign toepassen in de paginaopmaak.

Een eenvoudige manier om dit te doen is door de tekst of andere elementen op de pagina te centreren. Over het algemeen worden webpagina’s gebouwd middels een rastersysteem, wat al een zekere vorm van balans met zich meebrengt. Met het CSS float attribuut kan je elementen op de pagina invoegen en balanceren.

Balans kan op 3 manieren worden bereikt:

1. Symmetrisch ontwerp

Een voorbeeld van symmetrisch ontwerp

Zorg voor balans door elementen op een gelijkmatige manier op de webpagina in te delen. Als je bijvoorbeeld een zwaar element aan de linkerkant hebt staan, moet je ook een zwaar element aan de rechterkant toevoegen. Zoals eerder gezegd is centreren de meest eenvoudige manier om symmetrie te bereiken, ook al kan het soms overkomen als eentonig of saai.

Om te voorkomen dat de pagina er eentonig uitziet, kun je balans toevoegen met behulp van andere elementen door bijvoorbeeld een grote afbeelding met een groot tekstblok te balanceren. Een ander type symmetrisch balans heet radial balance, hier zijn objecten symmetrisch rond een centraal punt geplaatst.

2. Asymmetrisch ontwerp

Een voorbeeld van asymmetrisch ontwerp

Een asymmetrisch ontwerp verdeelt de elementen op een pagina op ongelijke wijze. Wel een waarschuwing: het is lastiger om deze stijl goed toe te passen.
Je kan bijvoorbeeld een groot element in het midden hebben staan, die gebalanceerd wordt door een kleiner element verder weg.

Je mag ook andere elementen gebruiken om een asymmetrisch ontwerp te balanceren, zoals kleur of textuur.

3. Off-balance

Een voorbeeld van een ontwerp uit balans
Een voorbeeld van een ontwerp uit balans

Dit soort ontwerpen suggereert beweging en actie en kan een ongemakkelijk effect op mensen hebben. Als je met jouw website mensen aan het denken wilt zetten, dan is een off-balance ontwerp iets voor jou.

Compositie

De term compositie verwijst naar de opstelling en inrichting van de elementen in het ontwerp.

Samenstelling
Samenstelling

De regel van derden wordt meestal gebruikt om een gebalanceerde compositie te maken, vooral bij foto’s.

Tussenruimte

Elementen moeten gelijkmatig over de pagina worden verdeeld, zodat gebruikers onderscheid kunnen maken tussen secties of gedeelten.

De rol van tussenruimte in webdesign
De rol van tussenruimte in webdesign

Bij voorkeur voeg je ook negatieve ruimte toe, oftewel de ruimte tussen en rond de beschrijving van een afbeelding. Negatieve ruimte kan beeldruis verminderen, de leesbaarheid vergroten en meer balans brengen.

Je kan negatieve ruimte toepassen door marges en buffers rond de elementen in jouw ontwerp te plaatsen.

Brandpunt

Trek de aandacht naar één element
Trek de aandacht naar één element

Maak een duidelijk focuspunt waar je de aandacht naartoe wil trekken, het focal point. Dit moet het belangrijkste deel van jouw pagina zijn. Bij voorkeur concentreert elke pagina zich op maximaal één groot brandpunt.

Kleur

Als het op branding aankomt is kleur een belangrijk element in het ontwerp. Begin aan het webdesignproces met een idee van de kleuren die je aan jouw merk wilt koppelen.

Juist bij webdesign helpt het om te beginnen met een moodboard voor jouw merk.

Een voorbeeld van Kinsta's kleurenpalet
Een voorbeeld van Kinsta’s kleurenpalet

Kies een primaire en een secundaire kleur (de secundaire kleur kan de primaire kleur complementeren of het kan juist een contrast vormen). Beperk je kleurgebruik en voorkom dat bepaalde accenten als storend worden ervaren.

Adobe Color heeft een uitstekende gratis tool voor het testen van verschillende kleurencombinaties, om een goed samengesteld palette voor website-elementen te kunnen maken.

Bij het kiezen van een kleur is het ook belangrijk om rekening te houden met mensen die kleurenblind zijn. Dit betreft ongeveer 4,5% van de wereldbevolking.

Example of how a regular design would look to color blind users
Example of how a regular design would look to color blind users

Er zijn drie soorten kleurenblindheid: totale kleurenblindheid, twee kleurenzicht en gebrekkig kleurenzicht. Zorg er dus voor dat jouw ontwerp nog steeds bruikbaar is voor degenen die mogelijk geen onderscheid kunnen maken tussen de gekozen kleuren.

Contrast

Bij het kiezen van kleuren is het belangrijk om bewust te zijn van de kleurverhoudingen en het contrast.

Kleurcontrast verwijst naar het verschil in licht tussen de voorgrond en de achtergrond. Door voldoende contrasterende kleuren te gebruiken kan je de zichtbaarheid van de website aanzienlijk verhogen. Gebruik over het algemeen kleurencombinaties met een hoog contrast — zoals zwarte tekst op een witte achtergrond — om je pagina leesbaar te maken.

Onvoldoende contrast kan problemen opleveren
Onvoldoende contrast kan problemen opleveren

De contrastverhouding is de getalswaarde van het contrastverschil tussen verschillende elementen.

De World Content Accessibility Guidelines (WCAG) 2.0 beveelt een contrastverhouding van 4.5:1 aan voor normale tekst. WebAIM heeft een aantal vooraf a href=”https://webaim.org/articles/contrast/#ratio”>bepaalde combinaties samengesteld die de ideale contrastverhouding vormen, om je te helpen deze best practice toe te passen.

Als je deze verhoudingen wilt gebruiken, zorg er dan voor dat je alle doelgroepen (inclusief mensen met toegankelijkheidsproblemen) in gedachten houdt wanneer je de website ontwerpt. Het is gemakkelijker om dit tijdens het proces toe te passen dan achteraf.

Besteed voldoende aandacht aan alle aspecten waar bezoekers mee te maken mee zullen hebben, inclusief headers, footers en menu’s — die allemaal goed zichtbaar moeten zijn om gebruikt te kunnen worden.

Hier zijn een paar tools die je kan gebruiken om jouw contrastverhoudingen te checken:

Typograpfie

Nog een belangrijke overweging bij branding is de typografie van jouw website.

Er zijn veel verschillende bronnen waar je mogelijke lettertypen voor jouw website kan vinden. Je wilt echter eerst de opties overwegen die consistent worden weergegeven, ongeacht de lettertypen die de eindgebruiker op zijn computer heeft geïnstalleerd.

Google Fonts biedt een breed scala aan gratis en “veilige” lettertypen. Je kan erop rekenen dat deze correct worden weergegeven, omdat de kans enorm groot is dat de gebruiker het lettertype op zijn apparaat heeft geïnstalleerd. Zorg ervoor dat je eventuele lettertypen eerst in jouw moodboard opneemt om te zien of ze overeenkomen met je kleurenesthetiek.

Als je problemen hebt met het vinden van combinaties, kan Google Fonts populaire combinaties aandragen. Je kan ook een site zoals FontPair gebruiken om suggesties te verzamelen.

Probeer het aantal lettertypegewichten te beperken; als de pagina te veel bestanden moet laden kan dit zorgen voor een lagere paginasnelheid. Overweeg mogelijk ook om Google Fonts lokaal te hosten voor extra prestatievoordelen.

Verkeerde typografie en correcte typografie
Verkeerde typografie en correcte typografie

Bij het kiezen van typografische elementen gebaseerd op best practices voor webdesign, gebruik de algemene vuistregel sans-serif lettertypen voor koppens en serif lettertypen voor de inhoud zelf.

Gebruik liever geen decoratieve lettertypen voor de inhoud aangezien die moeilijk leesbaar zijn en zorg ook dat je niet teveel verschillende lettertypen gebruikt. Een goede vuistregel is om één lettertype voor je logo te gebruiken, een andere voor je menu’s en koppen en een laatste voor de inhoud. Probeer lettertypen te combineren die elkaar complementeren, bijvoorbeeld lettertypen uit dezelfde lettertypefamilie.

Elementhiërarchie

Hiërarchie verwijst naar de rangschikking van elementen. Hiermee geef je aan welk element belangrijker is en welke minder. Dit bereik je door elementen zoals contrast, grootte en inrichting zo te manipuleren dat ze de aandacht van de bezoeker trekken.

Voorbeeld van elementhiërarchie
Voorbeeld van elementhiërarchie

De inhoud moet worden onderverdeeld in logische blokken, zodat gebruikers de secties makkelijk van elkaar kunnen onderscheiden.

Je kan dit toepassen door contentheaders te gebruiken. Deze maken het niet alleen makkelijker voor gebruikers om meteen naar de voor hen relevante stukken te springen, maar ze delen ook grote stukken tekst op in leesbare stukken zodat schermlezers snel de context van elk gedeelte kunnen bepalen.

Als je op zoek bent naar enkele praktische illustraties van deze ontwerpconcepten, dan vind je op de blog van Tilda Publishing de meest voorkomende fouten bij webdesign en tips voor hoe je ze kan oplossen.

Best practices voor webdesign en formatting

Volgens een onderzoek door Orbit Media, zijn er in de top 50 marketingwebsites een aantal algemene webdesignstandaarden te vinden.

Webdesignstandaarden
Webdesignstandaarden

Met ‘standaarden’ bedoelen ze dat 80% van de websites een vergelijkbare benadering voor webdesign gebruikt:

  • Het logo staat in de linkerbovenhoek.
  • De horizontale hoofdnavigatie bevindt zich bovenaan elke pagina.
  • De waardepropositie bovenaan de homepagina bevindt zich above the fold, oftewel het deel van de pagina die direct na het laden zichtbaar is. De meeste webdesigners zullen je vertellen dat er geen standaard pixelhoogte voor browsers is en dus strikt genomen ook geen ‘fold’. Toch is het beter om de belangrijkste elementen in het ontwerp bovenaan de veelbezochte pagina’s van je site weer te geven.

Hier volgen een aantal best practices voor algemene website-elementen:

Afbeeldingen

We zouden een heel artikel kunnen schrijven over de best practices voor het gebruik van afbeeldingen, maar laten we ons hier tot het absolute minimum beperken:

  • Het toevoegen van ALT-tekstAfbeeldingen kunnen niet worden verwerkt door schermlezers tenzij ALT-tekst is toegevoegd. Het toevoegen van ALT-tekst draagt ook bij aan de SEO, sommige ontwerpers gebruiken ALT-tekst zelfs alleen om hun zoekwoordstrategie aan te vullen. Een betere manier om ALT-tekst te gebruiken is door de afbeelding te beschrijven — met de juiste aanpak kan je zoekmachines en schermlezers tevredenstellen.
  • Het gebruik van afbeeldingen met menselijke gezichten is vaak effectiever dan andere afbeeldingen of animaties. Mensen neigen meer aandacht aan deze afbeeldingen te geven, omdat we ons aangetrokken voelen tot wat wij waarnemen als echte empathie en emoties.
  • Gebruik responsieve afbeeldingen die groeien of krimpen afhankelijk van de browsergrootte. Dit helpt met zowel de websitesnelheid als de SEO.
  • Vergeet ook je favicons niet. Favicons zijn de kleine pictogrammen die je ziet naast de titel van je website en in de zoekresultaten. Ze helpen met merkherkenning en verbeteren de UX van je site.

Websitenavigatie

Gebruikers verwachten dat ze de inhoud die ze zoeken makkelijk kunnen vinden. Het is dus belangrijk dat de websitenavigatie intuïtief en duidelijk is.

Websitenavigatie is een algemene term die verwijst naar de interne linkstructuur van een website. Vergeet nooit dat het belangrijkste doel van navigatie is om gebruikers te helpen om gemakkelijk de voor hun relevante inhoud op jouw website te vinden.

De interne linkstructuur van jouw website vormt de basis van jouw sitemap, Je sitemap maakt het zoekmachines makkelijker om toegang te krijgen tot de inhoud. Het is gebleken dat een goed ontworpen website met makkelijk te vinden inhoud een positieve werking heeft op het websiteverkeer dat je van zoekmachines krijgt (en hiermee heb je ook meer kans dat je Google- sitelinks krijgt).

Menu-navigatie

Er zijn verschillende aspecten die deel uitmaken van de websitenavigatie. Het hoofdmenu moet echter je voornaamste focus zijn, omdat dit een van de eerste aspecten is waar gebruikers mee in aanraking komen op jouw website.

Er zijn verschillende opties wat betreft menu-ontwerp, maar de meest populaire zijn:

Navigatiemenu

Dit menu bevindt zich idealiter vooraan en in het midden van de website en kan een drop-downmenu bevatten als er verschillende categorieën zijn. We bevelen drop-downmenu’s echter niet aan, vooral vanwege problemen met technische SEO (ze zijn moeilijker te doorzoeken). Bovendien blijkt uit onderzoek dat de meeste mensen geen fan zijn van drop-downmenu’s.

Dit komt doordat onze ogen sneller werken dan onze handen. We vinden het frustrerend wanneer er meerdere opties tevoorschijn komen nadat we al beslist hadden ergens op te klikken. Drop-downmenu’s kunnen dus leiden tot een afname in het aantal bezoeken op de pagina.

Hamburgermenu

Dit menu wordt hoofdzakelijk gebruikt voor een mobielvriendelijk en -geoptimaliseerd ontwerp. Het ziet eruit als een vierkant met drie lijnen dat kan worden uitgebreid door erop te klikken. Veel ontwerpers hebben een hekel aan het hamburgermenu, Deze aversie voor hamburgermenu’s heeft echter ook een positieve kant: ze gingen nadenken over hoe ze op andere manieren navigatie op mobiele websites aantrekkelijk en functioneel konden maken.

Hier zijn een aantal tips voor het ontwerpen van navigatie op basis van webdesign best practices:

  • Voeg een zoekbalk toe om gebruikers te helpen makkelijk relevante inhoud te vinden (lees hier hoe je de WordPress zoekfunctie kan verbeteren). Dit is vooral handig voor websites met veel inhoud, zoals een nieuwsblog.
  • Ontwerp je website volgens de three-click regel, die stelt dat gebruikers de gewenste informatie kunnen vinden met maximaal drie muisklikken. Gebruikers navigeren liever door een website dan dat ze door zoekresultaten kijken.
  • Gebruik beschrijvende menutitels menutitels (denk aan de trefwoorden); dit helpt gebruikers om items makkelijk te vinden en levert een positieve bijdrage aan de SEO.
  • De positie van menu-items is belangrijk. Plaats de belangrijkste pagina’s bovenin je menu, zodat ze toegankelijk zijn.
  • Beperk het aantal menu-items tot maximaal 7 niet alleen om het ontwerp helder te houden, maar ook omdat teveel menu-itemcategorieën mogelijk je zoekmachinerankings kan beïnvloeden. Google zou deze schijnbaar niet-gerelateerde categorieën kunnen interpreteren als een teken dat jouw website nog geen specifieke niche heeft gekozen.

Hier is een handige infographic over websitemenu’s:

Best practices voor menunavigatie
Best practices voor menunavigatie

Coderingsnormen

Nu er wereldwijd zoveel websites worden gemaakt en gebruikt, is er zonder twijfel behoefte aan een officiële reeks coderingsnormen. Aspecten van deze normen zijn onder meer:

SEO

SEO kan worden gebruikt om het aantal bezoekers van jouw website organisch (zonder gebruik van advertenties) te verhogen. Het is te ingewikkeld om in een subsectie van dit artikel de wereld van SEO in te duiken, bekijk daarom onze SEO-checklist en onze tips voor de beste SEO-plugins voor WordPress om kennis te maken met dit aspect van best practices voor webdesign.

Houd er rekening mee dat de rest van de coderingsnormen in dit artikel hand in hand gaan met SEO.

Responsief design

Responsive design richt zich op het leveren van een fantastische gebruikerservaring, ongeacht welk apparaat of browser gebruikt wordt om de website te bezoeken.

Het is tegenwoordig belangrijker dan ooit om je website responsief te ontwerpen, aangezien meer dan 60% van de internetgebruikers het internet bezoekt via mobiele telefoons, en de helft van e-commercetransacties via mobiele platforms plaatsvindt. Daarbij geeft Google’s nieuwe zoekalgoritme de prioriteit aan mobielvriendelijke websites..

Een voorbeeld van responsive design
Een voorbeeld van responsive design

Een responsieve website helpt gebruikers niet alleen gemakkelijker door je de pagina’s te navigeren, het draagt ook bij aan een verhoogde betrokkenheid en meer conversies. Gebruikers bevelen merken aan waarmee ze een positieve mobielresponsieve ervaring hebben gehad. Aan de andere kant zouden ze niet alleen stoppen met kopen bij merken die een slechte mobiele website hebben, maar ook anderen ontmoedigen daar te kopen.

Ondanks de vraag naar responsieve websites, heeft 91% van de kleine bedrijven dit niet. Ze zouden er eigenlijk wel een moeten hebben, het loont zonder twijfel om een mobiel responsieve website te (laten) ontwerpen. 62% van de bedrijven heeft een omzetstijging gemeld na het ontwerpen van een mobiel responsieve website.

Lees meer over Kinsta’s artikel over hoe je jouw website mobielvriendelijker kan maken. Hier vind je ook een lijst van de beste WordPress mobiele plugins die je kan downloaden. Bekijk ook deze samengestelde lijst met de beste WordPress-thema’s, waar je door een heleboel responsieve thema’s kan bladeren.

Google heeft ook een aantal tips voor het ontwerpen van een responsieve website..

Websitebeveiliging

Nog een belangrijke best practice voor codering? Dat is het maken van veilige programma’s en websites waaraan een gebruiker zijn persoonlijke en/of gevoelige gegevens met een gerust hart kan toevertrouwen. In tegenstelling tot wat er vaak wordt gedacht, zoeken hackers niet naar specifieke websites om te hacken; zelfs kleine websites zijn kwetsbaar voor aanvallen.

WordPress is over het algemeen veilig, maar het is nooit een slecht idee om extra voorzorgsmaatregelen te nemen om je website te beveiligen tegen hacks.

Dit zijn een aantal van de beste beveiligingsprocedures voor websites:

  • Gebruik een SSL-certificaat, Dit is vooral belangrijk voor sites die te maken hebben met betalingen en persoonlijke gegevens. Het SSL-certificaat codeert informatie die over netwerken is verzonden zodat hackers het moeilijk kunnen decoderen. Daarnaast is het een industriestandaard, Chrome waarschuwt gebruikers wanneer de website die ze bezoeken geen SSL-certificaat heeft. Chrome is nu ook begonnen met het afkeuren van oudere TLS-versies en het geven van extra waarschuwingen.
    Het inschakelen van HTTPS (onderdeel van het installeren van een SSL-certificaat) is ook een officiële rangschikking factor voor Google.
  • Houd je inloggegevens veilig. Hackers kunnen met een bruteforce-aanval toegang proberen te krijgen tot een website. Het helpt om een aparte of verborgen inlogpagina (aan te maken (gebruik hiervoor de WP Hide Login plugin) en om het aantal toegestane foute inlogpogingen te beperken. Gebruik de Login LockDown plugin, die het IP-adres en de tijdstempel van elke mislukte inlogpoging registreert en de inlogfunctie vergrendelt als het aantal mislukte pogingen uit hetzelfde IP-bereik binnen korte tijd wordt bereikt. Maak ook een veilig wachtwoord aan dat langer is dan 6 tekens en een mix is van hoofdletters, kleine letters, cijfers en speciale tekens. Wijzig je wachtwoord vaak. Je kan ook nog twee-factor authenticatie gebruiken om in te loggen als je extra beveiliging wilt.
  • Houd de WordPress-core, plugins en thema’s up-to-date. Vergeet niet om plugins of thema’s altijd van een betrouwbare bron te downloaden. Het is een goed teken als de plugins of thema’s meerdere installaties hebben en recent zijn bijgewerkt. Lees de reviews om zelf te beslissen of de plugin betrouwbaar is; bekijk bijvoorbeeld de plugins op deze lijst). Download een WordPress beveiligingsplugin zoals Wordfence, Sucuri, of Defender, 73.2% van de meest populaire WordPress installaties die kwetsbaar zijn kunnen gevonden worden met hulp van gratis geautomatiseerde tools. Hier is een meer gedetailleerde lijst van de beste beveiligingsplugins.
  • Gebruik een veilige webhost. Voor degenen die niet op de hoogte zijn: het lijkt er misschien op dat je webhost niets te maken heeft met websitebeveiliging, maar 41% van hacks vindt plaats door een beveiligingslek op het hostingplatform. Zoek een hostingprovider met functies zoals: een firewall en encryptie aan serverzijde, NGINX of Apachewebservers, antivirus- en antimalware software, on-site beveiligingssystemen en de beschikbaarheid van SSL-certificaten en een CDN (Content Delivery Network).

Voor meer informatie over WordPress-beveiliging, bekijk ons uitgebreid verslag over hoe je je WordPress-website veilig houdt.

Paginasnelheid

Ongeveer de helft van de internetgebruikers verwacht dat een website binnen 2 seconden of minder, wordt geladen. Als het langer duurt, zal 40% van de mensen de pagina zonder aarzelen wegklikken en (waarschijnlijk) niet terugkeren.

Paginasnelheid is naast websitebezoeken belangrijk omdat het invloed kan hebben op de conversie en de inkomsten. Voor elke seconde extra laadsnelheid daalt de verkoop tot 27%. Het verhogen van de snelheid kan het verlies van 7% van de mogelijke conversies voorkommen.

Hier volgen een paar manieren om jouw webpagina’s sneller te laten laden:

Bekijk ons uitgebreide artikel over de optimalisatie van websitesnelheid..

Toegankelijkheidsnormen

Het internet is ontworpen om goed te werken voor iedereen, ongeacht de specifieke hardware, software, taal, mogelijkheden of locatie. Helaas verkiezen veel ontwerpers een mooi ontwerp boven toegankelijkheid.

Toegankelijkheid is onmisbaar voor elke website
Toegankelijkheid is onmisbaar voor elke website

Toegankelijkheid verwijst naar het bruikbaar maken van jouw website, voor iedereen.

De W3 zegt dat de toegankelijkheid van websites niet alleen mensen met een handicap helpt, maar ook voor:

  • Mensen die apparaten gebruiken met kleine schermen, verschillende invoermethoden, enzovoort.
  • Oudere mensen.
  • Mensen met ’tijdelijke handicaps’, bijvoorbeeld een gebroken arm, een verloren bril of een medische aandoening.
  • Internetgebruikers met ‘situationele beperkingen’. Het kan bijvoorbeeld lastig zijn het scherm te zien in fel zonlicht of naar audio te luisteren in het openbaar vervoer.
  • Personen met een trage internetverbinding.

Toegankelijkheid zou voor iedereen een prioriteit moeten zijn, aangezien we er allemaal op een of andere manier mee te maken hebben.

Redenen om je website toegankelijk te maken

Ben je nog steeds niet zeker of het de moeite waard is je met toegankelijkheid bezig te houden?

Denk eens na over de volgende redenen:

  • Het is een ADA-voorschrift. De Americans with Disabilities Act (ADA) werd aangenomen in 1990 om de burgerrechten van mensen met een handicap te beschermen tegen discriminatie. Het omvat zaken zoals transport, telecommunicatie, werkgelegenheid en zelfs bouwcodes. Omdat deze wet 30 jaar geleden is aangenomen — in een tijd waarin internet nog niet zo alomtegenwoordig was — proberen wetgevers de wet te wijzigen.
  • Het bevordert inclusiviteit. Uit een onderzoek van het Pew Research Center blijkt dat er drie keer minder kans is dat mensen met een handicap het internet gebruiken vergeleken met mensen zonder handicap. Dit is jammer omdat statistieken aantonen dat ongeveer 30% van de professionals een handicap heeft, en 62% van de mensen met een handicap onopgemerkt proberen te blijven uit angst voor negatieve vooroordelen.
  • Het zal je helpen meer klanten te krijgen. Door mensen met een handicap niet uit te sluiten, stel je je open voor een netwerk dat $7 biljoen aan besteedbaar inkomen vertegenwoordigt
  • SEO-voordelen. Zoekmachines belonen websites die voldoen aan de toegankelijkheidsnormen en moedigen daarmee meer websites aan om de toegankelijkheid te verbeteren.

Hoe maak je jouw website toegankelijker?

Een eenvoudige manier om jouw website toegankelijk te maken, is door de WP Accessibility plugin te installeren die onder andere de volgende toegankelijkheidsfuncties toevoegt:

  • Een werkbalk waar gebruikers het formaat van lettertypen kunnen wijzigen en je site in hoog contrast of grijswaarden kunnen bekijken.
  • Het vergelijken van kleurcontrast om te controleren of het voldoet aan de ADA-standaard.
  • Het weghalen van titels van afbeeldingen in de inhoud. De meeste schermlezers hebben dit niet door en lezen vervolgens de anchor-tekst.
  • Het inschakelen van skiplinks. Dit zijn interne paginalinks die gebruikers meteen naar de relevante inhoud kunnen doorverwijzen, wat handig is voor mensen die schermlezers gebruiken.

Een paar extra stappen die je kan nemen:

  • Voeg ondertiteling of een transcriptie toe als jouw website media produceert zoals audio, audioboeken, video’s, podcasts, enzovoort. Dit helpt mensen die doof en/of stom zijn, maar ook mensen die jouw inhoud graag willen beluisteren, maar dit niet in het openbaar kunnen doen.
  • Maak het mogelijk om links en menu’s via het toetsenbord te gebruiken voor mensen die alleen een toetsenbord (zonder muis) kunnen gebruiken vanwege een motorische handicap. Drop-downmenu’s worden afgeraden, maar je kan dit verhelpen door snelkoppelingen toe te wijzen voor elke optie in het drop-downmenu (bijvoorbeeld: druk op ‘1’ voor de startpagina, ‘2’, voor de informatiepagina, enzovoort).
  • Test de toegankelijkheid van jouw website. Het Web Accessibility Initiative schrijft geen specifieke tool voor, maar biedt in plaats daarvan een lijst met tools aan die je kan gebruiken om je verbeteringen te controleren.

Webdesign: best practices voor jouw volgende websiteproject

Je kunt websites niet beoordelen op basis van een objectief goed uitziend ontwerp. Het is net zo belangrijk dat de site bruikbaar is, dat de navigatie goed werkt en dat het toegankelijk is voor iedereen. Gewapend met deze best practices voor webdesign, heb je alles wat je nodig hebt om iets in elkaar te zetten dat er goed uitziet én goed werkt.

Houd in gedachten dat dit best practices zijn voor webdesign. Je kunt ze waarschijnlijk niet allemaal precies opvolgen, afhankelijk van het karakter van jouw website. Maar voordat je de regels overtreedt, helpt het ten minste om te weten waarom ze bestaan.

Hebben we iets belangrijks gemist? Deel jouw best practices voor webdesign hieronder!

Leessuggestie: Beste online cursussen webdesign

 

Maddy Osman

Maddy Osman maakt boeiende content met SEO best practices voor marketing thought leaders en bureaus die hun handen vol hebben aan klanten en projecten. Lees meer over haar proces en ervaring op haar website, The Blogsmith en lees haar laatste artikelen op X: @MaddyOsman.