Wat is Color Contrast?

Color contrast verwijst naar het verschil in helderheid of kleur tussen tekst en de achtergrond waarop deze staat. Een goed contrast zorgt ervoor dat tekst en visuele elementen gemakkelijk te onderscheiden zijn. Dit is belangrijk voor gebruikers met visuele beperkingen, zoals slechtziendheid, kleurenblindheid, of andere visuele beperkingen.

In het kader van webtoegankelijkheid wordt color contrast gemeten volgens de richtlijnen van de Web Content Accessibility Guidelines (WCAG), een internationale standaard voor toegankelijke digitale content.

Waarom is Color Contrast belangrijk?

1. Leesbaarheid verbeteren
   Gebruikers met een visuele beperking kunnen moeite hebben om tekst te lezen als het contrast te laag is. Een goed contrast maakt het voor iedereen eenvoudiger om content te begrijpen.
2. Toegankelijkheidseisen voldoen
   Volgens WCAG moeten websites voldoen aan minimale contrastverhoudingen om toegankelijk te zijn. Dit helpt organisaties om te voldoen aan wetgeving zoals de Europese EN 301 549 en de Americans with Disabilities Act (ADA).
3. Verbetering gebruikerservaring (UX)
   Een goed color contrast verhoogt de algehele gebruiksvriendelijkheid van je website, waardoor meer bezoekers betrokken blijven en langer op je site blijven.

WCAG-richtlijnen voor Color Contrast

De WCAG stelt specifieke eisen aan color contrast afhankelijk van het type tekst of visueel element:

• Normale tekst: Minimaal een contrastverhouding van 4.5:1 tussen tekst en achtergrond.
• Grote tekst (≥ 18 punten of 14 punten vetgedrukt): Minimaal een contrastverhouding van 3:1.
• Decoratieve of inactieve elementen: Hier gelden geen strikte contrastvereisten, maar een goed ontwerp blijft aanbevolen.

Tips voor een goed Color Contrast

1. Vermijd lichte kleuren op lichte achtergronden (bijv. geel op wit). Kies in plaats daarvan een donkerdere tint.
2. Test voor kleurenblindheid: Gebruik kleurenblindheidssimulators om te zien hoe je site eruitziet voor mensen met deze beperking.
3. Gebruik contrastvriendelijke thema’s: Veel WordPress-thema’s bieden ingebouwde toegankelijkheidsopties.
4. Denk verder dan tekst: Zorg dat knoppen, pictogrammen, en andere visuele elementen ook voldoende contrast hebben.

Tools om Color Contrast te controleren

Er zijn verschillende (gratis) tools beschikbaar waarmee je het contrast van je website kunt testen en verbeteren. Hier zijn enkele populaire opties:

• Contrast Checker (WebAIM): Bereken de contrastverhouding tussen twee kleuren.
• Wave Tool: Analyseer je website op toegankelijkheidsproblemen, inclusief contrast.
• Accessibility Insights: Een Chrome-extensie waarmee je snel contrastproblemen identificeert.
• WordPress plugins: Plugins zoals WP Accessibility of Accessible Colors kunnen je helpen bij het beheren van contrast op je site.

Swiper.js voor WordPress is een JavaScript-bibliotheek die wordt gebruikt om moderne, responsieve sliders en carrousels toe te voegen aan WordPress-websites.

Het biedt uitgebreide functionaliteiten zoals touch- en swipe-ondersteuning, autoplay, en aanpasbare navigatie-elementen. Hoewel Swiper.js geen standaard WordPress-plugin is, kan het eenvoudig worden geïntegreerd door de scripts en stijlen handmatig toe te voegen via je thema.

Het is vooral populair vanwege zijn prestaties, flexibiliteit en compatibiliteit met mobiele apparaten, waardoor het een uitstekende keuze is voor dynamische en gebruiksvriendelijke sliders.

