Hoe test ik of mijn webshop responsive is?

Responsive wil zeggen dat de webwinkel op zowel desktop, tablet als mobiel optimaal getoond wordt. De vormgeving van de webshop past zich automatisch aan de afmetingen van het scherm waar de webwinkel op wordt bekeken aan. Het is belangrijk dat je bij het ontwerp van je webwinkel rekening houdt met deze schermformaten.

Om een webwinkel op verschillende schermformaten goed weer te geven, zijn er een paar punten waarop de browser de weergave kunt veranderen. Dit noemen we breakpoints. Deze breakpoints liggen op 640 pixels en 1025 pixels breedte.

Wanneer de schermbreedte onder zo’n breakpoint komt, kun je webwinkel anders worden getoond. De elementen van je winkel komen dan onder elkaar te staan in plaats van naast elkaar. Ook worden het navigatiemenu en de winkelwagen naar een andere plek in je winkel verplaatst.

Zorg voor een symmetrische indeling van je winkel, dit is het meest overzichtelijk op alle schermformaten.

Beschikbaar vanaf Mijnwebwinkel PRO

Om het responsive gedrag en de mobiele ervaring van je webshop zo goed mogelijk te laten zijn, kun je in het menu onder Instellingen / Vormgeving / Template instellingen / tabblad Navigatie  een scenario kiezen dat goed bij jouw winkel aansluit. Hier bepaal je op welke schermformaten de navigatie wordt geminimaliseerd in een nieuwe navigatieknop en hoe deze knop eruit komt te zien. 

Let hierbij op de 3 verschillende schermformaten (breakpoints) waar de winkel op reageert:

• De gewone computer met een resolutie hoger dan circa 1000 pixels (groot)

• Tablets en kleinere laptops met een resolutie tussen de circa 600 en 1000 pixels (middel)

• Telefoons en andere kleine apparaten met een resolutie tot ongeveer 600 pixels (klein)

Om tijdens het ontwerpen van je webwinkel goed te zien hoe je webwinkel er op verschillende schermen uitziet, kun je hem natuurlijk telkens op je mobiel, tablet en pc bekijken. Maar het is gemakkelijker om je browser te gebruiken om de verschillende schermformaten na te bootsen.

Om dit te doen pak je een hoek van je browser en maak je het venster kleiner, zodat je het formaat van een tablet of smartphone nabootst.

Het verschil tussen een desktop- of mobiele weergave.

Door je browservenster te verkleinen, kun je zien of de pagina-inhoud goed wordt getoond op kleinere schermen. Artikelen schikken zichzelf netjes op elk formaat scherm, hier hoef je niets voor te doen!

Kom je er niet helemaal uit met de vormgeving van jouw webwinkel of wil je jouw design naar een volgend level tillen? Ons design team kan je helpen! Ontvang op maat gemaakt design om jouw webwinkel te laten shinen! Geef de vormgeving volledig uit handen of ontvang handige tips voor verbeteringen. Benieuwd hoe? Neem dan contact op via services@mijnwebwinkel.nl voor meer informatie.