--- lastModified: 2026-10-10 type: feature title: "Responsive websites testen voor webwinkels" description: "Controleer met Runner AI winkelpagina's op desktop, tablet en telefoon. Beschrijf layoutproblemen en toets de aanpassingen voordat je de winkel publiceert." category: ai-websites h1: "Responsive websites testen voordat je winkel live gaat" keyword: "responsive websites testen" legacyKind: structured --- **Responsive websites testen** in Runner AI begint bij je huidige winkel en een concrete klanttaak. Wissel de preview tussen desktop, tablet en telefoon, bekijk dezelfde pagina en beschrijf een fout met het pad en het verwachte resultaat. Je krijgt een controleerbare aanpassing aan het winkelproject, geen garantie dat één apparaatweergave alle browsers en aankooproutes bewijst. ## Begin responsive websites testen met een klanttaak Kies een paginapad en een handeling die de klant moet kunnen uitvoeren. Op een productpagina kan dat een beschikbare variant kiezen en de winkelwagen bereiken zijn. Op een collectiepagina controleer je bijvoorbeeld of een filter de resultaten bedekt. Gebruik je echte catalogus en goedgekeurde inhoud, zodat lange productnamen en werkelijke afbeeldingen in de controle zitten. Noteer vooraf het verwachte resultaat en de onderdelen die gelijk moeten blijven. Noem de betrokken knop en de weergave waarin het probleem optreedt. Vervang lastige inhoud niet door korte voorbeeldteksten om de layout te laten passen. De [AI-bouwer voor mobiele webwinkels](/nl/ai-ecommerce-mobile-store-builder) behandelt het eerdere ontwerpwerk. Deze pagina gaat over het controleren van een bestaande winkel. ## Vergelijk desktop, tablet en telefoon Runner AI biedt drie viewportkeuzes in de winkelpreview. Desktop gebruikt de beschikbare ruimte; tablet en telefoon hebben vaste kaders. Een ander kader verandert de ruimte voor de preview zonder een apart winkelproject te maken. Zo vergelijk je dezelfde inhoud wanneer de layout smaller wordt. Loop de pagina na van de titel tot de laatste handeling. Let op afgesneden tekst, ongunstige uitsneden, overlappende knoppen en horizontaal scrollen. Open menu's en gebruik de bediening. Een zichtbare knop bewijst nog niet dat de volgende toestand werkt. Herhaal dezelfde taak in elke weergave. De kaders zijn een eerste controle, geen fysieke simulator of volledige browsermatrix. Test andere breedtes en echte apparaten apart wanneer aanraking, het mobiele toetsenbord of een betaalinterface belangrijk zijn. ## Maak van een layoutfout een gerichte wijziging Een reproduceerbare melding bevat pad, weergave, begintoestand, handeling en het verwachte en waargenomen resultaat. Een screenshot kan een overlap tonen, maar leg ook uit welke klantactie daardoor vastloopt. Meld bijvoorbeeld dat de variantlijst Toevoegen aan winkelwagen bedekt in de telefoonweergave, in plaats van de hele productpagina opnieuw te laten ontwerpen. Geef Runner AI die afgebakende opdracht met gecontroleerde catalogusgegevens, goedgekeurde teksten en merkregels. Vraag om andere secties te behouden en de betrokken bronwijzigingen ter controle terug te geven. De [AI-website-editor](/nl/ai-website-editor) beschrijft het bewerken en verzoeken voor geselecteerde elementen wanneer Design Mode beschikbaar is. Herhaal na het opslaan en laden van de bijgewerkte preview eerst de oorspronkelijke fout en daarna de andere weergaven. Een mobiele correctie kan desktopruimte of tabletbediening veranderen. ## Controleer het resultaat voordat je publiceert Een geslaagde previewcontrole is bewijs voor het bekeken scenario. Controleer of de juiste pagina is geladen, belangrijke inhoud aanwezig blijft en de handeling de verwachte toestand bereikt. Bekijk de huidige versie, niet een oude screenshot. Als de pagina voorraad, zoekresultaten of winkelwagengegevens gebruikt, controleer die informatie bij het verantwoordelijke systeem. Publiceren blijft een aparte beslissing. Een passende layout bevestigt geen betaalmethoden, verzendregels, belastingen of analytics. Gebruik een toegestane testomgeving voor aankoopcontroles en een echte telefoon voor belangrijke mobiele interacties. [Modern websiteontwerp](/nl/modern-website-design) behandelt grotere veranderingen aan navigatie en paginastructuur. Houd openstaande fouten zichtbaar en herhaal de taak na elke correctie. ## Veelgestelde vragen ### Wat heeft Runner AI nodig voor een layoutcorrectie? Geef winkel, pad, weergave, begintoestand, handeling en verwacht resultaat door. Beschrijf de waargenomen fout en voeg een screenshot toe als dat helpt. Noem gecontroleerde catalogusgegevens en onderdelen die gelijk moeten blijven. Responsive websites testen vraagt om een zichtbaar slaagcriterium, niet om een algemeen verzoek voor mooier ontwerp. ### Vervangt de telefoonpreview een echte telefoon? Nee. Het kader helpt bij layoutcontrole, maar bootst niet ieder apparaat of iedere mobiele browser na. Controleer belangrijke taken op echte apparaten wanneer aanraking, toetsenbord, oriëntatie, browserinterface of betaling ertoe doen. De preview is geen apparaatcertificering en meet geen prestaties. ### Publiceert een previewcontrole mijn wijzigingen? Nee. Controleren en publiceren zijn aparte stappen. Bekijk de opgeslagen correctie op desktop, tablet en telefoon en controleer de klanttaak en gekoppelde systemen. Een passende layout bevestigt alleen het bekeken scenario, niet alle winkelroutes of aankoopvoorwaarden. [Bekijk alle Runner AI functies](/nl)