In deze stap leg je responsive ontwerp vast met flexibele grids, vaste breakpoints en touch-vriendelijke elementen, zodat je site werkt op elk schermformaat.

Een responsive website past zich automatisch aan elk schermformaat aan, van smartphone tot grote desktop, zonder dat je losse versies hoeft te bouwen. Dat gebeurt via flexibele grids, percentages in plaats van vaste pixels en CSS media queries die je layout aanpassen op vooraf bepaalde breakpoints. In deze les leer je hoe je responsive ontwerpt in plaats van bouwt en welke breakpoints werken.

Leren: van vaste pixels naar flexibele systemen

In deze video leg ik uit hoe responsive design werkt op systeemniveau en welke vier breakpoints voor de meeste sites volstaan.

Begrijpen: hoe maak je een website responsive?

Begin niet met losse versies, maar met een flexibele basis. Gebruik percentages, flex en grid in plaats van vaste breedtes. Definieer drie tot vier breakpoints (mobiel, tablet, desktop, eventueel grote desktop) waarop je layout aanpast. Test de tussenwaardes ook, want sommige tablets in landscape vallen tussen de breakpoints in en moeten alsnog goed werken. Pas knoppen, formulieren en navigatie aan voor touch-bediening op kleinere schermen.

Webwrk wijst op de regel die de meeste sites verbetert: ontwerp eerst voor het smalste scherm en schaal daarna op. Wie eerst desktop ontwerpt en daarna inkrimpt, eindigt vaak met een mobiele site die niet helemaal klopt. Cursus WP voegt daar concrete breakpoints aan toe: 768 pixels (tablet portrait), 1024 pixels (tablet landscape of kleine desktop) en 1280 pixels (gangbare desktop) volstaan voor de meeste sites. Eén extra breakpoint voor grote schermen kan helpen, maar zes verschillende breakpoints worden onbeheerbaar.

De zes onderdelen van een werkbare responsive setup:

Flexibele basis. Percentages, flex en grid in plaats van vaste pixel-breedtes.
Drie tot vier breakpoints. Mobiel, tablet, desktop, eventueel grote desktop, niet meer.
Touch-vriendelijke knoppen. Minstens 44 pixels hoog, voldoende padding voor duim-bediening.
Aangepaste navigatie. Hamburger op mobiel, volledige nav op desktop, beide consistent.
Beelden in srcset. Verschillende beeldformaten voor verschillende schermen voor laadsnelheid.
Test op werkelijke apparaten. Niet alleen browser-resize, ook echte telefoons en tablets controleren.

Nextmnday herinnert eraan dat responsive niet eens-en-voor-altijd is. Schermformaten verschuiven (vouwbare telefoons, ultrawides), browsers veranderen en je doelgroep koopt nieuwe apparaten. Test je site één keer per kwartaal op vijf populaire apparaten uit je doelgroep, zodat je niet pas ontdekt dat hij ergens stuk gaat als een klant het meldt.

Toepassen: de blueprint

Vul de Responsive Blueprint in: één A4 met je gekozen breakpoints, knopgroottes, navigatieaanpak en beeldstrategie. Eén pagina, in vijftien minuten beslist.

De eerste actie kost twee minuten: open je homepage op je telefoon en draai hem in landscape (horizontale stand). Klopt de layout nog of springen er elementen door elkaar? De plek waar het breekt is je eerste opdracht voor responsive verbetering deze week.