Lightbox: vergroten zonder je bezoeker weg te sturen
Op een portfolio of een productpagina staan afbeeldingen klein. Logisch, want er moeten er meer op een rij passen. Maar iemand die wil zien hoe een keuken er echt uitziet, wil hem groter. Stuur je hem daarvoor naar een aparte pagina, dan raak je hem kwijt aan de terugknop.
Een lightbox lost dat op. De afbeelding verschijnt groot over je pagina heen. Zodra hij sluit, staat je bezoeker weer waar hij was.
Het is een van de weinige technieken die al twintig jaar bestaat en nog steeds werkt. De uitvoering is alleen sterk veranderd.
Waar ik op let bij het inbouwen is niet de vormgeving maar het sluiten. Een venster dat je niet weg krijgt, jaagt iemand direct van je site af.
Een afbeelding vergroten zonder je bezoeker van de pagina te halen.
Wat is een lightbox?
Een lightbox is een venster dat over je pagina heen verschijnt. De achtergrond wordt gedimd, waardoor de aandacht naar het venster gaat.
De naam komt uit de fotografie, van de lichtbak waarop dia’s werden bekeken. Op een website wordt hij bijna altijd gebruikt voor beeld.
Het verschil met een pop-up
Technisch zijn ze hetzelfde: een venster over je pagina. Het verschil zit in wie hem opent.
Een lightbox opent doordat je bezoeker ergens op klikt. Een pop-up opent uit zichzelf, meestal om iets te vragen. Dat eerste is behulpzaam, dat tweede is een onderbreking.
Wanneer je hem gebruikt
Bij beeld waar detail toe doet. Een portfolio, een productfoto, een plattegrond of een certificaat.
Werkt hij als galerij, zorg dan voor pijltjes om door te bladeren. Anders moet iemand sluiten en opnieuw klikken voor elke foto.
Wat je er niet voor gebruikt: tekst die gewoon op je pagina hoort. Een dienstomschrijving in een venster is slecht voor je vindbaarheid en onhandig voor je lezer.
Waar het misgaat
Vier fouten die ik regelmatig tegenkom
Geen zichtbare sluitknop, alleen klikken naast het venster.
Op mobiel groter dan het scherm, zodat de knop buiten beeld valt.
De pagina eronder scrollt mee, waardoor je je plek kwijtraakt.
De volledige afbeelding wordt geladen, ook als niemand klikt.
Die tweede is de vervelendste. Op een telefoon is er weinig ruimte. Valt het kruisje net buiten beeld, dan zit je bezoeker vast.
Toegankelijkheid
Een venster over je pagina vraagt om drie dingen die vaak ontbreken.
Sluiten moet kunnen met de Escape-toets. De focus hoort in het venster te blijven zolang het open staat. Bij sluiten keert hij terug naar de knop.
En hulpsoftware moet weten dat er iets is geopend. Zonder die aankondiging verandert er voor een screenreader niets. Meer daarover lees je bij accessibility.
Snelheid
Laad de grote versie pas bij een klik. Doe je dat niet? Dan haalt elke bezoeker vijftien grote foto’s op voor misschien een blik.
Dat is precies waar lazy loading voor bedoeld is. Let ook op de bibliotheek die je gebruikt. Sommige brengen veel JavaScript mee voor iets dat lichter kan.
Bladeren op een telefoon
Werkt je lightbox als galerij, dan werkt vegen naar links en rechts prettiger dan pijltjes. Duimen zijn nu eenmaal geen muizen.
Test dat op een echt toestel en niet alleen in je browser. Een simulatie voelt anders dan een hand op glas.
Wat er niet in hoort
Tekst die gewoon op je pagina thuishoort. Zoekmachines waarderen verborgen inhoud lager, dus een dienstomschrijving in een venster kost je vindbaarheid.
Het is bovendien onhandig. Wie iets wil teruglezen, moet dan opnieuw op de juiste knop klikken. Meer over die opbouw lees je bij DOM.
Bij een moderne opzet is een lightbox nauwelijks een belasting. Meer over dat afwegen lees je bij pagespeed.
Meer vragen over Lightbox
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een lightbox?
Wanneer gebruik je een lightbox?
Is een lightbox goed voor de gebruiksvriendelijkheid?
Hoe maak je een lightbox toegankelijk?
Vertraagt een lightbox je website?
Wat is het verschil tussen een lightbox en een pop-up?
Wat is een lightbox?
Technisch zijn ze hetzelfde: een venster dat over je pagina verschijnt. Het verschil zit in wie hem opent.
Een lightbox opent doordat je bezoeker ergens op klikt. Hij vraagt erom en krijgt wat hij wilde zien.
Een pop-up opent uit zichzelf, meestal om iets te vragen. Een nieuwsbriefaanmelding, een kortingscode of een verzoek om cookies.
Dat eerste is behulpzaam, dat tweede is een onderbreking. Je bezoeker beleeft die twee dus totaal verschillend, ook al is de techniek gelijk.
Dat verklaart waarom een lightbox zelden irritatie oplevert en een pop-up bijna altijd. Wie zelf klikt, verwacht een reactie. Wie wordt onderbroken, verwacht niets en wil vooral verder.
Houd dat onderscheid vast bij het inrichten van je site. Wat je bezoeker zelf opent, mag groot zijn. Wat jij opent, hoort klein en kort te blijven. Beperk het aantal vensters dat jij zelf opent tot hooguit een per bezoek. Dat verschil bepaalt of iemand het als hulp of als hinder ervaart.
Wat is het verschil tussen een lightbox en een pop-up?
Een lightbox is een venster dat over je pagina heen verschijnt, meestal om een afbeelding groter te tonen. De achtergrond wordt gedimd, waardoor de aandacht naar het venster gaat.
De naam komt uit de fotografie, van de lichtbak waarop dia’s werden bekeken. Op een website wordt hij bijna altijd voor beeld gebruikt.
Het nut is dat je bezoeker op zijn plek blijft. Op een portfolio of productpagina staan afbeeldingen klein, want er moeten er meer op een rij passen.
Iemand die wil zien hoe iets er echt uitziet, wil het groter. Stuur je hem daarvoor naar een aparte pagina, dan raak je hem kwijt aan de terugknop.
Met een lightbox verschijnt de afbeelding groot over je pagina heen. Zodra hij sluit, staat je bezoeker weer precies waar hij was.
Klik op je eigen site eens een foto groot en probeer hem daarna te sluiten. Lukt dat binnen een seconde, dan zit het goed.
Wanneer gebruik je een lightbox?
Bij beeld waar detail toe doet. Een portfolio, een productfoto, een plattegrond of een certificaat.
Werkt hij als galerij, zorg dan voor pijltjes om door te bladeren. Anders moet iemand sluiten en opnieuw klikken voor elke volgende foto, en dat doet niemand meer dan twee keer.
Op een telefoon werkt vegen naar links en rechts prettiger dan pijltjes. Test dat op een echt toestel en niet alleen in je browser.
Wat je er niet voor gebruikt: tekst die gewoon op je pagina hoort. Een dienstomschrijving in een venster is slecht voor je vindbaarheid, want zoekmachines waarderen verborgen inhoud lager.
En het is onhandig voor je lezer. Wie iets wil teruglezen, moet dan opnieuw op de juiste knop klikken.
Zet er pijltjes of veegbediening bij als het om meerdere foto’s gaat. Zonder die mogelijkheid bekijkt vrijwel niemand meer dan twee afbeeldingen. Test dat op een echt toestel en niet in een simulatie in je browser.
Hoe maak je een lightbox toegankelijk?
Een venster over je pagina vraagt om drie dingen die vaak ontbreken.
Sluiten moet kunnen met de Escape-toets, naast een zichtbare sluitknop. Alleen naast het venster klikken is niet genoeg.
De focus hoort in het venster te blijven zolang het open staat. Kun je met de tabtoets achter het venster langs, dan raakt iemand het spoor bijster zonder dat hij ziet waar hij is.
En hulpsoftware moet weten dat er iets is geopend. Zonder die aankondiging verandert er voor een screenreader niets, terwijl het scherm compleet anders oogt.
Zodra het venster sluit, hoort de focus terug te gaan naar de knop waarmee je hem opende. Dat is een klein detail dat het verschil maakt tussen bruikbaar en onbruikbaar. Meer daarover lees je bij accessibility.
Test het een keer met alleen je toetsenbord. Kom je erin, kun je bladeren en kom je er weer uit? Dat is een test van twee minuten.
Vertraagt een lightbox je website?
Dat hangt volledig af van hoe hij is gebouwd. Er zijn twee dingen die het verschil maken.
Het eerste is wanneer de grote afbeelding wordt geladen. Gebeurt dat bij het openen van de pagina, dan haalt elke bezoeker vijftien grote foto’s op om er misschien een te bekijken.
Laad de grote versie dus pas bij een klik. Dat is precies waar lazy loading voor bedoeld is.
Het tweede is de bibliotheek die je gebruikt. Sommige oudere oplossingen brengen een flinke hoeveelheid code mee voor iets wat tegenwoordig veel lichter kan.
Bij een moderne opzet is een lightbox nauwelijks een belasting. Vraag je bouwer welke oplossing hij gebruikt en wat die weegt. Meer over dat afwegen lees je bij pagespeed.
Vraag je bouwer welke oplossing hij gebruikt en wat die weegt. Bij oudere sites zit er soms een bibliotheek in die zwaarder is dan je hele pagina. Laat hem die vraag beantwoorden met een meting en niet met een indruk.
Werkt het vergroten van foto’s op jouw site niet lekker op een telefoon? Stuur me de link via het formulier hieronder. Ik kijk of het venster te sluiten is, of het meeschaalt en wat het je kost aan laadtijd. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Overlay, modaal venster, vergrootweergave
