Open een oude website op je telefoon. Je ziet de desktopversie, uitgezoomd tot je niets meer leest. Je moet inzoomen en heen en weer schuiven om een zin te volgen. Dat is bijna altijd dezelfde oorzaak: er ontbreekt een regel code van dertig tekens.
Zonder die regel doet een telefoon net alsof hij een breed scherm is. Hij verkleint je hele pagina om alles te laten passen.
Met die regel weet hij hoe breed hij echt is. Dan werkt je hele responsieve opzet pas.
Het is een van die details die niemand ziet tot ze ontbreken.
Het stukje scherm waarin je site wordt getoond.
Wat is de viewport?
De viewport is het zichtbaar deel van een pagina in het scherm van je bezoeker. Dus wat er in beeld staat zonder te scrollen.
De breedte ervan bepaalt welke indeling je site toont. Meer daarover lees je bij responsive design.
Niet hetzelfde als je scherm
Je schermformaat ligt vast, je venster niet. Iemand met een breed scherm kan zijn browser half zo breed slepen.
Reken dus nooit op een vaste schermbreedte. Je site wordt op honderden breedtes bekeken.
De regel die je nodig hebt
In de kop van elke pagina hoort een viewport meta tag te staan. Die vertelt de browser dat hij de echte breedte moet gebruiken.
Elk modern thema heeft die standaard. Ontbreekt hij, dan werkt je hele mobiele opzet niet.
Hoe je dat controleert
Open je site op een telefoon. Zie je een verkleinde versie van je desktopsite, dan weet je genoeg.
Dat is bij het uitgezoomd op mobiel vrijwel altijd de oorzaak. Je bouwer lost het in vijf minuten op.
Boven de vouw
Dat is wat er in beeld staat voordat iemand scrolt. De term komt uit de krantenwereld.
Wat daar staat, bepaalt of iemand blijft. Op een telefoon is dat maar een klein oppervlak.
Wat er in elk geval in past
Wat je doet, in gewone woorden.
Voor wie of in welke regio.
Een knop of telefoonnummer.
Meer past er niet, en meer is ook niet nodig. Een groot sfeerbeeld zonder tekst is een gemiste kans.
Het is geen harde grens
Mensen scrollen prima, dat is geen probleem meer. Alleen beslissen ze hierboven of ze dat willen.
Zorg dus dat je eerste scherm een reden geeft om verder te gaan.
De eenheden vh en vw
In CSS kun je maten opgeven als percentage van het venster. Met eenheden vh en vw maak je een blok precies zo hoog als het scherm.
Dat oogt strak en het kent een valkuil. Op een telefoon verandert die hoogte als de adresbalk wegschuift.
Waar ik voor waak
Een blok van een volledig schermhoog met tekst erin. Bij een klein toestel valt de knop dan net buiten beeld.
Test dat op een echt toestel en niet in een versmald venster, zie mobile first.
Hoe je het test
Met echte toestellen waar het kan. Vraag desnoods twee collega’s om hun telefoon.
Let daarbij op of tekst leesbaar blijft bij inzoomen. Wie slecht ziet, vergroot je pagina en dan mag er niets wegvallen, zie accessibility.
Controleer ook je campagnepagina’s
Die worden vaak apart gebouwd, buiten je thema om. Dan wordt deze instelling nog weleens vergeten.
Dat is zonde bij een pagina waar je per klik voor betaalt. Meer daarover lees je bij pagespeed.
Waar de indeling omslaat
Onder een bepaalde breedte klapt je menu in en gaan je kolommen onder elkaar. Dat punt bepaal je zelf.
Kies het op het moment dat je ontwerp gaat wringen en niet op een rond getal. Rek je venster langzaam uit en kijk waar het lelijk wordt.
Vraag twee collega’s om hun telefoon
Echte toestellen zeggen meer dan een versmald venster. Zeker bij een blok dat het hele scherm vult.
Daar schuift de adresbalk namelijk weg, en dan verandert je hoogte onderweg.
Meer vragen over Viewport
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is de viewport?
Wat is de viewport meta tag?
Waarom is mijn site uitgezoomd op mobiel?
Wat betekent boven de vouw?
Wat zijn vh en vw?
Hoe test je verschillende viewports?
Wat is de viewport?
Dat is een regel code van ongeveer dertig tekens in de kop van je pagina.
Die vertelt de browser dat hij de echte breedte van het toestel moet gebruiken. Zonder die regel doet een telefoon net alsof hij een breed scherm is.
Elk modern thema heeft die regel standaard. Je hoeft er dus meestal niets voor te doen.
Ontbreekt hij, dan werkt je hele mobiele opzet niet, hoe goed die verder ook is gebouwd.
Je controleert dat door je site op een telefoon te openen. Zie je een verkleinde versie van je desktopsite, dan weet je genoeg. Je bouwer lost dat in vijf minuten op.
Open je site op je telefoon om dit te controleren. Zie je een verkleinde desktopversie, dan ontbreekt die regel.
Elk modern thema heeft hem standaard. Je bouwer lost het anders in vijf minuten op. Zonder die regel doet een telefoon net alsof hij een breed scherm is. Hij verkleint je hele pagina om alles te laten passen.
Wat is de viewport meta tag?
De viewport is het zichtbare deel van een pagina in het scherm van je bezoeker. Dus wat er in beeld staat zonder te scrollen.
De breedte ervan bepaalt welke indeling je site toont. Onder een bepaalde breedte klapt je menu in en gaan kolommen onder elkaar.
Het is niet hetzelfde als je scherm. Je schermformaat ligt vast, je venster niet.
Iemand met een breed scherm kan zijn browser half zo breed slepen. Dan krijgt hij de tabletversie te zien.
Reken dus nooit op een vaste breedte. Je site wordt op honderden breedtes bekeken, en dat is precies waarom een vaste indeling niet werkt.
Reken nooit op een vaste breedte bij het beoordelen van een ontwerp.
Je site wordt op honderden breedtes bekeken, ook op een half versleept venster op een breed scherm. Je schermformaat ligt vast en je venster niet. Dat verschil verklaart waarom een vaste indeling nooit werkt. Iemand kan zijn browservenster namelijk half zo breed slepen.
Waarom is mijn site uitgezoomd op mobiel?
Vrijwel altijd door die ene ontbrekende regel in de kop van je pagina.
Zonder die instructie gaat een telefoon ervan uit dat hij een breed scherm moet tonen. Hij verkleint je hele pagina om alles te laten passen.
Je moet dan inzoomen en heen en weer schuiven om een zin te volgen. Dat is voor vrijwel iedereen reden om weg te klikken.
Het komt vooral voor bij oudere sites en bij losse landingspagina’s die buiten je thema om zijn gemaakt.
Controleer dus ook je campagnepagina’s. Die worden vaak apart gebouwd en dan wordt deze instelling nog weleens vergeten.
Controleer ook je losse campagnepagina’s, want die worden vaak buiten je thema om gebouwd.
Dat is precies waar je per klik voor betaalt. Een uitgezoomde pagina kost je daar direct geld. Het komt vooral voor bij oudere sites en bij losse landingspagina’s die buiten je thema om zijn gemaakt. Controleer die pagina’s dus apart en niet alleen je hoofdsite.
Wat betekent boven de vouw?
Dat is wat er in beeld staat voordat iemand scrolt. De term komt uit de krantenwereld, van de bovenste helft van de voorpagina.
Op een telefoon is dat maar een klein oppervlak. Er passen drie dingen in.
Wat je doet in gewone woorden. Voor wie of in welke regio. En een knop of telefoonnummer.
Meer past er niet, en meer is ook niet nodig. Een groot sfeerbeeld zonder tekst is een gemiste kans.
Het is trouwens geen harde grens meer. Mensen scrollen prima, alleen beslissen ze hierboven of ze dat willen. Zorg dus dat je eerste scherm een reden geeft om verder te gaan.
Zorg dat je eerste scherm drie dingen bevat: wat je doet, voor wie, en een manier om contact op te nemen.
Een groot sfeerbeeld zonder tekst is een gemiste kans. Mensen beslissen daar of ze verder scrollen. Het is trouwens geen harde grens meer. Mensen scrollen prima, alleen beslissen ze hierboven of ze dat willen.
Wat zijn vh en vw?
Dat zijn maten die je opgeeft als percentage van het venster. Met honderd vh maak je een blok precies zo hoog als het scherm.
Dat oogt strak en het kent een valkuil. Op een telefoon verandert die hoogte als de adresbalk wegschuift.
Een blok van een volledig schermhoog met tekst erin is daarom riskant. Bij een klein toestel valt de knop dan net buiten beeld.
Test dat op een echt toestel en niet in een versmald venster op je computer.
Let daarbij ook op inzoomen. Wie slecht ziet, vergroot je pagina, en dan mag er niets wegvallen of over elkaar heen schuiven.
Wees voorzichtig met blokken die precies een schermhoogte vullen. Op een telefoon verandert die hoogte onderweg.
Test dat op een echt toestel en niet in een versmald venster. Daar zie je dit soort dingen nooit. Let daarbij ook op inzoomen. Wie slecht ziet vergroot je pagina, en dan mag er niets wegvallen of over elkaar schuiven.
Ziet je site er op een telefoon uitgezoomd of rommelig uit? Stuur me de link via het formulier hieronder. Ik bekijk hem op verschillende breedtes en stuur je terug wat er misgaat en wat het kost om het te herstellen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Kijkvenster, zichtbaar schermgebied, vensterbreedte