De gratis plugin “Discount Rules for WooCommerce” is een uitgebreide tool voor het beheren van dynamische prijsstrategieën en kortingen binnen je WooCommerce webshop.

Met deze plugin kun je verschillende kortingsregels instellen, zoals bulk- en staffelkortingen, product- en categoriegebonden kortingen, en BOGO (Buy One Get One) aanbiedingen. Dit kun je bijvoorbeeld inzetten in de uitverkoop van je webshop of tijdens acties als Black Friday.

WooCommerce staffelkorting

Je kunt met deze plugin in de gratis variant al veel opties maken. Mocht het niet genoeg zijn dan kun je ook de pro versie nog aanschaffen.

15% vaste korting in je webshop

Om een vaste korting in je WooCommerce webshop in te stellen met behulp van deze plugin, volg je de onderstaande stappen:

1. 1. Installatie en activatie:
      • Download en installeer de “Discount Rules for WooCommerce” plugin uit de WordPress repository via het WordPress dashboard.
      • Activeer de plugin na installatie.
   2. Nieuwe kortingsregel aanmaken:
      • Ga in het WordPress dashboard naar WooCommerce > Woo Discount Rules.
      • Klik op “Add New Rule” om een nieuwe kortingsregel toe te voegen.
   3. Algemene instellingen:
      • Geef de kortingsregel een duidelijke titel, bijvoorbeeld “20% vaste korting op alle producten”.
      • Zorg dat de optie “Enable” is aangevinkt om de regel te activeren.
   4. Kortingstype selecteren:
      • Bij “Discount Type” kies je voor “Product Adjustment”.
      • Selecteer vervolgens “Fixed Discount” om een vast bedrag als korting in te stellen.
   5. Kortingsbedrag instellen:
      • Voer bij “Discount Value” het vaste kortingsbedrag in dat je wilt toepassen op de geselecteerde producten.
   6. Productselectie:
      • Onder het tabblad “Conditions” kun je specificeren op welke producten de korting van toepassing is.
      • Kies bijvoorbeeld voor “All Products” om de korting op alle producten toe te passen, of selecteer specifieke producten of categorieën naar wens.
   7. Opslaan en toepassen:
      • Klik op “Save” om de kortingsregel op te slaan en te activeren.

Met deze stappen wordt de vaste korting automatisch toegepast op de geselecteerde producten in je webshop. Klanten zien de korting direct bij het afrekenen, wat kan bijdragen aan een verhoogde conversie en klanttevredenheid.

Voor meer gedetailleerde informatie en aanvullende mogelijkheden kun je de officiële documentatie van de plugin raadplegen. Download de plugin direct hier.

Discount Rules for WooCommerce – Create Smart WooCommerce Coupons & Discounts, Bulk Discount, BOGO Coupons

De 7 Cialdini principes, ontwikkeld door Robert Cialdini, vormen de basis voor effectieve overtuiging en beïnvloeding. Deze principes worden veel toegepast in marketing en sales om klanten te verleiden tot een aankoop of actie zowel in websites als webshops.

Door ze strategisch in te zetten, kun je als marketeer de kans vergroten dat je doelgroep jouw boodschap accepteert en hierop reageert. Hieronder vind je een overzicht van de 7 principes, met uitleg en praktische voorbeelden.

1. Wederkerigheid

Het principe van wederkerigheid gaat over het gevoel dat mensen zich verplicht voelen om iets terug te doen wanneer ze iets hebben ontvangen. Als je een klant iets gratis aanbiedt, zoals een proefproduct of een kortingsvoucher, is de kans groter dat de klant iets terug wil doen, zoals een aankoop.

Voorbeeld: Veel WooCommerce webshops bieden een gratis e-book of korting aan wanneer klanten zich inschrijven voor de nieuwsbrief. Klanten voelen zich hierdoor ‘verplicht’ om iets terug te doen en zijn eerder geneigd een aankoop te doen of hun gegevens achter te laten.

