Wat is responsive design?

Responsive design betekent dat je website zich aanpast aan de breedte van het scherm. Kolommen vallen onder elkaar, tekst herschikt zich en afbeeldingen krimpen mee.

Het is één website die overal werkt, niet een aparte versie per apparaat.

Sinds ongeveer 2015 is het de standaard.

Hoe het werkt

Je opmaak bevat regels die pas gelden boven of onder een bepaalde breedte. Die grenzen heten breekpunten.

Meer daarover lees je bij wat breekpunten zijn.

Wat er verandert per breedte

Het aantal kolommen, de lettergroottes, de ruimte tussen blokken en of je menu uitklapt of uitgeschreven staat.

Meer daarover lees je bij css.

Waarom het de standaard werd

Omdat het aantal schermformaten explodeerde. Een aparte versie per formaat is niet vol te houden.

Meer daarover lees je bij mobile first.

Mijn vuistregels

1. Eén site, geen aparte mobiele versie.
2. Ontwerp vanaf de kleinste breedte.
3. Drie breekpunten is genoeg.
4. Test op een echt toestel.

Die tweede maakt het verschil tussen responsive en prettig.

Wat Google ervan vindt

Die verwacht één site die op elk scherm werkt en beoordeelt je op de mobiele weergave.

Meer daarover lees je bij pagespeed.

Wat het niet betekent

Dat je site op elk scherm hetzelfde oogt. Aanpassen is juist het punt.

Meer daarover lees je bij het verschil met een aparte mobiele site.

Veelgestelde vragen hierover