Voor iedereen die zich niet professioneel met webdesign, internet marketing en zoekmachineoptimalisatie bezighoudt, is het flink bijbenen om alle nieuwe technieken en hun exotische benamingen te begrijpen. Responsive webdesign is zo'n techniek. In de basis gaat dit over een website die zich visueel aanpast aan het apparaat waarop het wordt getoond.
Soorten schermen
De tijd dat webdesigners een website konden bouwen die er op elk beeldscherm hetzelfde uitzag, is definitief voorbij. Websites voor een 14, 15, 17 of 19 inch scherm hadden allemaal dezelfde verhouding en werden slechts steeds een maatje groter. Tegenwoordig zijn er tientallen soorten beeldschermen met evenveel soorten resoluties. Toch zijn ze te verdelen in een drietal groepen:
- 'normale' beeldschermen en laptops
- tablets (waaronder iPads)
- smartphones, staand (smal scherm) en liggend (breed scherm)
Het ongemak van één website voor alle schermen
Met de explosieve groei van geavanceerde mobiele telefoons (smartphones) in de periode 2010 t/m 2012 is de internetwereld behoorlijk veranderd. Website worden niet alleen meer bekeken op desktop pc's en laptops, maar op kleine schermen die in je broekzak passen. Het één-op-één verkleinen van een 'normale website' naar een website op zakformaat was niet bepaald gebruiksvriendelijk. Bezoekers van een website waren continue aan het schuiven en zoomen om stukjes van de website zichtbaar te krijgen. Gelukkig is dit met hedendaagse technieken zoals responsive webdesign te voorkomen.
Responsive websites passen zich aan op de breedte van een scherm
Wanneer een stukje techniek op de website heeft bepaald op welk apparaat en met welke resolutie hij wordt getoond dan kan de website zich vloeiend aanpassen aan het scherm.
Bij responsive webdesign wordt gebruik gemaakt van zogenaamde 'grids' (blokken). Deze blokken kunnen makkelijk van breedte veranderen en op verschillende plaatsen worden getoond. Is een scherm breed dan komen de blokken naast elkaar; is het scherm smal dan komen ze onder elkaar. Dezelfde informatie wordt op een andere manier getoond.
Voordelen van responsive websites:
- minder zoomen
- minder scrollen van links naar rechts
- sneller laden
- eenvoudiger navigeren
- optimale gebruikerservaring
- uw boodschap komt beter over bij de bezoeker
- u laat zien dat u met uw tijd (en dus uw potentiele klant) meegaat.
Verschil tussen responsive websites en mobiele websites
Voor dat over responsive webdesign werd gesproken, waren er zogenaamde 'mobiele websites'. Dit wordt tegenwoordig trouwens 'adaptive webdesign' genoemd. Adaptive webdesign is gebaseerd op de mogelijkheden en resolutie van het apparaat en toont de meest geschikte versie van een website. Niet alleen wordt de inhoud verschaald en anders weergegeven; ook worden elementen (zoals video's en slideshows) aan- of uitgezet naargelang het apparaat of resolutie waarop een site wordt bekeken. En een telefoonnummer komt bijvoorbeeld op een mobile site nadrukkelijker naar voren dan op de tablet variant. Feitelijk zijn dit dus extra websites die worden gebouwd naast de reguliere website. Kostbaar dus.
Responsive webdesign is en blijft één website die zich aanpast aan de breedte van een apparaat.
Mobile First
Als de ontwikkelingen zich voortzetten zoals de afgelopen jaren, dan worden websites voor smartphones en tablet leidend ten opzichte van 'ouderwetse' desktop websites. We zullen dan niet meer spreken over responsive webdesign, maar over 'normale websites' waarbij de desktop varianten 'extended' of 'grote websites' zullen worden genoemd. Er gaat dus nog heel wat veranderen.