2. Schaarste

Schaarste speelt in op de angst om iets mis te lopen. Mensen vinden iets vaak aantrekkelijker of waardevoller wanneer ze denken dat het beperkt beschikbaar is. Dit kan bijvoorbeeld gaan om een product dat bijna uitverkocht is of een tijdelijke aanbieding.

Voorbeeld: In een webshop zie je vaak de melding “Nog maar 3 op voorraad!” of “Deze aanbieding verloopt over 2 uur!”. Dit creëert een gevoel van urgentie, waardoor klanten sneller beslissen om het product te kopen voordat het te laat is.

3. Autoriteit

Mensen zijn sneller geneigd om iets te geloven of te volgen wanneer het advies komt van een expert of autoriteit op een bepaald gebied. Dit principe kan worden ingezet door bijvoorbeeld keurmerken, klantbeoordelingen of experts aan het woord te laten.

Voorbeeld: Webshops vermelden vaak dat een product “Aanbevolen door dermatologen” of “Nummer 1 keuze volgens experts”. Dit versterkt het vertrouwen van de klant en overtuigt hen om het product te kopen.

4. Consistentie en commitment

Mensen willen graag consistent zijn in hun gedrag en eerdere keuzes. Als ze eenmaal een kleine toezegging hebben gedaan, zoals het liken van een pagina of het achterlaten van hun e-mailadres, zijn ze eerder geneigd om ook grotere stappen te nemen, zoals een aankoop.

Voorbeeld: Een webshop vraagt bezoekers om zich aan te melden voor een gratis proefperiode. Wanneer mensen dit eenmaal hebben gedaan, is de stap om later over te gaan tot een betaald abonnement kleiner, omdat ze al een vorm van commitment hebben getoond.

5. Sympathie

Mensen kopen sneller iets van iemand die ze aardig of aantrekkelijk vinden. Dit kan te maken hebben met fysieke aantrekkelijkheid, maar ook met het gevoel dat de persoon of het merk oprecht en vriendelijk is. Bedrijven die een persoonlijke en sympathieke benadering gebruiken, hebben meer kans om klanten te overtuigen.

Voorbeeld: Veel kleinere webshops en merken presenteren de ‘gezicht achter het bedrijf’, zoals de eigenaar of het team, op hun website of social media. Dit maakt het bedrijf menselijker en sympathieker, waardoor klanten eerder geneigd zijn om iets te kopen.

6. Sociale bewijskracht

Mensen laten zich vaak leiden door het gedrag en de keuzes van anderen, vooral als ze onzeker zijn over wat ze moeten doen. Dit principe, ook wel ‘social proof’ genoemd, wordt vaak ingezet door het tonen van recensies, klantbeoordelingen en populariteit van producten.

Voorbeeld: “Dit product is al door 1.000 klanten gekocht!” of “Gewaardeerd met 5 sterren door 500 gebruikers” zijn voorbeelden van sociale bewijskracht die klanten vertrouwen geven en hen over de streep trekken om hetzelfde product te kopen.

7. Eenheid

Dit laatste principe, dat later is toegevoegd door Cialdini, draait om het gevoel van verbondenheid en groepsidentiteit. Mensen zijn sneller geneigd om iets te doen als ze zich onderdeel voelen van een groep waarmee ze zich identificeren. Dit kan gaan om culturele of sociale groepen, maar ook om communities of merken.

Voorbeeld: Een merk dat sportartikelen verkoopt, richt zich bijvoorbeeld op hardlopers en creëert een community waar mensen zich bij kunnen aansluiten. Door zich onderdeel te voelen van deze community, zijn klanten meer geneigd om producten van dit merk te kopen, omdat ze het zien als een uiting van hun identiteit.

De 7 Cialdini principes zijn krachtig en effectief wanneer ze op de juiste manier worden toegepast in marketingstrategieën. Door deze principes te integreren in je communicatie, webdesign en klantbenadering, kun je het vertrouwen van je klanten vergroten en hen overtuigen om over te gaan tot actie, zoals het doen van een aankoop, het achterlaten van hun gegevens, of het aanhaken bij een community.

