Page 1 Created with Sketch.

Alle berichten

Shape Created with Sketch. Artikels

Mobielvriendelijk webdesign: praktische tips

We leven in een wereld waarin mobiele apparaten steeds meer domineren. Een bewijs hiervan is dat het jaarlijkse aantal zoekopdrachten via mobiele apparaten hoger is dan het aantal zoekopdrachten via desktop. De sterke opmars van het zoekverkeer via mobile devices staat echter in schril contrast met het aantal Belgische bedrijven dat hun website of webshop geoptimaliseerd heeft voor mobiele apparaten. Uit de Digital Devide-studie van goudengids.be, uitgevoerd door het bureau Profacts in september 2015 bij 709 bedrijven, blijkt dat amper 11 % van de Belgische ondernemingen een mobielvriendelijke site heeft. Het is hoogtijd om een inhaalbeweging te maken, aangezien het belang van mobielvriendelijkheid sterk is toegenomen bij consumenten en zoekmachines.

De gevolgen van een niet ‘mobile-friendly’ site

Google houdt sinds de mobile-friendly update van zijn algoritme op 21 april 2015 rekening met de mobielvriendelijkheid van websites en webshops in de mobiele zoekresultaten. Sites die responsive en  geoptimaliseerd zijn voor mobiele apparaten behalen een hogere positie. Heb je nog een verouderde, mobielonvriendelijke site? Dan heb je misschien al gemerkt dat je een lagere positie behaalt in de zoekresultaten van Google. Dat is vooral het geval bij websites en webshops die niet mobile responsive en niet geoptimaliseerd zijn voor mobiele apparaten. Het optimaliseren van je website of webshop voor mobiele apparaten is onder andere teksten in een groter lettertype plaatsen en links en buttons eenvoudig met een vinger aanklikbaar maken. Wist-je-datje: de mobile-friendly update van Google wordt bestempeld als de ‘Mobilegeddon’. Het is een apocalyptische bijnaam voor de ingrijpende verandering.

Je kan via de mobielvriendelijke test voor webontwikkelaars gratis en eenvoudig testen of je website of webshop door Google al dan niet als mobielvriendelijk wordt beschouwd. Wanneer je een negatieve score krijgt van Google is het aan te raden om je site te verbouwen of optimaliseren. Indien je dit niet doet, zal je waardevol verkeer via de organische zoekresultaten mislopen.

Tips voor mobielvriendelijkheid


Steeds meer designers ontwerpen websites en webshops vanuit het mobile-first standpunt, dit door het belang van mobiele apparaten. Mobile-first is geen hype, maar een fundamenteel onderdeel van het ontwerpen voor een multi-screen wereld. Het doel is een optimale gebruikservaring creëren op elk scherm.

Hou rekening met de volgende best-practices van mobile webdesign en kies voor mobielvriendelijkheid.

1. Eenvoudig menu

Bezoekers van je website of webshop via mobiele apparaten (smartphone, tablet of phablet) hebben geen zin om te navigeren door een uitgebreid menu of om door te klikken naar submenu’s. Probeer je daarom te beperken tot een menu van 5 tot 6 verschillende items. Stel de gebruiker steeds centraal en neem de items op die een hulpmiddel zijn om wegwijs te zijn doorheen je site. Schenk ook de nodige aandacht aan de keuze voor het menu-icon. Al te vaak worden iconen gebruikt die er mooi uitzien en voor jou duidelijk zijn, maar niet voor de gebruiker. Tegenwoordig is het ‘hamburger menu’ al goed ingeburgerd, maar een jaar geleden was dat nog niet het geval.

2. Efficiënte webformulieren

Webformulieren zijn op zowel desktop als mobiele apparaten vaak te lang en ingewikkeld. Om converterende webformulieren te hebben, is het belangrijk om het aantal vragen en verplichte vragen te beperken. Op mobiel is het nog belangrijker om alleen de noodzakelijke informatie te vragen, omdat bezoekers de behoefte hebben om snel informatie te raadplegen of een actie te voltooien. Daarnaast is het belangrijk om ervoor te zorgen dat de vragen die je stelt niet te veel input vereisen van de bezoeker. Maak gebruik van de verschillende types inputvelden zoals een dropdown, checkbox en kalender.

