Wat is responsive webdesign?

Wat is responsive webdesign?

Bij responsive webdesign bouw je één website die op elk apparaat goed werkt. De pagina herkent als het ware hoeveel ruimte er is en herschikt zich daarnaar: kolommen die naast elkaar staan op een breed scherm, stapelen op een telefoon onder elkaar. De gebruiker hoeft niet in te zoomen of horizontaal te scrollen; alles past zich vanzelf aan.

Waar komt de term vandaan?

De term komt van Ethan Marcotte, die hem in 2010 introduceerde in een artikel op A List Apart. Daarvoor bouwden organisaties vaak een aparte mobiele website naast de gewone. Dat betekende twee versies onderhouden, twee keer aanpassen, twee keer fouten herstellen. Marcotte stelde voor om in plaats daarvan één flexibele site te maken die zich aanpast. Dat idee werd de standaard die we nu vanzelfsprekend vinden.

Hoe werkt responsive webdesign technisch?

Drie technieken doen samen het werk.

Flexibele grids.

Een grid is het onzichtbare raster waarop een pagina is opgebouwd. Bij responsive design werkt dat grid met verhoudingen in plaats van vaste maten. Een kolom is bijvoorbeeld geen 600 pixels breed, maar vijftig procent van de beschikbare ruimte. Wordt het scherm smaller, dan krimpt de kolom mee. Zo blijft de verhouding kloppen op elk formaat.

Schaalbare afbeeldingen.

Afbeeldingen moeten meeschalen met hun container, anders breken ze de lay-out op kleine schermen. Een goede responsive site levert bovendien per apparaat de juiste beeldgrootte aan: een telefoon krijgt een lichtere afbeelding dan een breed beeldscherm. Dat scheelt laadtijd, en laadtijd telt mee voor zowel gebruik als vindbaarheid.

CSS media queries en breakpoints.

Een media query is een regel in de CSS die zegt: bij deze schermbreedte gelden deze opmaakregels. Het punt waarop de lay-out verandert, heet een breakpoint. Onder een bepaalde breedte klapt het menu bijvoorbeeld in tot een hamburgericoon, en stapelen de kolommen. Breakpoints kies je op basis van waar de lay-out daadwerkelijk gaat knellen, niet op basis van specifieke apparaten.

Responsive versus adaptive (en "reactive").

Drie termen die door elkaar lopen, terwijl er maar twee echt bestaan.

Responsive: vloeiend meeschalen.

Responsive design schaalt vloeiend mee met elk scherm via flexibele grids en percentages. Er is geen vast aantal lay-outs; de pagina past zich continu aan aan de beschikbare ruimte. Dit is de standaard in modern webdesign en doorgaans het onderhoudsvriendelijkst.

Adaptive: vaste lay-outs per breakpoint.

Adaptive design werkt anders: het laadt vaste lay-outs per vooraf bepaald breakpoint. In plaats van vloeiend mee te schalen, springt de pagina naar een van een handvol vooraf ontworpen versies. Dat kan in specifieke gevallen sneller zijn, maar vraagt meer onderhoud omdat je meerdere vaste lay-outs beheert.

"Reactive": geen vakterm, meestal responsive bedoeld.

"Reactive web design" is geen gangbare vakterm. In de praktijk bedoelt men vrijwel altijd responsive webdesign. Soms verwijst "reactive" naar reactieve programmeertechnieken, zoals die in React voorkomen, maar dat gaat over hoe code op data reageert, niet over hoe een lay-out meeschaalt met het scherm. Kom je de term tegen, ga er dan van uit dat responsive bedoeld wordt.

Waarom is responsive belangrijk?

De winst zit in twee dingen tegelijk: gebruik en vindbaarheid.

Gebruikerservaring op mobiel.

Op een telefoon is geen ruimte voor fouten. Een gebruiker die moet inzoomen, knoppen niet kan raken of horizontaal moet scrollen, is binnen seconden weg. Een responsive site voorkomt dat door zich aan te passen aan het kleine scherm, met leesbare tekst en knoppen die groot genoeg zijn om te raken.

SEO en mobile-first indexing.

Google gebruikt mobile-first indexing: de mobiele versie van je site bepaalt grotendeels je positie in de zoekresultaten. Een responsive website die snel laadt en goed functioneert op mobiel, scoort beter op Core Web Vitals en op gebruikssignalen. Daarmee werkt responsive design direct door in je vindbaarheid.

Responsive in maatwerk software.

Responsive is bij Cube geen optie maar een uitgangspunt. Elke interface wordt eerst voor mobiel ontwikkeld en daarna opgeschaald, omdat onderdelen toevoegen makkelijker is dan ze weghalen. Of het nu om een website gaat of om een maatwerk webdesign binnen een groter platform: het werkt op elk scherm. Hoe webdesign als geheel in elkaar zit en hoe de front-end development dit technisch waarmaakt, lees je in de bijbehorende artikelen.