Testen van responsieve webdesign: Definitieve gids

Nu mobiel internet steeds meer wordt gebruikt, moeten websites geschikter worden voor gebruikers. Responsief webdesign (RWD) kan helpen om aan deze vraag te voldoen.

Definitie van responsief webdesign

Responsief webdesign is een onderdeel van website QA gericht op het creëren van een website die geschikt is voor gebruik op elk apparaat met elke schermgrootte. De prioriteit is het waarborgen van een intuïtieve en plezierige gebruikerservaring, ongeacht of gebruikers desktop- of mobiele apparaten gebruiken.

Responsief versus adaptief webdesign

Een andere benadering om websites te creëren die gemakkelijk aan te passen zijn voor verschillende soorten apparaten is adaptief webdesign (AWD). Dit is een reeks ontwerpmethoden gebaseerd op de praktijk van het gebruik van verschillende apparaten, niet op de browser zelf. Het wordt geïmplementeerd door bepaalde formaten, CSS en JavaScript-code toe te passen.

Zowel responsief als adaptief design zijn gelijk in het toestaan dat sites worden aangepast aan mobiele apparaten en diverse schermuitbreidingen, wat uiteindelijk mobiele apparaatgebruikers betere mogelijkheden biedt. Tegelijkertijd verschillen ze in hun structuur.

Responsief design is een design dat kan veranderen en zich kan aanpassen aan elke schermgrootte, ongeacht het apparaat. Het gebruikt media queries om stijlen te wijzigen op basis van parameters zoals schermtype, breedte, hoogte, enz. Hoewel slechts één van deze parameters echt nodig is om de site aan te passen aan verschillende schermen. Adaptief design gebruikt statische lay-outs gebaseerd op controlepunten: de schermgrootte wordt eerst bepaald en vervolgens wordt de bijbehorende lay-out geladen.

Componenten van responsief webdesign

Het belangrijkste kenmerk van responsief webdesign is dat, dankzij een flexibel raster, de lay-out automatisch reageert op het vergroten of verkleinen van het scherm. Dit komt door de drie belangrijkste technische ingrediënten:

Flexibele lay-outs (flexibel raster);
Flexibele media;
Media queries.

Flexibiliteit van de lay-out is gebaseerd op het gebruik van relatieve meeteenheden in plaats van vaste pixelwaarden, waardoor de breedte kan worden aangepast aan de beschikbare ruimte om inhoud in het scherm van een apparaat te passen.

Flexibiliteit van media is gebaseerd op het aanpassen van media-inhoud aan de specificaties van het apparaat. Afhankelijk van de container die de afbeelding weergeeft, krimpen of vergroten deze.

Media queries worden gebruikt om stijlen te wijzigen op basis van apparaatkenmerken die verband houden met de weergave van inhoud, waaronder type, breedte, hoogte, oriëntatie en schermresolutie. Media queries creëren in feite een responsief design waarin geschikte stijlen worden toegepast op elke schermgrootte.

Hoe responsief webdesign te testen

Het primaire doel van het testen van responsief webdesign is het waarborgen van een bevredigende gebruikerservaring, ongeacht het desktop- of mobiele scherm. De website moet werken op verschillende apparaten, platforms en webbrowsers, wat steeds moeilijker te realiseren is vanwege een enorme hoeveelheid nieuwe functies, zoals vegen met de vinger, tikken, zweven, scrollen en nog veel meer die getest moeten worden. Bovendien hebben verschillende apparaten verschillende schermresoluties, wat de uitdaging vergroot.

Er zijn twee soorten tools die worden gebruikt voor het testen van responsief design: browser-gebaseerd en standalone.

Een browser-gebaseerde tool is bedoeld om de reactie van de website te controleren door de viewport aan te passen op basis van de resolutie en grootte van het apparaat;
Flexibele media;
Een standalone tool is voor het testen van de responsiviteit van webinhoud op een apparaat.

Testen op gewenste schermgroottes via pixels is ook mogelijk via alle browsers, omdat ze de benodigde plug-ins of extensies bieden. Chrome biedt ook softwareprogramma’s om te helpen bij het aanpassen van het scherm en de omgeving volgens de vereisten van het apparaat.

Om ervoor te zorgen dat de website responsief design biedt, moet het RWD-testproces ervoor zorgen dat:

De URL of link hetzelfde is voor alle apparaten en alle browsers;
De inhoudslocatie dynamisch is wanneer de schermresolutie verandert;
De afbeeldingen een specifieke resolutie hebben om compatibel te zijn met mobiele of desktopapparaten;
De vensters worden aangepast om dynamische inhoudswijzigingen mogelijk te maken.

Checklist voor het testen van responsief webdesign

Hier zijn enkele van de belangrijkste punten waarmee u rekening moet houden bij het testen van uw responsieve webdesign:

Tools voor het testen van responsief webdesign

Nu u weet wat u moet controleren, gaan we verder met de daadwerkelijke tools die u daarbij helpen.

Responsinator

Met Responsinator hoeft u alleen de URL van uw site in te voeren om het responsieve design te testen. Het belangrijkste voordeel van deze tool is de eenvoud. Hiermee kunt u gemakkelijk met uw pagina interageren, simpelweg door op links te klikken, zoekvelden te gebruiken, enz.

Google DevTools Device Mode

DevTools’ Device Mode is een tool voor de Chrome-browser. U kunt deze gebruiken om te zien hoe uw site eruitziet op verschillende schermgroottes en resoluties, inclusief Retina-displays. Bovendien stelt de tool u in staat om apparaatinvoer te simuleren binnen de emulator.

Screenfly

Screenfly maakt het mogelijk om een website te testen op verschillende apparaten met verschillende schermgroottes. U hoeft alleen uw URL in te voeren, uw apparaat en schermgrootte uit de lijst te kiezen en te zien hoe goed uw website presteert.

Material design

Material Design stelt u in staat om het design van uw site te testen door simpelweg de URL van uw site op de startpagina in te voeren. U ziet het design van uw pagina’s op verschillende schermtypen. De tool biedt ook educatief materiaal om u te helpen meer te leren over responsief webdesign.

Ghostlab

Ghostlab is een betaalde tool waarmee websites tegelijkertijd op meerdere browsers en mobiele apparaten kunnen worden getest. Het biedt ook softwarepakketten voor verschillende platforms, waaronder Windows en Mac. Bovendien biedt de tool educatieve video’s op de startpagina.