Jouw ip-adres

Heb je een probleem en wil je graag weten wat jouw ip-adres is waarmee je bekend bent op het internet? Of heeft één van onze medewerkers gevraagd om je ip-adres te delen om te controleren of je geblokkeerd bent?

Check hier je ip adres

In WP Rocket heb je de optie om alle afbeeldingen automatisch te lazyloaden.

Alleen als je de snelheid van je WordPress website wilt optimaliseren is het aan te raden om afbeeldingen die boven de vouw (zonder scrollen) geladen worden niet te lazyloaden.

Lazyload afbeelding uitsluiten WP Rocket

Hoe sluit je een afbeelding boven de vouw uit in WP Rocket van Lazyloading? Je kunt hiervoor letterlijk het pad toevoegen van de afbeelding. Een andere optie is om een CSS class toe te voegen aan de afbeelding en deze toe te voegen in WP Rocket. Je doet dit bij de Media tab in de instellingen van WP Rocket.

Deze code snippet in WooCommerce verwijdert de variatienaam (de attributen) uit de producttitel in zowel de orderdetails als in de e-mails die naar de klant worden gestuurd vanuit een webshop.

/**
* Verwijder variatie uit producttitel
**/
add_filter( ‘woocommerce_product_variation_title_include_attributes’, ‘__return_false’ );
add_filter( ‘woocommerce_is_attribute_in_product_name’, ‘__return_false’ );

Variatie uit productnaam

Door deze twee filters toe te voegen, voorkom je dat WooCommerce de variatie-attributen (zoals maat, kleur, etc.) toevoegt aan de producttitels in de orderbevestigingen en e-mails die naar klanten worden gestuurd. Dit kan handig zijn als je wilt dat de producttitels eenvoudig en consistent blijven, zonder de toevoeging van variatiegegevens.

Wat doet deze code?

• Orderbevestigingspagina: De klant ziet de productnaam zonder variatie-attributen.
• E-mails: De klant ontvangt e-mails (bijv. orderbevestiging) waarin de productnaam geen variatie-attributen bevat.

Het wp media regenerate WP-CLI commando is een handige tool binnen de WordPress Command Line Interface (WP-CLI) waarmee je alle thumbnails in je WordPress website opnieuw kunt genereren op basis van de huidige afbeeldingsformaten die zijn ingesteld in je thema of door plugins.

Wat doet wp media regenerate precies?

Wanneer je afbeeldingen uploadt naar WordPress worden er automatisch verschillende formaten (thumbnails) van die afbeelding gemaakt in verschillende afmetingen.

Dit gebeurt op basis van de afbeeldingsformaten die zijn ingesteld in je WordPress instellingen, thema’s, of plugins. Soms kan het nodig zijn om deze thumbnails opnieuw te genereren, bijvoorbeeld als:

1. Je een nieuw thema installeert: Dit thema heeft misschien andere afbeeldingsformaten nodig dan je vorige thema.
2. Je de standaard afbeeldingsformaten hebt aangepast: Bijvoorbeeld, als je de instellingen voor de grootte van de thumbnails hebt aangepast in de WordPress media-instellingen.
3. Je een plugin hebt geïnstalleerd die nieuwe afbeeldingsformaten toevoegt: Sommige plugins voegen nieuwe afbeeldingsformaten toe die worden gebruikt op specifieke plekken, zoals in sliders of galerieën.

Met het wp regenerate thumbnails commando kun je alle afbeeldingen die al in je mediabibliotheek staan, door WordPress laten verwerken om de nieuwe set thumbnails te genereren. Zonder een extra plugin zoals bijvoorbeeld Regenerate Thumbnails. En omdat het via de commandline verloopt is het ook nog eens supersnel!

