Claude·4 min lezen

Screenshots en previews: laat de assistent je site bekijken

De assistent opent je site in een echte browser op de server en laat zien hoe hij eruitziet op desktop en op mobiel. Zo vraag je het, en zo lees je het.

Ik heb net de kleuren van mijn homepage aangepast. Maak een screenshot op
desktop en op mobiel en vertel me of er iets niet goed staat.

Een assistent die code schrijft en daarna zegt "klaar" is maar de helft. De andere helft is kijken of het er ook goed uitziet. Dat kan de assistent op je hostingaccount zelf: hij opent je website in een echte browser op de server en zet het resultaat als afbeelding in het gesprek. Jij hoeft niets te openen en nergens in te loggen.

Wat er gebeurt als je het vraagt

Op de server staat een browser zonder venster. De assistent laadt je pagina daarin, wacht tot alles staat, en maakt een afdruk. Die afdruk verschijnt in het chatvenster, bewaard binnen je eigen account en niet in je webroot. Je bezoekers zien er dus niets van.

Belangrijk: het is een echte browser, niet een voorspelling van hoe de pagina eruit zou moeten zien. Staat er iets over elkaar, valt een knop buiten het scherm of ontbreekt een afbeelding, dan ziet de assistent dat net zo goed als jij.

De twee formaten

Formaat Afmeting Waarvoor
Desktop 1280 bij 800 laptop en beeldscherm
Mobiel 390 bij 844 een telefoon van gemiddelde maat

Vraag je om beide, dan krijg je twee afbeeldingen naast elkaar. Doe dat standaard bij alles wat een bezoeker ziet. De meeste fouten in een nieuw thema zitten op mobiel, want daar valt een brede tabel of een menu dat niet inklapt direct door de mand.

Je kunt ook om de hele pagina vragen in plaats van alleen het eerste beeld. Dat is handig bij een lange homepage: dan zie je ook de secties onderaan waar je anders voor moet scrollen.

Wat er naast het plaatje staat

Bij elke afdruk komen drie dingen mee die vaak nuttiger zijn dan het plaatje:

  1. De status van de pagina. Een 200 betekent gewoon goed. Zie je een 404 of een 500, dan kijk je niet naar je nieuwe ontwerp maar naar een foutpagina.
  2. De paginatitel. Dat is de tekst die in Google en op het tabblad staat. Staat daar nog "Mijn WordPress-site", dan weet je wat je eerst doet.
  3. Fouten in de browserconsole. Een script dat niet laadt of een stuk JavaScript dat afbreekt. Die fouten zie je op de pagina zelf vaak niet, terwijl ze een formulier of een schuifbalk stil kunnen leggen.

Dat laatste punt is de reden om ook een screenshot te vragen als de pagina er volgens jou goed uitziet. Een pagina die klopt met drie consolefouten is een pagina met werk dat nog komt.

Vier opdrachten die je kunt overnemen

Na een wijziging aan je thema:

Maak van de homepage en de contactpagina een screenshot op desktop en
mobiel. Noem per pagina wat er niet goed staat, en pas het daarna aan.

Een bezoeker meldt dat iets niet klopt:

Een klant zegt dat het menu op zijn telefoon niet opengaat. Maak een
screenshot op mobiel en kijk of er fouten in de console staan.

Een lange pagina helemaal nalopen:

Maak een screenshot van de hele homepage, van boven tot onder, op mobiel.
Let op secties die te smal of te breed staan.

Voor en na een update:

Maak eerst een screenshot van de homepage. Werk daarna de plugins bij en
maak opnieuw een screenshot. Vergelijk de twee en meld wat er veranderd is.

Dat laatste patroon is de moeite waard om te onthouden. Een update die stil iets kapotmaakt, valt op als er een afdruk van ervoor is.

Previews: hetzelfde, maar op een kopie

Durf je een grote verbouwing niet op je live site te doen, dan kun je op een voorbeeldadres werken: preview.jouwdomein.nl, met zijn eigen bestanden en bij WordPress zijn eigen databasekopie. Screenshots werken daar precies hetzelfde; je geeft gewoon dat adres mee in je opdracht. Je publiceert later zelf, en bij het publiceren wordt eerst een veiligheidskopie van de live site gemaakt.

Veelgemaakte fouten

"Hij zegt dat het goed staat, maar op mijn telefoon niet." Vraag dan expliciet naar mobiel. Zonder dat erbij staat, kijkt de assistent vaak alleen op desktopformaat, en een layout die op 1280 pixels klopt kan op 390 helemaal schuiven.

"Het screenshot toont de oude versie." Dat is bijna altijd de cache. LiteSpeed Cache levert aan een browser zonder login de bewaarde pagina. Vraag om de cache te legen en daarna opnieuw te kijken.

"Ik wilde een afdruk van mijn beheerscherm." Pagina's achter een login kan hij niet vastleggen; de browser is niet ingelogd. Vraag in plaats daarvan naar de instelling zelf, bijvoorbeeld welke plugins actief zijn.

"Ik vroeg om twintig screenshots en het duurde lang." Er draait één browser per account, en elke afdruk kost een paar seconden plus geheugen. Houd het op een handvol per opdracht; bij een hele site is het beter om per pagina te werken.

"Hij maakte een screenshot na een wijziging in een tekstbestand." Dat is verspilde tijd. Vraag erom na wijzigingen die een bezoeker ziet, niet na een aanpassing in een script of een instelling.

Wil je dat de assistent zelf bepaalt wanneer kijken nuttig is, dan hoort dat bij de kennis van het platform die altijd aanstaat. Zie Vaardigheden aan en uit voor wat je wel en niet kunt kiezen.

MK
Maarten Keizer

Oprichter van Invoker. Ruim twintig jaar hosting, systeembeheer en webdevelopment; bouwt de Claude-hosting zelf en test alles eerst op de eigen servers.

over maarten