Hoe werkt responsive design?
Ethan Marcotte bedacht de term in 2010, in een artikel op A List Apart. Hij beschreef flexibele grids, flexibele afbeeldingen en media queries. Moderne CSS maakt het nu een stuk eenvoudiger. De belangrijkste onderdelen:
- Viewport-metatag: een regel in de head waarmee de browser de breedte van het scherm aanhoudt. Zonder die tag toont een telefoon de pagina uitgezoomd.
- Flexibele lay-out: technieken als flexbox, CSS grid en multicol laten kolommen meebewegen met de beschikbare ruimte.
- Media queries: CSS-regels die alleen gelden vanaf een bepaalde schermbreedte. Het punt waarop de lay-out omslaat, heet een breakpoint.
- Flexibele afbeeldingen: met
max-width: 100%wordt een afbeelding nooit breder dan de ruimte eromheen.
<meta name="viewport" content="width=device-width, initial-scale=1">Voorbeeld: een responsive productoverzicht
Bakkerij Van Dam toont de taarten online in een raster. Op een telefoon staan ze in één kolom onder elkaar. Op een tablet worden het twee kolommen, op een laptop vier. De HTML en de URL blijven gelijk, alleen de CSS verandert:
.taarten { display: grid; grid-template-columns: 1fr; }
@media (min-width: 600px) { .taarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .taarten { grid-template-columns: repeat(4, 1fr); } }Dit heet mobile first: je begint met de smalle lay-out en voegt kolommen toe zodra er ruimte voor is.
Wat zegt Google over responsive design?
Google gebruikt de mobiele versie van je site om te indexeren en te ranken. Die versie haalt Google op met de smartphone-crawler. Dat heet mobile-first indexing.
Voor een mobielvriendelijke site noemt Google drie opties:
- Responsive design: dezelfde HTML op dezelfde URL voor elk apparaat.
- Dynamic serving: dezelfde URL, maar de server stuurt per apparaat andere HTML.
- Aparte URL’s: een losse mobiele versie op een eigen adres.
Google raadt responsive design aan, omdat dit het makkelijkst te bouwen en te onderhouden is. Content en metadata zijn op mobiel en desktop dan vanzelf gelijk. Dat scheelt fouten bij technische SEO.
Veelgestelde vragen over Responsive design
Wat is het verschil tussen responsive en mobielvriendelijk?
Mobielvriendelijk betekent dat een site goed werkt op een telefoon. Responsive design is één manier om dat te bereiken. Een aparte mobiele site kan ook mobielvriendelijk zijn.
Is responsive design nodig voor SEO?
Een mobiele versie is niet verplicht om in Google te komen. Wel raadt Google die sterk aan, omdat Google de mobiele versie indexeert. Responsive design is daarbij de aanbevolen aanpak.
Wat is een breakpoint?
Een breakpoint is de schermbreedte waarop de lay-out verandert, bijvoorbeeld van één naar twee kolommen. Je stelt het in met een media query in je CSS.