wp media regenerate

Het commando wordt als volgt uitgevoerd: wp media regenerate 

Het commando doet simpelweg het volgende:

• Het doorloopt alle afbeeldingen in je mediabibliotheek;
• Voor elke afbeelding genereert het opnieuw de thumbnails volgens de momenteel geconfigureerde afbeeldingsformaten in je thema;
• Het verwijdert automatisch alle oude, niet langer gebruikte thumbnails om ruimte vrij te maken op je server. Dit is vooral een fijne optie voor bijvoorbeeld een redesign van een website of een nieuw WordPress thema wat je in gebruik genomen hebt.

Je kunt ook extra opties gebruiken, zoals:

• Regenerate thumbnails voor specifieke afbeeldingen: Bijvoorbeeld met –path=path/to/image.jpg.
• Automatisch bevestigen: Voeg –yes toe om prompts over te slaan en direct te regenereren.

Onbekende formaten verwijderen

Er is een nieuwe optie toegevoegd recent aan het wp media regenerate commando. En dat is de –delete-unknown vlag. Hiermee kun je afbeeldingen en metadata van ongebruikte afbeeldingsformaten verwijderen zonder andere thumbnails opnieuw te hoeven genereren.

Waarom WP CLI?

Het wp media regenerate WP-CLI commando is een krachtig hulpmiddel voor WordPress specialisten om ervoor te zorgen dat alle afbeeldingen op de website of webshop correct en consistent worden weergegeven, vooral na het wijzigen van thema’s, afbeeldingsinstellingen, of na het installeren van nieuwe plugins. Het bespaart tijd, ruimt onnodige bestanden op, en draagt bij aan een betere prestatie en uitstraling van je WordPress website.

Wincher is een SEO-tool die gespecialiseerd is in het volgen van zoekwoordposities en het monitoren van SEO-prestaties. Bij Lamper Design maken wij ook gebruik van deze tool.

Het biedt een breed scala aan functies om bedrijven te helpen hun online zichtbaarheid te verbeteren.

Wincher kenmerken

1. Rank Tracking: Wincher volgt de posities van je zoekwoorden dagelijks en biedt gedetailleerde inzichten in je SEO-prestaties. Het kan ook rangwijzigingen van concurrenten volgen en je op de hoogte stellen wanneer hun posities veranderen​.
2. Keyword Research: Met de geïntegreerde Keyword Explorer kun je zoekwoorden onderzoeken op basis van zoekvolume, CPC (kosten per klik), en zoekintentie. Deze tool biedt ook geschatte verkeersvolumes en helpt je om zoekwoorden te vinden waar je een goede kans hebt om voor te ranken​.
3. Competitor Analysis: Wincher biedt gedetailleerde analyses van je concurrenten. Je kunt zien welke zoekwoorden zij targeten en hoe sterk hun SEO-strategieën zijn. Dit helpt je om beter geïnformeerde beslissingen te nemen en strategisch te werk te gaan​.
4. On-Page SEO Checker: Deze functie controleert of je pagina’s voldoen aan de best practices voor on-page SEO. Het kijkt naar zaken zoals keywordgebruik, meta-tags, en de optimalisatie van afbeeldingen. Dit helpt om ervoor te zorgen dat je content goed geoptimaliseerd is voor zoekmachines​.
5. Rapportage en Integraties: Wincher biedt volledig aanpasbare, white-labeled rapporten die je handmatig of automatisch kunt genereren. Het ondersteunt integraties met tools zoals Google Data Studio en Google Search Console, waardoor je eenvoudig je data kunt beheren en analyseren​.

Wincher is een krachtige en gebruiksvriendelijke tool die geschikt is voor zowel individuele gebruikers als grotere WordPress agency. Het biedt een gratis proefperiode van 7 dagen, zodat je de functies kunt uitproberen zonder betalingsgegevens in te voeren.

Voor meer informatie kun je terecht op de website.