Je bezoeker leest je pagina en scrolt naar beneden. Halverwege raakt hij overtuigd en wil hij contact opnemen. Dan moet hij helemaal terug naar boven om je menu te vinden. Dat is een kleine handeling die veel mensen niet meer doen.
Een meescrollend menu lost dat op. Je navigatie blijft in beeld, waar iemand ook is.
Het is een van de weinige toevoegingen die vrijwel altijd iets oplevert. Mits je hem klein houdt.
Daar gaat het namelijk mis. Een balk van honderdvijftig pixels hoog eet op een telefoon een derde van je scherm op.
Een element dat blijft staan terwijl de rest doorscrolt.
Wat is sticky?
Sticky betekent dat een onderdeel blijft in beeld terwijl de pagina eronder doorscrolt. Meestal is dat je menu.
Je ziet het ook bij een knop, een zijkolom of een balk met je telefoonnummer. Meer over die opbouw lees je bij navigatie.
Het verschil met fixed
Bij fixed staat een element vanaf het begin vast op zijn plek. Bij sticky begint het gewoon in de pagina en plakt het pas vast zodra je erlangs scrolt.
Dat tweede oogt natuurlijker. In CSS zijn het twee verschillende instellingen.
Wanneer het helpt
Vier goede toepassingen
Je hoofdmenu op een lange pagina.
Een knop met bel of vraag offerte aan.
Een inhoudsopgave bij een lang artikel.
Een winkelmandje tijdens het bestellen.
Die tweede levert het meest op bij diensten waar mensen bellen. Een vastgezette knop onderin het scherm werkt op een telefoon uitstekend.
Waarom dat werkt
Omdat je de drempel weghaalt op het moment dat iemand overtuigd raakt. Dat moment is niet te voorspellen.
Dus zorg je dat de mogelijkheid er altijd is. Meer daarover lees je bij call-to-action.
Waar het misgaat
Bij de hoogte. Elke pixel die je vastzet, is een pixel minder om te lezen.
Op een laptop met een laag scherm valt dat op. Op een telefoon is het pijnlijk, want daar heb je toch al weinig schermruimte.
Mijn vuistregel
Maak de balk kleiner zodra iemand begint te scrollen. Je logo mag dan krimpen en de padding mag omlaag.
Zo houd je je menu bereikbaar zonder je pagina op te eten. Dat is een kwestie van een paar regels code.
Op mobiel
Daar zou ik nog strenger zijn. Twee dingen tegelijk vastzetten is er een te veel.
Kies dus: of je menubalk bovenin, of een knop onderin. Meer over die keuzes lees je bij mobile first.
Let op het toetsenbord
Klapt er een toetsenbord open bij een formulier, dan schuift een vastgezette balk soms over je invoerveld. Test dat op een echt toestel.
Dat is een fout die je op een computerscherm nooit ziet. En hij kost je direct aanvragen.
De toegankelijkheidskant
Een vastgezette balk kan een link overdekken waar iemand met de tabtoets naartoe springt. De focus staat dan onder je menu.
Dat is een bekend probleem met een simpele oplossing. Meer daarover lees je bij accessibility.
Bij het vastzetten van een zijkolom
Zorg dat hij nooit hoger is dan het scherm. Bij het zijkolom vastzetten kan er anders een deel onbereikbaar worden.
Dat gebeurt vooral bij lange inhoudsopgaven. Geef zo’n kolom dan zijn eigen schuifbalk.
Test het op een echt toestel
Vul zelf een keer je eigen contactformulier in op je telefoon. Dat is de enige eerlijke test.
Een versmald venster op je computer laat de indeling zien maar niet de bediening. En juist daar gaat het mis.
Een knop, niet twee
Twee knoppen naast elkaar onderin je scherm werken tegen elkaar in. Dan kiest iemand geen van beide.
Kies de handeling die het meest oplevert en zet die vast. De rest staat gewoon in je pagina.
Waarom het moment niet te voorspellen is
De een is na twee alinea’s overtuigd, de ander pas na je hele referentielijst. Je weet niet wanneer dat omslaat.
Dus zorg je dat de mogelijkheid er altijd is, waar iemand ook staat in je verhaal.
Krimp je balk bij het scrollen
Je logo mag kleiner en je witruimte mag omlaag zodra iemand naar beneden gaat. Dat scheelt tientallen pixels.
Zo blijft je menu bereikbaar zonder je pagina op te eten. Meer over dat soort keuzes lees je bij frontend.
Meer vragen over Sticky
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een sticky menu?
Is een sticky menu goed voor je website?
Hoeveel ruimte mag een sticky menu innemen?
Werkt sticky ook op mobiel?
Wat is een sticky call-to-action?
Wat is het verschil tussen sticky en fixed?
Wat is een sticky menu?
Bij fixed staat een element vanaf het begin vast op zijn plek. Het beweegt nooit mee met de pagina.
Bij sticky begint het gewoon in de pagina en plakt het pas vast zodra je erlangs scrolt.
Dat tweede oogt natuurlijker. Je menu staat eerst op zijn plek en blijft daarna hangen.
In de praktijk zijn het twee verschillende instellingen in je opmaakcode. Je bouwer kiest welke bij je ontwerp past.
Voor jou als ondernemer maakt de term weinig uit. Waar het om gaat, is of het element in beeld blijft en hoeveel ruimte het inneemt.
Je hoeft dit onderscheid niet zelf te maken. Het helpt wel bij een gesprek met je bouwer.
Waar het om gaat, is of het element in beeld blijft en hoeveel ruimte het inneemt. Die twee vragen bepalen alles. Laat je bouwer kiezen wat bij je ontwerp past. Voor jou telt alleen of het element in beeld blijft en hoeveel ruimte het kost.
Wat is het verschil tussen sticky en fixed?
Sticky betekent dat een onderdeel blijft staan terwijl de pagina eronder doorscrolt. Meestal is dat je menu.
Je ziet het ook bij een knop, een zijkolom of een balk met je telefoonnummer.
Het probleem dat het oplost is simpel. Je bezoeker leest je pagina, raakt halverwege overtuigd en wil contact opnemen.
Zonder meescrollend menu moet hij helemaal terug naar boven. Dat is een kleine handeling die veel mensen niet meer doen.
Het is een van de weinige toevoegingen die vrijwel altijd iets oplevert. Mits je hem klein houdt, want elke pixel die je vastzet is een pixel minder om te lezen.
Kijk zelf een keer of je menu meescrollt op je eigen site. Zo niet, dan is dat een verbetering van een uur.
Let daarbij meteen op de hoogte. Een balk die een derde van je telefoonscherm opeet, kost je meer dan hij oplevert. Vraag je bouwer of hij de balk kan laten krimpen bij het scrollen. Dat is een kleine ingreep met veel effect op mobiel.
Hoeveel ruimte mag een sticky menu innemen?
Zo weinig mogelijk. Elke pixel die je vastzet, is een pixel minder om te lezen.
Op een laptop met een laag scherm valt dat op. Op een telefoon is het pijnlijk, want daar heb je toch al weinig ruimte.
Een balk van honderdvijftig pixels hoog eet op een telefoon een derde van je scherm op. Dat is niet te verdedigen.
Mijn vuistregel: maak de balk kleiner zodra iemand begint te scrollen. Je logo mag dan krimpen en de witruimte mag omlaag.
Zo houd je je menu bereikbaar zonder je pagina op te eten. Dat is een kwestie van een paar regels code.
Meet het een keer op je telefoon: hoeveel van je scherm is er nog over voor je tekst?
Laat je balk krimpen zodra iemand begint te scrollen. Dat is een kwestie van een paar regels code en het scheelt tientallen pixels. Reken op een balk die niet hoger is dan tachtig pixels op een telefoon. Alles daarboven gaat ten koste van je tekst.
Werkt sticky ook op mobiel?
Ja, en daar zou ik nog strenger zijn. Twee dingen tegelijk vastzetten is er een te veel.
Kies dus: of je menubalk bovenin, of een knop onderin. Niet allebei.
Let daarnaast op het toetsenbord. Klapt dat open bij een formulier, dan schuift een vastgezette balk soms over je invoerveld.
Dat is een fout die je op een computerscherm nooit ziet. En hij kost je direct aanvragen.
Test dat dus op een echt toestel en niet in een versmald venster. Vul zelf een keer je eigen contactformulier in op je telefoon.
Zet op mobiel nooit twee dingen tegelijk vast. Kies je menubalk bovenin of een knop onderin.
Vul zelf een keer je contactformulier in op je telefoon. Dan zie je meteen of je balk over je invoerveld schuift. Doe die test met een echt toestel en niet in een versmald venster. Een toetsenbord dat openklapt zie je op je computer nooit.
Wat is een sticky call-to-action?
Dat is een knop die in beeld blijft, meestal onderin op een telefoon. Bijvoorbeeld bel ons of vraag offerte aan.
Die levert het meest op bij diensten waar mensen bellen. Denk aan spoed, reparatie of zorg.
Het werkt omdat je de drempel weghaalt op het moment dat iemand overtuigd raakt. Dat moment is niet te voorspellen.
Dus zorg je dat de mogelijkheid er altijd is, waar iemand ook staat in je verhaal.
Houd hem wel smal en gebruik er een. Twee knoppen naast elkaar onderin je scherm werken tegen elkaar in, en dan kiest iemand geen van beide.
Gebruik er een en niet twee, want twee knoppen naast elkaar werken tegen elkaar in.
Kies de handeling die het meest oplevert. Bij spoeddiensten is dat bellen, bij advies meestal een offerteaanvraag. Houd de knop bovendien smal en zet er een korte tekst in. Bel ons werkt beter dan neem vrijblijvend contact op.
Twijfel je of een meescrollend menu op jouw site iets toevoegt, of neemt je huidige balk te veel ruimte in? Stuur me de link via het formulier hieronder. Ik kijk hoeveel scherm het kost op mobiel en wat er beter kan. Vermeld je plaats, dan weet ik meteen waar je zit.
