{"id":30292,"date":"2020-03-11T07:18:50","date_gmt":"2020-03-11T14:18:50","guid":{"rendered":"https:\/\/kinsta.com\/?p=63976"},"modified":"2023-06-07T10:47:20","modified_gmt":"2023-06-07T08:47:20","slug":"webdesign-best-practices","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/","title":{"rendered":"Webdesign: best practices voor jouw volgende websiteproject"},"content":{"rendered":"<p>Waarom zijn er verschillen tussen wat de ene <a href=\"https:\/\/kinsta.com\/nl\/blog\/kosten-wordpress-site\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a><a href=\"https:\/\/kinsta.com\/nl\/blog\/kosten-wordpress-site\/\">&#8211;<\/a><a href=\"https:\/\/kinsta.com\/nl\/blog\/kosten-wordpress-site\/\">ontwikkelaar in rekening brengt vergeleken met de ander<\/a><a href=\"https:\/\/kinsta.com\/nl\/blog\/kosten-wordpress-site\/\">e<\/a>? 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.<\/p>\n<p>Sommige ontwikkelaars richten zich uitsluitend op een mooi uitziend eindproduct: het schrijven van code die met elkaar een prima uitziend design vormt.<\/p>\n<p>Andere ontwikkelaars hebben daarnaast ook kaas gegeten van marketing en houden zich daarom bezig met <em>meer<\/em> 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.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/webdesign-is-verbonden-met-jouw-zakelijke-doelstellingen.jpg\" alt=\"Webdesign is nauw verbonden met jouw zakelijke doelstellingen.\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Webdesign is nauw verbonden met jouw zakelijke doelstellingen.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\" target=\"_blank\" rel=\"noopener noreferrer\">Stel dat je iemand hebt ingehuurd om een website te maken.<\/a> Deze persoon lijkt echter niet heel ge\u00efnteresseerd en vraagt niet naar het doel en het door jou gewenste resultaat van de site. Dat is natuurlijk <strong>een slecht teken<\/strong>. Het is belangrijk om bij het volgende stil te staan: zelfs het mooiste webdesign leidt <em>niet<\/em> per se tot betere conversie van bezoekers naar klanten.<\/p>\n<p>Toch beoordeelt 94% van de mensen <a href=\"https:\/\/www.business.com\/articles\/tyler-horvath-responsive-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">jouw geloofwaardigheid<\/a> op basis van het ontwerp van jouw website.<\/p>\n<p>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 <a href=\"https:\/\/kinsta.com\/nl\/blog\/conversie-tracking\/\" target=\"_blank\" rel=\"noopener noreferrer\">conversies<\/a> stuurt.<\/p>\n<p>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.<\/p>\n<p><div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>e<\/p>\n<h3>Bekijk je liever de <a href=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\">video-versie<\/a>?<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\"><\/kinsta-video>\n<h2>Wat houden de best practices voor webdesign in?<\/h2>\n<p>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.<\/p>\n\n<p>Volgens <a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">Orbit Media<\/a>, kan je de best practices voor webdesign groeperen in deze drie basiscategorie\u00ebn:<\/p>\n<ul>\n<li><strong>Merkstandaarden:<\/strong> 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.<\/li>\n<li><strong>Coderingsstandaarden:<\/strong> Websites moeten gebouwd worden volgens de <a href=\"http:\/\/www.w3.org\/standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">programmeerstandaarden<\/a> die overeen zijn gekomen door het W3C, een internationale organisatie die de webstandaarden voor het wereldwijde web ontwerpt.<\/li>\n<li><strong>Toegankelijkheidsnormen: <\/strong>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 <a href=\"https:\/\/www.searchenginejournal.com\/accessibility-seo-and-sales\/281899\/\" target=\"_blank\" rel=\"noopener noreferrer\">positieve effecten<\/a> \u2014 niet alleen op de verkoop, maar ook op de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-betekent-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO<\/a>. Het W3C verstrekt een basislijst met normen die moeten worden opgevolgd om een <a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility\" target=\"_blank\" rel=\"noopener noreferrer\">toegankelijke website te ontwerpen<\/a>. We zullen verderop in dit artikel nader ingaan op gerelateerde best practices voor toegankelijkheid.<\/li>\n<\/ul>\n<p>Hoe kan jij deze practices voor webdesign toepassen op basis van deze normen?<\/p>\n<h2>Merkstandaarden<\/h2>\n<p>Websites zonder consequente branding kunnen bij bezoekers voor verwarring zorgen. Het is dus niet raar dat ongeveer 38% van de bezoekers overweegt om een <a href=\"https:\/\/blogs.adobe.com\/creative\/files\/2015\/12\/Adobe-State-of-Content-Report.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">website te verlaten<\/a> als de inhoud of opmaak onaantrekkelijk is opgesteld.<\/p>\n<p>Maar houd er rekening mee dat branding niet <em>alleen<\/em> 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:<\/p>\n<h3>Balann<\/h3>\n<p><em>Balans<\/em> is het ontwerpprincipe dat ons voorschrijft hoe we visuele elementen effectief kunnen indelen.\u00a0 Over het algemeen ziet een gebalanceerd ontwerp er helder en natuurlijk uit met goede symmetrie (hoewel dat <a href=\"https:\/\/wpamelia.com\/visual-design-guide\/\" target=\"_blank\" rel=\"noopener noreferrer\">niet noodzakelijk een <em>voorwaarde <\/em>voor balans is<\/a>). Je kan balans in webdesign toepassen in de paginaopmaak.<\/p>\n<p>Een eenvoudige manier om dit te doen is door de tekst of andere elementen op de pagina te centreren. Over het algemeen worden webpagina&#8217;s gebouwd middels een rastersysteem, wat al een zekere vorm van balans met zich meebrengt. Met het CSS <em>float <\/em>attribuut kan je elementen op de pagina invoegen en balanceren.<\/p>\n<p>Balans kan op 3 manieren worden bereikt:<\/p>\n<h4>1. Symmetrisch ontwerp<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/symmetrisch-ontwerp.jpg\" alt=\"Een voorbeeld van symmetrisch ontwerp\" width=\"1321\" height=\"944\"><\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<h4>2. Asymmetrisch ontwerp<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/asymmetrisch-ontwerp.jpg\" alt=\"Een voorbeeld van asymmetrisch ontwerp\" width=\"1321\" height=\"944\"><\/p>\n<p>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.<br \/>\nJe kan bijvoorbeeld een groot element in het midden hebben staan, die gebalanceerd wordt door een kleiner element verder weg.<\/p>\n<p>Je mag ook andere elementen gebruiken om een asymmetrisch ontwerp te balanceren, zoals kleur of textuur.<\/p>\n<h4>3. Off-balance<\/h4>\n<figure id=\"attachment_66279\" aria-describedby=\"caption-attachment-66279\" style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66279 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/ontwerp-uit-balans.jpg\" alt=\"Een voorbeeld van een ontwerp uit balans\" width=\"1321\" height=\"944\"><figcaption id=\"caption-attachment-66279\" class=\"wp-caption-text\">Een voorbeeld van een ontwerp uit balans<\/figcaption><\/figure>\n<p>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.<\/p>\n<h3>Compositie<\/h3>\n<p>De term <em>compositie<\/em> verwijst naar de opstelling en inrichting van de elementen in het ontwerp.<\/p>\n<figure id=\"attachment_66280\" aria-describedby=\"caption-attachment-66280\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66280 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/samenstelling.jpg\" alt=\"Samenstelling\" width=\"1320\" height=\"883\"><figcaption id=\"caption-attachment-66280\" class=\"wp-caption-text\">Samenstelling<\/figcaption><\/figure>\n<p>De <a href=\"https:\/\/www.photographymad.com\/pages\/view\/rule-of-thirds\" target=\"_blank\" rel=\"noopener noreferrer\">regel van derden<\/a> wordt meestal gebruikt om een gebalanceerde compositie te maken, vooral bij foto&#8217;s.<\/p>\n<h3>Tussenruimte<\/h3>\n<p>Elementen moeten gelijkmatig over de pagina worden verdeeld, zodat gebruikers onderscheid kunnen maken tussen secties of gedeelten.<\/p>\n<figure id=\"attachment_66281\" aria-describedby=\"caption-attachment-66281\" style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66281 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/tussenruimte-in-webdesign.jpg\" alt=\"De rol van tussenruimte in webdesign\" width=\"1321\" height=\"684\"><figcaption id=\"caption-attachment-66281\" class=\"wp-caption-text\">De rol van tussenruimte in webdesign<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>Je kan negatieve ruimte toepassen door marges en buffers rond de elementen in jouw ontwerp te plaatsen.<\/p>\n<h3>Brandpunt<\/h3>\n<figure id=\"attachment_66282\" aria-describedby=\"caption-attachment-66282\" style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66282 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/trek-de-aandacht.jpg\" alt=\"Trek de aandacht naar \u00e9\u00e9n element\" width=\"1321\" height=\"732\"><figcaption id=\"caption-attachment-66282\" class=\"wp-caption-text\">Trek de aandacht naar \u00e9\u00e9n element<\/figcaption><\/figure>\n<p>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 <em>\u00e9\u00e9n<\/em> groot brandpunt.<\/p>\n<h3>Kleur<\/h3>\n<p>Als het op branding aankomt is <em>kleur<\/em> een belangrijk element in het ontwerp. Begin aan het webdesignproces met een idee van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/website-kleurenschema\/\">kleuren<\/a> die je aan jouw merk wilt koppelen.<\/p>\n<p>Juist bij webdesign helpt het om te beginnen met een moodboard voor jouw merk.<\/p>\n<figure id=\"attachment_66283\" aria-describedby=\"caption-attachment-66283\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66283 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/kleurenpalet.jpg\" alt=\"Een voorbeeld van Kinsta's kleurenpalet\" width=\"1320\" height=\"443\"><figcaption id=\"caption-attachment-66283\" class=\"wp-caption-text\">Een voorbeeld van Kinsta&#8217;s kleurenpalet<\/figcaption><\/figure>\n<p>Kies een primaire en een secundaire kleur (de secundaire kleur kan de primaire kleur <em>complementeren <\/em>of het kan juist een <em>contrast<\/em> vormen). Beperk je kleurgebruik en voorkom dat bepaalde accenten als storend worden ervaren.<\/p>\n<p><a href=\"https:\/\/color.adobe.com\/create\">Adobe Color<\/a> heeft een uitstekende gratis tool voor het testen van verschillende kleurencombinaties, om een goed samengesteld palette voor website-elementen te kunnen maken.<\/p>\n<p>Bij het kiezen van een kleur is het ook belangrijk om rekening te houden met mensen die kleurenblind zijn. Dit betreft ongeveer <a href=\"http:\/\/www.colourblindawareness.org\/colour-blindness\/\" target=\"_blank\" rel=\"noopener noreferrer\">4,5% van de wereldbevolking<\/a>.<\/p>\n<figure id=\"attachment_66284\" aria-describedby=\"caption-attachment-66284\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-66284\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/02\/webdesign-colorblind-blueblind.jpg\" alt=\"Example of how a regular design would look to color blind users\" width=\"1320\" height=\"441\"><figcaption id=\"caption-attachment-66284\" class=\"wp-caption-text\">Example of how a regular design would look to color blind users<\/figcaption><\/figure>\n<p>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.<\/p>\n<h4>Contrast<\/h4>\n<p>Bij het kiezen van kleuren is het belangrijk om bewust te zijn van de kleurverhoudingen en het <strong>contrast<\/strong>.<\/p>\n<p><em>Kleurcontrast<\/em> 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 \u2014 zoals zwarte tekst op een witte achtergrond \u2014 om je pagina leesbaar te maken.<\/p>\n<figure id=\"attachment_66285\" aria-describedby=\"caption-attachment-66285\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66285 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/onvoldoende-contrast .jpg\" alt=\"Onvoldoende contrast kan problemen opleveren\" width=\"1320\" height=\"1299\"><figcaption id=\"caption-attachment-66285\" class=\"wp-caption-text\">Onvoldoende contrast kan problemen opleveren<\/figcaption><\/figure>\n<p>De contrastverhouding is de <em>getalswaarde <\/em>van het contrastverschil tussen verschillende elementen.<\/p>\n<p>De <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" target=\"_blank\" rel=\"noopener noreferrer\">World Content Accessibility Guidelines (WCAG) 2.0<\/a> beveelt een contrastverhouding van 4.5:1 aan voor normale tekst. WebAIM heeft een aantal vooraf a href=&#8221;https:\/\/webaim.org\/articles\/contrast\/#ratio&#8221;&gt;bepaalde combinaties samengesteld die de ideale contrastverhouding vormen, om je te helpen deze best practice toe te passen.<\/p>\n<p>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.<\/p>\n<p>Besteed voldoende aandacht aan alle aspecten waar bezoekers mee te maken mee zullen hebben, inclusief <a href=\"https:\/\/kinsta.com\/nl\/blog\/code-toevoegen-aan-de-wordpress-header-en-footer\/\" target=\"_blank\" rel=\"noopener noreferrer\">headers, footers<\/a> en <a href=\"https:\/\/kinsta.com\/nl\/blog\/plugins-wordpress-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">menu&#8217;s<\/a> \u2014 die allemaal goed zichtbaar moeten zijn om gebruikt te kunnen worden.<\/p>\n<p>Hier zijn een paar tools die je kan gebruiken om jouw contrastverhoudingen te checken:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.levelaccess.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color contrast checker<\/a> door Level Access.<\/li>\n<li><a href=\"https:\/\/contrast-ratio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contrast Ratio<\/a>.<\/li>\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.0 AA &#038; AAA color contrast checker<\/a> tool, gebaseerd op de richtlijnen van de WCAG 2.0.<\/li>\n<\/ul>\n<h3>Typograpfie<\/h3>\n<p>Nog een belangrijke overweging bij branding is de typografie van jouw website.<\/p>\n<p>Er zijn veel verschillende <a href=\"https:\/\/kinsta.com\/nl\/blog\/moderne-lettertypes\/\">bronnen waar je mogelijke lettertypen<\/a> 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\u00efnstalleerd.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-lettertypen\/#google-fonts\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> biedt een breed scala aan gratis en \u201cveilige\u201d 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\u00efnstalleerd. Zorg ervoor dat je eventuele lettertypen eerst in jouw moodboard opneemt om te zien of ze overeenkomen met je kleurenesthetiek.<\/p>\n<p>Als je problemen hebt met het vinden van combinaties, kan Google Fonts populaire combinaties aandragen. Je kan ook een site zoals <a href=\"https:\/\/fontpair.co\/\" target=\"_blank\" rel=\"noopener noreferrer\">FontPair<\/a> gebruiken om suggesties te verzamelen.<\/p>\n<p>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 <a href=\"https:\/\/kinsta.com\/blog\/local-fonts\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts lokaal te hosten<\/a> voor extra prestatievoordelen.<\/p>\n<figure id=\"attachment_66287\" aria-describedby=\"caption-attachment-66287\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66287 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/webdesign-typografie.jpg\" alt=\"Verkeerde typografie en correcte typografie\" width=\"1320\" height=\"386\"><figcaption id=\"caption-attachment-66287\" class=\"wp-caption-text\">Verkeerde typografie en correcte typografie<\/figcaption><\/figure>\n<p>Bij het kiezen van typografische elementen gebaseerd op best practices voor webdesign, gebruik de algemene vuistregel <a href=\"https:\/\/www.invisionapp.com\/inside-design\/best-practices-pairing-fonts\/\">sans-serif lettertypen voor koppens<\/a> en serif lettertypen voor de inhoud zelf.<\/p>\n<p>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 \u00e9\u00e9n lettertype voor je logo te gebruiken, een andere voor je menu&#8217;s en koppen en een laatste voor de inhoud. Probeer lettertypen te combineren die elkaar complementeren, bijvoorbeeld lettertypen uit dezelfde lettertypefamilie.<\/p>\n<h3>Elementhi\u00ebrarchie<\/h3>\n<p><em>Hi\u00ebrarchie<\/em> 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.<\/p>\n<figure id=\"attachment_66952\" aria-describedby=\"caption-attachment-66952\" style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66952 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/elementhierarchie.jpg\" alt=\"Voorbeeld van elementhi\u00ebrarchie\" width=\"1321\" height=\"1177\"><figcaption id=\"caption-attachment-66952\" class=\"wp-caption-text\">Voorbeeld van elementhi\u00ebrarchie<\/figcaption><\/figure>\n<p>De <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoe-het-bouncepercentage-te-verlagen\/#14-structure-your-content-wisely\">inhoud moet worden onderverdeeld in logische blokken<\/a>, zodat gebruikers de secties makkelijk van elkaar kunnen onderscheiden.<\/p>\n<p>Je kan dit toepassen door <strong>contentheaders<\/strong> 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.<\/p>\n<p>Als je op zoek bent naar enkele praktische illustraties van deze ontwerpconcepten, dan vind je op de blog van Tilda Publishing de <a href=\"http:\/\/blog-en.tilda.cc\/articles-website-design-mistakes\">meest voorkomende fouten bij webdesign<\/a> en tips voor hoe je ze kan oplossen.<\/p>\n<h2>Best practices voor webdesign en formatting<\/h2>\n<p>Volgens een <a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\" target=\"_blank\" rel=\"noopener noreferrer\">onderzoek door Orbit Media<\/a>, zijn er in de top 50 marketingwebsites een aantal algemene webdesignstandaarden te vinden.<\/p>\n<figure id=\"attachment_66288\" aria-describedby=\"caption-attachment-66288\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66288 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/02\/webdesignstandaarden.jpg\" alt=\"Webdesignstandaarden\" width=\"1320\" height=\"1158\"><figcaption id=\"caption-attachment-66288\" class=\"wp-caption-text\">Webdesignstandaarden<\/figcaption><\/figure>\n<p>Met &#8216;standaarden&#8217; bedoelen ze dat 80% van de websites een vergelijkbare benadering voor webdesign gebruikt:<\/p>\n<ul>\n<li>Het logo staat in de linkerbovenhoek.<\/li>\n<li>De horizontale hoofdnavigatie bevindt zich bovenaan elke pagina.<\/li>\n<li>De waardepropositie bovenaan de homepagina bevindt zich <em>above the fold<\/em>, 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 \u2018fold\u2019. Toch is het beter om de belangrijkste elementen in het ontwerp bovenaan de veelbezochte pagina\u2019s van je site weer te geven.<\/li>\n<\/ul>\n<p>Hier volgen een aantal best practices voor algemene website-elementen:<\/p>\n<h3>Afbeeldingen<\/h3>\n<p>We zouden een heel artikel kunnen schrijven over de best practices voor het <a href=\"https:\/\/kinsta.com\/nl\/blog\/afbeeldingen-optimaliseren-voor-internet\/\" target=\"_blank\" rel=\"noopener noreferrer\">gebruik van afbeeldingen<\/a>, maar laten we ons hier tot het absolute minimum beperken:<\/p>\n<ul>\n<li><strong>Het toevoegen van ALT-tekst<\/strong>Afbeeldingen <em>kunnen niet<\/em> worden verwerkt door schermlezers tenzij ALT-tekst is toegevoegd. Het toevoegen van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-seo\/#9-image-alt-text\" target=\"_blank\" rel=\"noopener noreferrer\">ALT-tekst draagt ook bij aan de SEO<\/a>, 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 \u2014 met de juiste aanpak kan je zoekmachines en schermlezers tevredenstellen.<\/li>\n<li><strong>Het gebruik van afbeeldingen met menselijke gezichten<\/strong> 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.<\/li>\n<li><strong>Gebruik responsieve afbeeldingen <\/strong>die groeien of krimpen afhankelijk van de browsergrootte. Dit helpt met zowel de websitesnelheid als de SEO.<\/li>\n<li><strong>Vergeet ook je <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-favicon\/\">favicons<\/a> niet<\/strong>. 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.<\/li>\n<\/ul>\n<h3>Websitenavigatie<\/h3>\n<p>Gebruikers verwachten dat ze de inhoud die ze zoeken makkelijk kunnen vinden. Het is dus belangrijk dat de websitenavigatie intu\u00eftief en duidelijk is.<\/p>\n<p><em>Websitenavigatie<\/em> is een algemene term die verwijst naar de <a href=\"https:\/\/kinsta.com\/nl\/blog\/google-sitelinks\/#6-build-internal-links\" target=\"_blank\" rel=\"noopener noreferrer\">interne linkstructuur<\/a> van een website. Vergeet nooit dat het belangrijkste doel van navigatie is om gebruikers te <em>helpen <\/em>om gemakkelijk de voor hun relevante inhoud op jouw website te vinden.<\/p>\n<p>De interne linkstructuur van jouw website vormt de <a href=\"https:\/\/kinsta.com\/blog\/wordpress-sitemap\/\" target=\"_blank\" rel=\"noopener noreferrer\">basis van jouw sitemap<\/a>, 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 <a href=\"https:\/\/kinsta.com\/nl\/blog\/google-sitelinks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google- sitelinks krijgt<\/a>).<\/p>\n<h3>Menu-navigatie<\/h3>\n<p>Er zijn verschillende aspecten die deel uitmaken van de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-aangepast-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">websitenavigatie<\/a>. 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.<\/p>\n<p>Er zijn verschillende opties wat betreft menu-ontwerp, maar de meest populaire zijn:<\/p>\n<h4>Navigatiemenu<\/h4>\n<p>Dit menu bevindt zich idealiter vooraan en in het midden van de website en kan <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-dropdown-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">een drop-downmenu bevatten<\/a> als er verschillende categorie\u00ebn zijn. We <a href=\"https:\/\/www.websaucestudio.com\/website-navigation-best-practices-and-seo-value\/\" target=\"_blank\" rel=\"noopener noreferrer\">bevelen drop-downmenu\u2019s echter niet aan<\/a>, vooral vanwege problemen met technische SEO (ze zijn moeilijker te doorzoeken). Bovendien blijkt uit onderzoek dat de meeste mensen <a href=\"http:\/\/www.useit.com\/alertbox\/annoyances.html\" target=\"_blank\" rel=\"noopener noreferrer\">geen fan zijn van drop-downmenu&#8217;s<\/a>.<\/p>\n<p>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&#8217;s kunnen dus leiden tot een afname in het aantal bezoeken op de pagina.<\/p>\n<h4>Hamburgermenu<\/h4>\n<p>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 <a href=\"https:\/\/speckyboy.com\/analyzing-effectiveness-hamburger-menus-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">hebben een hekel aan het hamburgermenu<\/a>, Deze aversie voor hamburgermenu\u2019s heeft echter ook een positieve kant: ze gingen nadenken over hoe ze op andere manieren navigatie op mobiele websites aantrekkelijk en functioneel konden maken.<\/p>\n<p>Hier zijn een aantal tips voor het ontwerpen van navigatie op basis van webdesign best practices:<\/p>\n<ul>\n<li><strong>Voeg een zoekbalk toe<\/strong> om gebruikers te helpen makkelijk relevante inhoud te vinden (lees hier hoe je de <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-zoekfunctie\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress zoekfunctie kan verbeteren<\/a>). Dit is vooral handig voor websites met veel inhoud, zoals een nieuwsblog.<\/li>\n<li>Ontwerp je website volgens de <strong>three-click regel,<\/strong> die stelt dat gebruikers de gewenste informatie kunnen vinden met maximaal drie muisklikken. Gebruikers <a href=\"https:\/\/www.cludo.com\/blog\/search-vs-navigate-people-behave-websites-search-navigate\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigeren liever door een website<\/a> dan dat ze door zoekresultaten kijken.<\/li>\n<li><strong>Gebruik beschrijvende menutitels<\/strong> menutitels (denk aan de trefwoorden); dit helpt gebruikers om items makkelijk te vinden en levert een positieve bijdrage aan de SEO.<\/li>\n<li><strong>De positie van menu-items is belangrijk.<\/strong> Plaats de belangrijkste pagina&#8217;s bovenin je menu, zodat ze toegankelijk zijn.<\/li>\n<li><strong>Beperk het aantal menu-items tot maximaal 7<\/strong> niet alleen om het ontwerp helder te houden, maar ook omdat teveel menu-itemcategorie\u00ebn mogelijk je zoekmachinerankings kan be\u00efnvloeden. Google zou deze schijnbaar niet-gerelateerde categorie\u00ebn kunnen interpreteren als een teken dat jouw website nog geen specifieke niche heeft gekozen.<\/li>\n<\/ul>\n<p>Hier is een handige infographic over websitemenu&#8217;s:<\/p>\n<figure id=\"attachment_66613\" aria-describedby=\"caption-attachment-66613\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66613 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/best-practices-voor-menunavigatie.jpg\" alt=\"Best practices voor menunavigatie\" width=\"1320\" height=\"1802\"><figcaption id=\"caption-attachment-66613\" class=\"wp-caption-text\">Best practices voor menunavigatie<\/figcaption><\/figure>\n<h2>Coderingsnormen<\/h2>\n<p>Nu er wereldwijd zoveel websites worden gemaakt en gebruikt, is er zonder twijfel behoefte aan een offici\u00eble reeks coderingsnormen. Aspecten van deze normen zijn onder meer:<\/p>\n<h3>SEO<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-betekent-seo\/\">SEO<\/a> kan worden gebruikt om het aantal bezoekers van jouw website <em>organisch<\/em> (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 <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">SEO-checklist<\/a> en onze tips voor de <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-seo-plugins-voor-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">beste SEO-plugins voor WordPress<\/a> om kennis te maken met dit aspect van best practices voor webdesign.<\/p>\n<p>Houd er rekening mee dat de rest van de coderingsnormen in dit artikel hand in hand gaan met SEO.<\/p>\n<h3>Responsief design<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/nl\/leren\/wordpress-sneller-maken\/#make-sure-your-site-is-responsive\">Responsive design<\/a> richt zich op het leveren van een fantastische gebruikerservaring, ongeacht welk apparaat of browser gebruikt wordt om de website te bezoeken.<\/p>\n<p>Het is tegenwoordig belangrijker dan ooit om je website responsief te ontwerpen, aangezien meer dan 60% van de internetgebruikers <a href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\" target=\"_blank\" rel=\"noopener noreferrer\">het internet bezoekt via mobiele telefoons<\/a>, en <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\" target=\"_blank\" rel=\"noopener noreferrer\">de helft van e-commercetransacties<\/a> via mobiele platforms plaatsvindt. Daarbij geeft Google&#8217;s nieuwe zoekalgoritme de <a href=\"https:\/\/www.businessnewsdaily.com\/7808-google-search-ranking-mobile.html\" target=\"_blank\" rel=\"noopener noreferrer\">prioriteit aan mobielvriendelijke websites.<\/a>.<\/p>\n<figure id=\"attachment_66616\" aria-describedby=\"caption-attachment-66616\" style=\"width: 210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66616 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/voorbeeld-van-responsive-design.jpg\" alt=\"Een voorbeeld van responsive design\" width=\"210\" height=\"365\"><figcaption id=\"caption-attachment-66616\" class=\"wp-caption-text\">Een voorbeeld van responsive design<\/figcaption><\/figure>\n<p>Een responsieve website helpt gebruikers niet alleen gemakkelijker door je de pagina&#8217;s te navigeren, het draagt ook bij aan een verhoogde betrokkenheid en meer conversies. <a href=\"https:\/\/www.thinkwithgoogle.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gebruikers bevelen merken aan<\/a> waarmee ze een positieve mobielresponsieve ervaring hebben gehad. Aan de andere kant zouden ze niet alleen <a href=\"https:\/\/www.socpub.com\/articles\/the-5-mobile-marketing-mistakes-infographic-14849\" target=\"_blank\" rel=\"noopener noreferrer\">stoppen met kopen bij merken<\/a> die een slechte mobiele website hebben, maar ook anderen ontmoedigen daar te kopen.<\/p>\n<p>Ondanks de vraag naar responsieve websites, heeft <a href=\"https:\/\/bpstudios.com\/Blog\/March-2017\/15-Web-Design-Statistics-You-Should-Know\" target=\"_blank\" rel=\"noopener noreferrer\">91% van de kleine bedrijven dit niet<\/a>. Ze zouden er eigenlijk wel een moeten hebben, het loont zonder twijfel om een mobiel responsieve website te (laten) ontwerpen. 62% van de bedrijven <a href=\"https:\/\/econsultancy.com\/blog\/11044-more-companies-are-designing-their-sites-for-tablet-and-mobile-stats\/\" target=\"_blank\" rel=\"noopener noreferrer\">heeft een omzetstijging gemeld<\/a> na het ontwerpen van een mobiel responsieve website.<\/p>\n<p>Lees meer over Kinsta&#8217;s artikel over hoe je <a href=\"https:\/\/kinsta.com\/nl\/blog\/google-mobile-first-index\/\" target=\"_blank\" rel=\"noopener noreferrer\">jouw website mobielvriendelijker kan maken<\/a>. Hier vind je ook een lijst van de beste <a href=\"https:\/\/kinsta.com\/blog\/wordpress-mobile-plugin\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress mobiele plugins<\/a> die je kan downloaden. Bekijk ook deze samengestelde <a href=\"https:\/\/kinsta.com\/nl\/blog\/snelste-wordpress-thema\/\" target=\"_blank\" rel=\"noopener noreferrer\">lijst met de beste WordPress-thema&#8217;s<\/a>, waar je door een heleboel responsieve thema&#8217;s kan bladeren.<\/p>\n<p>Google heeft ook een aantal tips voor het <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\/\" target=\"_blank\" rel=\"noopener noreferrer\">ontwerpen van een responsieve website.<\/a>.<\/p>\n<h3>Websitebeveiliging<\/h3>\n<p>Nog een belangrijke best practice voor codering? Dat is het maken van veilige programma&#8217;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 <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-gehackt\/\" target=\"_blank\" rel=\"noopener noreferrer\">kwetsbaar voor aanvallen<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Kinsta biedt bij elk pakket een <a href=\"https:\/\/kinsta.com\/nl\/docs\/service-informatie\/verwijderen-malware\/\">belofte van malwarebeveiliging<\/a>\u00a0maar het is nooit een slecht idee om extra voorzorgsmaatregelen te nemen om je website te beveiligen tegen hacks.<\/p>\n<\/aside>\n\n<p>WordPress is <a href=\"https:\/\/kinsta.com\/nl\/blog\/is-wordpress-veilig\/\" target=\"_blank\" rel=\"noopener noreferrer\">over het algemeen veilig<\/a>, maar het is nooit een slecht idee om extra voorzorgsmaatregelen te nemen om je website te beveiligen tegen hacks.<\/p>\n<p>Dit zijn een aantal van de beste beveiligingsprocedures voor websites:<\/p>\n<ul>\n<li><strong>Gebruik een SSL-certificaat,<\/strong> Dit is vooral belangrijk voor sites die te maken hebben met betalingen en persoonlijke gegevens. Het <a href=\"https:\/\/kinsta.com\/nl\/blog\/hoe-werkt-ssl\/\" target=\"_blank\" rel=\"noopener noreferrer\">SSL-certificaat<\/a> 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 <a href=\"https:\/\/kinsta.com\/nl\/blog\/err_ssl_obsolete_version\/\" target=\"_blank\" rel=\"noopener noreferrer\">afkeuren van oudere TLS-versies<\/a> en het geven van extra waarschuwingen.<br \/>\n<a href=\"https:\/\/kinsta.com\/nl\/blog\/http-naar-https\/\" target=\"_blank\" rel=\"noopener noreferrer\">Het inschakelen van HTTPS<\/a> (onderdeel van het installeren van een SSL-certificaat) is ook een offici\u00eble rangschikking factor voor Google.<\/li>\n<li><strong>Houd je inloggegevens veilig.<\/strong> Hackers kunnen met een bruteforce-aanval toegang proberen te krijgen tot een website. Het helpt om een <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-login-url\/\" target=\"_blank\" rel=\"noopener noreferrer\">aparte of verborgen inlogpagina<\/a> (aan te maken (gebruik hiervoor de <a href=\"https:\/\/wordpress.org\/plugins\/wps-hide-login\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Hide Login<\/a> plugin) en om het aantal toegestane foute inlogpogingen te beperken. Gebruik de <a href=\"https:\/\/wordpress.org\/plugins\/login-lockdown\/\" target=\"_blank\" rel=\"noopener noreferrer\">Login LockDown<\/a> 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.<\/li>\n<li><strong>Houd de WordPress-core, plugins en thema\u2019s up-to-date.<\/strong> Vergeet niet om plugins of thema&#8217;s altijd van een betrouwbare bron te downloaden. Het is een goed teken als de plugins of thema&#8217;s meerdere installaties hebben en recent zijn bijgewerkt. Lees de reviews om zelf te beslissen of de plugin betrouwbaar is; bekijk bijvoorbeeld de <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/wordpress-plugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">plugins op deze lijst<\/a>). Download een WordPress beveiligingsplugin zoals <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-beveiligingsplugins\/#wordfence-security\" target=\"_blank\" rel=\"noopener noreferrer\">Wordfence<\/a>, <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-beveiligingsplugins\/#sucuri\" target=\"_blank\" rel=\"noopener noreferrer\">Sucuri<\/a>, of <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-beveiligingsplugins\/#defender\" target=\"_blank\" rel=\"noopener noreferrer\">Defender<\/a>, 73.2% van de meest populaire WordPress installaties die kwetsbaar zijn kunnen gevonden worden <a href=\"https:\/\/www.wpwhitesecurity.com\/wordpress-security-news-updates\/statistics-70-percent-wordpress-installations-vulnerable\/\" target=\"_blank\" rel=\"noopener noreferrer\">met hulp van gratis geautomatiseerde tools<\/a>. Hier is een meer gedetailleerde lijst van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-beveiligingsplugins\/\" target=\"_blank\" rel=\"noopener noreferrer\">de beste beveiligingsplugins<\/a>.<\/li>\n<li><strong>Gebruik een veilige webhost.<\/strong> Voor degenen die niet op de hoogte zijn: het lijkt er misschien op dat je webhost niets te maken heeft met websitebeveiliging, maar <a href=\"https:\/\/www.wpwhitesecurity.com\/state-of-security-of-wordpress-blogs-and-websites\/\" target=\"_blank\" rel=\"noopener noreferrer\">41% van hacks<\/a> vindt plaats door een beveiligingslek op het hostingplatform. Zoek een hostingprovider met functies zoals: een firewall en encryptie aan serverzijde, <a href=\"https:\/\/kinsta.com\/nl\/blog\/nginx-vs-apache\/\" target=\"_blank\" rel=\"noopener noreferrer\">NGINX of Apachewebservers<\/a>, antivirus- en antimalware software, on-site beveiligingssystemen en de beschikbaarheid van SSL-certificaten en een CDN (Content Delivery Network).<\/li>\n<\/ul>\n<p>Voor meer informatie over WordPress-beveiliging, bekijk ons uitgebreid verslag over <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-beveiliging\/\" target=\"_blank\" rel=\"noopener noreferrer\">hoe je je WordPress-website veilig houdt.<\/a><\/p>\n<h3>Paginasnelheid<\/h3>\n<p>Ongeveer de helft van de internetgebruikers verwacht dat een website binnen <a href=\"https:\/\/kinsta.com\/nl\/leren\/snelheidsoptimalisatie\/\" target=\"_blank\" rel=\"noopener noreferrer\">2 seconden of minder<\/a>, wordt geladen. Als het langer duurt, zal 40% van de mensen de pagina zonder aarzelen wegklikken en (waarschijnlijk) niet terugkeren.<\/p>\n<p>Paginasnelheid is naast websitebezoeken belangrijk omdat het invloed kan hebben op de conversie en de inkomsten. Voor elke seconde extra laadsnelheid daalt de verkoop <a href=\"https:\/\/www.lyfemarketing.com\/blog\/web-design-best-practices\/\" target=\"_blank\" rel=\"noopener noreferrer\">tot 27%<\/a>. Het verhogen van de snelheid kan het verlies van <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\" target=\"_blank\" rel=\"noopener noreferrer\">7% van de mogelijke conversies<\/a> voorkommen.<\/p>\n<p>Hier volgen een paar manieren om jouw webpagina&#8217;s sneller te laten laden:<\/p>\n<ul>\n<li>Gebruik een <strong>content delivery network (CDN)<\/strong>, dat statische bestanden zoals afbeeldingen, CSS en JavaScript <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-cdn\/\" target=\"_blank\" rel=\"noopener noreferrer\">kan bezorgen vanaf de servers die zich het dichtst bij de fysieke locatie van de gebruiker bevinden<\/a>.<\/li>\n<li><strong>Denk goed na over hoe je afbeeldingen gebruikt.<\/strong> De gemiddelde website gebruikt 1.8MB aan afbeeldingen, wat overeenkomt met <a href=\"https:\/\/speedcurve.com\/blog\/web-performance-page-bloat\/\" target=\"_blank\" rel=\"noopener noreferrer\">60% van de grootte van een website<\/a>. Heroverweeg hoe je jouw website inricht. Als je de paginasnelheid zo snel mogelijk wilt houden, probeer dan het aantal grote afbeeldingen te verminderen en te <a href=\"https:\/\/kinsta.com\/nl\/blog\/afbeeldingen-optimaliseren-voor-internet\/\" target=\"_blank\" rel=\"noopener noreferrer\">optimaliseren<\/a>.<\/li>\n<li>Als je website veel grote afbeeldingen nodig heeft, <strong>gebruik dan plugins<\/strong> die functioneren met <a href=\"https:\/\/kinsta.com\/nl\/blog\/gzip-compressie\/\" target=\"_blank\" rel=\"noopener noreferrer\">GZIP compression<\/a>, caching, of beeldcompressie, zoals <a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Rocket<\/a> en <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Imagify<\/a>. Deze plugins kunnen helpen om je bestanden kleiner te maken (zonder de kwaliteit te verliezen) zodat ze sneller worden geladen.<\/li>\n<li><strong>Kijk opnieuw naar het aantal plugins en bestanden die je in de WordPress-database bewaart,<\/strong> deze kunnen de laadsnelheid van de pagina ook be\u00efnvloeden. Ruim de plugins die je niet gebruikt op, en terwijl je toch bezig bent, hou je PH <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-onderhoud\/#keeping-your-wordpress-site-updated\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress-core, en plugins bijgewerkt naar de laatste versies<\/a>.<\/li>\n<\/ul>\n<p>Bekijk ons uitgebreide artikel over <a href=\"https:\/\/kinsta.com\/nl\/leren\/snelheidsoptimalisatie\/\" target=\"_blank\" rel=\"noopener noreferrer\">de optimalisatie van websitesnelheid.<\/a>.<\/p>\n<h2>Toegankelijkheidsnormen<\/h2>\n<p>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.<\/p>\n<figure id=\"attachment_66612\" aria-describedby=\"caption-attachment-66612\" style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-66612 size-full\" src=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/toegankelijkheid.jpg\" alt=\"Toegankelijkheid is onmisbaar voor elke website\" width=\"1320\" height=\"732\"><figcaption id=\"caption-attachment-66612\" class=\"wp-caption-text\">Toegankelijkheid is onmisbaar voor elke website<\/figcaption><\/figure>\n<p><em>Toegankelijkheid<\/em> verwijst naar het bruikbaar maken van jouw website, voor <em>iedereen<\/em>.<\/p>\n<p>De <a href=\"https:\/\/www.w3.org\/WAI\/intro\/accessibility.php\" target=\"_blank\" rel=\"noopener noreferrer\">W3<\/a> zegt dat de toegankelijkheid van websites niet alleen mensen met een handicap helpt, maar ook voor:<\/p>\n<ul>\n<li>Mensen die apparaten gebruiken met kleine schermen, verschillende invoermethoden, enzovoort.<\/li>\n<li>Oudere mensen.<\/li>\n<li>Mensen met &#8217;tijdelijke handicaps&#8217;, bijvoorbeeld een gebroken arm, een verloren bril of een medische aandoening.<\/li>\n<li>Internetgebruikers met &#8216;situationele beperkingen&#8217;. Het kan bijvoorbeeld lastig zijn het scherm te zien in fel zonlicht of naar audio te luisteren in het openbaar vervoer.<\/li>\n<li>Personen met een trage internetverbinding.<\/li>\n<\/ul>\n<p>Toegankelijkheid zou voor iedereen een prioriteit moeten zijn, aangezien we er allemaal op een of andere manier mee te maken hebben.<\/p>\n<h3>Redenen om je website toegankelijk te maken<\/h3>\n<p>Ben je nog steeds niet zeker of het de moeite waard is je met toegankelijkheid bezig te houden?<\/p>\n<p>Denk eens na over de volgende redenen:<\/p>\n<ul>\n<li><strong>Het is een ADA-voorschrift.<\/strong> 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 \u2014 in een tijd waarin internet nog niet zo alomtegenwoordig was \u2014 proberen wetgevers <a href=\"https:\/\/www.ada.gov\/anprm2010\/web%20anprm_2010.htm\" target=\"_blank\" rel=\"noopener noreferrer\">de wet te wijzigen<\/a>.<\/li>\n<li><strong>Het bevordert inclusiviteit.<\/strong> Uit een onderzoek van het Pew Research Center blijkt dat er <a href=\"http:\/\/www.pewresearch.org\/fact-tank\/2017\/04\/07\/disabled-americans-are-less-likely-to-use-technology\/\" target=\"_blank\" rel=\"noopener noreferrer\">drie keer minder kans is<\/a> dat mensen met een handicap het internet gebruiken vergeleken met mensen zonder handicap. Dit is jammer omdat statistieken aantonen dat ongeveer <a href=\"http:\/\/www.talentinnovation.org\/_private\/assets\/DisabilitiesInclusion_PressRelease.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">30% van de professionals<\/a> een handicap heeft, en 62% van de mensen met een handicap onopgemerkt proberen te blijven uit angst voor negatieve vooroordelen.<\/li>\n<li><strong>Het zal je helpen meer klanten te krijgen.<\/strong> Door mensen met een handicap niet uit te sluiten, stel je je open voor een netwerk dat <a href=\"https:\/\/www.boia.org\/blog\/how-to-prevent-a-web-accessibility-lawsuit\" target=\"_blank\" rel=\"noopener noreferrer\">$7 biljoen aan besteedbaar inkomen vertegenwoordigt<\/a><\/li>\n<li><strong>SEO-voordelen.<\/strong> Zoekmachines belonen websites die voldoen aan de toegankelijkheidsnormen en moedigen daarmee meer websites aan om de toegankelijkheid te verbeteren.<\/li>\n<\/ul>\n<h3>Hoe maak je jouw website toegankelijker?<\/h3>\n<p>Een eenvoudige manier om jouw website toegankelijk te maken, is door de <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Accessibility<\/a> plugin te installeren die onder andere de volgende toegankelijkheidsfuncties toevoegt:<\/p>\n<ul>\n<li>Een werkbalk waar gebruikers het formaat van lettertypen kunnen wijzigen en je site in hoog contrast of grijswaarden kunnen bekijken.<\/li>\n<li>Het vergelijken van kleurcontrast om te controleren of het voldoet aan de ADA-standaard.<\/li>\n<li>Het weghalen van titels van afbeeldingen in de inhoud. De meeste schermlezers hebben dit niet door en lezen vervolgens de anchor-tekst.<\/li>\n<li>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.<\/li>\n<\/ul>\n<p>Een paar extra stappen die je kan nemen:<\/p>\n<ul>\n<li><strong>Voeg ondertiteling of een transcriptie toe <\/strong> als jouw website media produceert zoals <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-audiospelers\/\" target=\"_blank\" rel=\"noopener noreferrer\">audio<\/a>, audioboeken, video&#8217;s, <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-podcast\/\" target=\"_blank\" rel=\"noopener noreferrer\">podcasts<\/a>, 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.<\/li>\n<li><strong>Maak het mogelijk om links en menu&#8217;s via het toetsenbord te gebruiken<\/strong> voor mensen die alleen een toetsenbord (zonder muis) kunnen gebruiken vanwege een motorische handicap. Drop-downmenu&#8217;s worden afgeraden, maar je kan dit verhelpen door snelkoppelingen toe te wijzen voor elke optie in het drop-downmenu (bijvoorbeeld: druk op &#8216;1&#8217; voor de startpagina, &#8216;2&#8217;, voor de informatiepagina, enzovoort).<\/li>\n<li><strong>Test de toegankelijkheid van jouw website.<\/strong> Het Web Accessibility Initiative schrijft geen specifieke tool voor, maar biedt in plaats daarvan een <a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\" target=\"_blank\" rel=\"noopener noreferrer\">lijst met tools<\/a> aan die je kan gebruiken om je verbeteringen te controleren.<\/li>\n<\/ul>\n<h2>Webdesign: best practices voor jouw volgende websiteproject<\/h2>\n<p>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 <strong>iets in elkaar te zetten dat er goed uitziet \u00e9n goed werkt<\/strong>.<\/p>\n\n<p>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.<\/p>\n<p>Hebben we iets belangrijks gemist? Deel jouw best practices voor webdesign hieronder!<\/p>\n<p>Leessuggestie: <a href=\"https:\/\/kinsta.com\/nl\/blog\/webdesigncursussen\/\">Beste online cursussen webdesign<\/a><\/p>\n<p>\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Waarom zijn er verschillen tussen wat de ene WordPress&#8211;ontwikkelaar in rekening brengt vergeleken met de andere? Om deze vraag te kunnen beantwoorden, moet je eerst nadenken &#8230;<\/p>\n","protected":false},"author":48,"featured_media":30359,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[286,85],"topic":[881,885,906],"class_list":["post-30292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-accessibility","tag-webdesign","topic-webdesign","topic-websitebranding","topic-wordpress-websitedesign"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Webdesign: best practices voor jouw volgende websiteproject<\/title>\n<meta name=\"description\" content=\"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Webdesign: best practices voor jouw volgende websiteproject\" \/>\n<meta property=\"og:description\" content=\"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-11T14:18:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T08:47:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maddy Osman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@maddyosman\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maddy Osman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\"},\"author\":{\"name\":\"Maddy Osman\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\"},\"headline\":\"Webdesign: best practices voor jouw volgende websiteproject\",\"datePublished\":\"2020-03-11T14:18:50+00:00\",\"dateModified\":\"2023-06-07T08:47:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\"},\"wordCount\":4779,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg\",\"keywords\":[\"accessibility\",\"webdesign\"],\"articleSection\":[\"WordPress ontwikkeling\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\",\"name\":\"Webdesign: best practices voor jouw volgende websiteproject\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg\",\"datePublished\":\"2020-03-11T14:18:50+00:00\",\"dateModified\":\"2023-06-07T08:47:20+00:00\",\"description\":\"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Webdesign: best practices\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Webdesign: best practices voor jouw volgende websiteproject\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\",\"name\":\"Maddy Osman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"caption\":\"Maddy Osman\"},\"description\":\"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.\",\"sameAs\":[\"http:\/\/www.the-blogsmith.com\",\"https:\/\/x.com\/maddyosman\"],\"url\":\"https:\/\/kinsta.com\/nl\/blog\/author\/maddy\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Webdesign: best practices voor jouw volgende websiteproject","description":"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/","og_locale":"nl_NL","og_type":"article","og_title":"Webdesign: best practices voor jouw volgende websiteproject","og_description":"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.","og_url":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2020-03-11T14:18:50+00:00","article_modified_time":"2023-06-07T08:47:20+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg","type":"image\/jpeg"}],"author":"Maddy Osman","twitter_card":"summary_large_image","twitter_description":"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg","twitter_creator":"@maddyosman","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Maddy Osman","Geschatte leestijd":"24 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/"},"author":{"name":"Maddy Osman","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89"},"headline":"Webdesign: best practices voor jouw volgende websiteproject","datePublished":"2020-03-11T14:18:50+00:00","dateModified":"2023-06-07T08:47:20+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/"},"wordCount":4779,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg","keywords":["accessibility","webdesign"],"articleSection":["WordPress ontwikkeling"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/","url":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/","name":"Webdesign: best practices voor jouw volgende websiteproject","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg","datePublished":"2020-03-11T14:18:50+00:00","dateModified":"2023-06-07T08:47:20+00:00","description":"Goed design gaat verder dan er mooi uitzien. Even belangrijk is gebruiksvriendelijkheid, navigatie en toegankelijkheid. Leer alles over de best practices.","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2020\/03\/web-design-best-practices.jpg","width":1460,"height":730,"caption":"Webdesign: best practices"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/webdesign-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Webdesign: best practices voor jouw volgende websiteproject"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89","name":"Maddy Osman","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","caption":"Maddy Osman"},"description":"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.","sameAs":["http:\/\/www.the-blogsmith.com","https:\/\/x.com\/maddyosman"],"url":"https:\/\/kinsta.com\/nl\/blog\/author\/maddy\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/30292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=30292"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/30292\/revisions"}],"predecessor-version":[{"id":44553,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/30292\/revisions\/44553"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/translations\/se"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/30292\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/30359"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=30292"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=30292"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=30292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}