⚙️ Specificaties Sessie
-
Datum: 24-12-2025
-
Onderwerp: Mobile Design & SEO
-
Type: Quick Q&A
👤 Mediadeboer: Wat voor maat is een hero header voor mobiel?
🤖 Gemini: Een hero header voor mobiel heeft geen vaste standaardmaat, maar er zijn wel best practices die vaak worden gebruikt:
-
-
Breedte: meestal 100% van het scherm (responsief), dus ± 360–430px breed afhankelijk van het toestel.
-
Hoogte: meestal tussen 400–600px. Dit zorgt ervoor dat de hero groot genoeg is om op te vallen, maar niet zo groot dat de gebruiker eerst moet scrollen om iets te zien.
-
Beeldverhouding: vaak rond de 4:5 of 3:4, omdat liggende beelden op mobiel snel te klein worden of afgesneden.
Tip: Gebruik mobile-first design. Dat betekent dat je de tekst (headline + call-to-action) altijd leesbaar en klikbaar houdt binnen die eerste viewport.
-
-
Zorg ook dat belangrijke delen van je afbeelding (bijvoorbeeld een product of gezicht) midden of bovenaan staan, omdat onderaan vaak knoppen of tekst over het beeld komen.
Wil je dat ik een concreet CSS-voorbeeld voor je maak van een hero header die op mobiel altijd goed schaalt?
👤 Mediadeboer: Ik heb iemand horen zeggen dat je beter tekst niet op een banner kunt doen maar via de webbuilder, en dat je de achtergrondafbeelding alleen doet via Canva.
Maar waarom heeft Canva dan allemaal tekst in hun banners?
🤖 Gemini: Dat is een slimme observatie.
Er zit een groot verschil tussen hoe ontwerp-tools zoals Canva werken en hoe een website technisch en SEO-matig in elkaar zit:
1. In Canva Alles wat je maakt (afbeelding + tekst + shapes) wordt uiteindelijk platgeslagen tot één enkel plaatje (JPG/PNG).
Handig voor social media of drukwerk, maar zoekmachines kunnen die tekst niet lezen. Ook screenreaders voor slechtzienden kunnen er niets mee.
2. Op een website Het is beter om de tekst in de webbuilder te plaatsen en de afbeelding alleen als achtergrond te gebruiken. Zo blijft de tekst:
-
Leesbaar voor zoekmachines (SEO-voordeel).
-
Schaalbaar en beter zichtbaar op mobiel (want tekst blijft vector en wordt geen onscherpe pixels).
-
Toegankelijk voor screenreaders en vertaaltools.
-
Makkelijker aan te passen zonder opnieuw een afbeelding te maken.
Waarom gebruikt Canva dan tóch tekst in hun banners? Omdat ze zich richten op visueel ontwerp en niet op webtechniek.
Hun doelpubliek maakt er vaak social media posts, flyers of presentaties mee — daar is SEO of toegankelijkheid geen issue, het gaat puur om hoe het eruitziet.
Conclusie: Voor websites is de vuistregel: beeld = sfeer, tekst = in de builder.
Je kunt Canva dus prima gebruiken voor een mooie achtergrond, maar de titel, ondertitel en knop zet je er in de webbuilder overheen.
