Responsive design: wat het is en waarom je het zou moeten gebruiken

Met de komst van mobiel internet is het WorldWide Web veranderd. De mobiele apparaten van tegenwoordig (laptops, tablets, smartphones) maken het mogelijk om het internet op te gaan op elke willekeurige plaats.
Dat is wel eens anders geweest. Toen was je gebonden aan je desktop-PC, die ergens thuis op een vaste plaats (in de huiskamer, vaak op zolder) stond opgesteld.

Bij de opkomst van internet, halverwege de jaren negentig van de vorige eeuw, hadden de meeste beeldschermen een resolutie van 640 x 480 of 800 x 600 beeldpunten. Tablets en smartphones bestonden nog niet.
Op het moment dat de eerste versie van dit artikel van dit geschreven wordt, april 2014, is 1080 x 1920 gangbaar voor een desktop-PC. Op dit moment gangbare smartphones hebben (afhankelijk van het type) beeldschermresoluties van tenminste 320 x 480 of beter. Moderne smartphones worden geleverd met resoluties die je ook bij 'gewone' desktop computers aantreft.

Voor het mobiele internet-gebruik zijn er momenteel veel verschillende apparaten op de markt. Dat betekent in de praktijk: beeldschermen met veel verschillende resoluties. Dat heeft weer gevolgen voor het ontwerp van je website.
Voor een optimale "beleving" van je website zou je voor elke beeldresolutie (lees: elk apparaat) een aparte website moeten bouwen. Dat is ondoenlijk, alleen al vanwege het onderhoud. Daarbij neemt het aantal verschillende apparaten (= beeldresoluties) nog steeds toe.

Het mooiste zou zijn als de opmaak cq. het ontwerp van je website zichzelf aanpast aan de beschikbare afmetingen van het scherm. Dat is responsive design.

Waarom zou je dit moeten gebruiken?
De kleine beeldschermen van smartphones vragen een ander webdesign dan een breedbeeldscherm. Het is niet doenlijk om voor elk apparaat/beeldscherm een apart ontwerp te maken.

Moet ik mijn website gaan ombouwen?
Als je doelgroep voornamelijk gebruik maakt van tablets en smartphones, zou je kunnen overwegen om je site om te bouwen. Maar als als de meeste bezoeken van je site van een laptop of desktop komen, kun je het beter nalaten. Het is nogal wat werk, zeker voor een grote site.
Ik heb geprobeerd om deze site responsive te maken. Ik ben er maar mee gestopt, want het is een gigantische klus (Deze site bestaat uit meer dan 700 HTML-bestanden). Alleen de Fractal-sectie heb ik responsive gemaakt.

Als je nieuwe site opzet kun je die het beste 100% responsive maken. Ik gebruik daarvoor het platform Bootstrap, zie het item Werken met Bootstrap. Een door mij op deze wijze gebouwde sites zijn www.vasteburcht.nl en www.webmasterij.nl.

Het is overigens niet zo dat elke website helemaal responsive moet te zijn. Dat hangt af van je doelgroep. Het portfolio van een grafisch ontwerper vráágt om een groot scherm. Een smartphone kan hoogstens een indruk geven van de site. Een dergelijke site stelt maar een deel van de content beschikbaar voor een smartphone. Zaken als Flash worden door de meeste smartphones niet ondersteund en dat zal ook nooit gaan gebeuren.
Websites die bijv. reisinformatie tonen, zoals ns.nl en 9292.nl, horen juist wel helemaal responsive te zijn omdat juist dit soort informatie via smartphones én desktop computers moet kunnen worden opgevraagd.
Dit laatste geldt ook voor nieuwssites zoals nu.nl

Hoe pak ik het aan?
Responsive design is volgens de beschrijvingen op internet alleen mogelijk voor browsers die CSS3 ondersteunen. Op het moment dat dit wordt geschreven zijn dat alle veelgebruikte browsers. Voor oudere browsers moet je nog speciale maatregelen nemen.

Toch kun je zonder CSS3 een heel eind komen. Zo zou je deze website adaptive (aanpassend of: beperkt responsive) kunnen noemen.
Dat heb ik bereikt met behulp van frames. Zie ook het item Informatie van de website in het midden van het scherm houden. Als je geen frames wilt gebruiken kun je ze natuurlijk ook simuleren. Zie de items Frames simuleren met CSS en Informatie van de website in het midden van het scherm houden II: aanpak met CSS.

Maak in elk geval de informatiebreedte niet breder dan 800 px. Mijn persoonlijke ervaring (met deze en andere websites) is dat het bij 800 px past op de meeste schermen, van breedbeeld tot ‘stevige’ smartphone.

Meer informatie
Het voert te ver om responsive design op deze website diepgaand te behandelen. Daarvoor heeft het teveel aspecten en is het nog te veel in ontwikkeling. Op internet is er genoeg over te vinden. Google maar eens op responsive design tutorial, dan is er zeker wat van je gading bij. Het meeste is (helaas) in het Engels.

Opmerking
Je hoort ook wel eens de term "adaptive design" Dat is bijna hetzelfde als responsive design, maar dan beperkter.