3. Opvallende call-to-actions

Bezoekers via mobiele apparaten willen meestal snel en eenvoudig specifieke informatie raadplegen. Call-to-actions spelen dus een zeer belangrijke rol. Plaats je call-to-action boven de vouw. Boven de vouw is de term die aangeeft wat bezoekers kunnen zien voordat ze moeten scrollen om de rest van de pagina te bekijken. Alle informatie boven de vouw wordt meer bekeken dan onder de vouw. Zorg er verder ook voor dat bezoekers onmiddellijk zien wat de meerwaarde is wanneer ze op de call-to-action klikken.

4. In het oog springende contactgegevens

In E-commerce is er een fysieke afstand tussen koper en verkoper. Het is daarom des te belangrijker om vlot bereikbaar te zijn. Wanneer een bezoeker vragen of opmerkingen heeft, moet hij of zij snel je contactgegevens vinden en contact kunnen opnemen. Plaats bijvoorbeeld een click-to-call functie prominent in beeld.

5. Gebruiksvriendelijke zoekfunctie

We gebruiken de Google zoekmachine dagelijks om informatie op te zoeken, producten te vinden of contact met iemand op te nemen. Google Search is algemeen ingeburgerd. Dat geldt niet alleen voor Google, maar ook op websites en webshops verwachten we een zoekfunctie. Vooral voor mobiele gebruikers, die je site bezoeken met een specifiek doel voor ogen, is een zoekveld uiterst handig.

6. Stel de duim centraal

Op een desktop kan je met de muisaanwijzer eenvoudig elementen aanklikken of andere acties uitvoeren. Op mobiele apparaten is het een heel ander verhaal, omdat de duim daar als het ware als aanwijzer fungeert. De meeste klachten over websites of webshops die niet mobielvriendelijk zijn, gaan dan ook over het feit dat de buttons te klein zijn om op te klikken. Een andere vaak voorkomende klacht is dat content moeilijk leesbaar is. Bezoekers worden dan verplicht om in en uit te zoomen, wat in strijd is met het idee van responsive design.

7. Snelle laadtijd

De nieuwe consument is ongeduldig en bijzonder veeleisend. Wanneer we onze smartphone ‘on the go’ gebruiken, willen we op onze wenken bediend worden. Je website moet geschikt zijn om zowel via WiFi als 3G/4G verbindingen snel en correct te laden. We raden aan om er voor te zorgen dat je website of webshop in minder dan 3 minuten laadt. Wanneer dat niet het geval is, vergroot de kans dat bezoekers afhaken.

Ga voor een mobielvriendelijk design!


Naast functionaliteiten is design enorm belangrijk bij het (laten) ontwikkelen van een website of webshop. Een gebruiksvriendelijk en aantrekkelijk design moet voor customer experience zorgen en leads genereren.

Hou zeker rekening met het belang van mobiele apparaten bij het ontwerpen van je website of webshop. Je kan kiezen voor een template, een custom design of een gulden middenweg. Meer informatie over deze mogelijkheden vind je in de tip van simon. 

Indien blijkt dat een webshop het geschikte middel is om je bedrijf online op de kaart te zetten of je online activiteiten verder te ontplooien, is de kans groot dat je kiest voor Magento. Het is namelijk één van de populairste E-commerce platformen. Wanneer je voor een template design kiest, kies dan een mobile responsive template. Tegenwoordig zijn de meeste Magento themes standaard mobile responsive. Je kan via custom design je webshop verder optimaliseren voor mobiele apparaten.

Bij het ontwikkelen en ontwerpen van een website of webshop moet je veel keuzes maken. Ga niet lukraak aan de slag, maar hou bij elke beslissing die je moet nemen rekening met je bedrijfsdoelstellingen en je verschillende doelgroepen. Ons team staat klaar om jou te begeleiden en samen meer inzicht te verkrijgen, om zo onderbouwde keuzes te maken en samen doelgericht acties uit te voeren.