Wat is responsive webdesign?

Een responsive website is een site die goed werkt op de smartphone, tablet en desktop. Hij past zich aan naar de grootte van het scherm. Responsive webdesign is dé standaard en wordt aanbevolen door Google.

Het pre-responsive tijdperk

Vroeger had elke websitebezoeker nagenoeg hetzelfde formaat scherm. Een 17 inch monitor, bijna vierkant, met een resolutie van 800 bij 600 pixels. Websites konden ‘pixel-precies’ worden gebouwd voor dat formaat.

In de loop der tijd werden de schermen groter, maar het aantal varianten was nog te overzien. De mogelijke schermresoluties waren op 1 hand te tellen en we maakten websites die op 95% van de scherm goed toonden.

Later kwamen de telefoons, tablets en televisies met internet. De ‘pixel-precies’ methode werkte niet meer.

Aparte mobiele website

Er is een tussenperiode geweest waarin aparte mobiele websites gebouwd werden. Vaak draaide zo’n website op een ‘m.’-adres. Bijvoorbeeld m.webdesignaanzee.nl. Je kon toen nog aannemen dat een bezoeker óf de desktop óf een telefoon gebruikte. Verkeer voor de telefoon kon je detecteren en wegleiden naar ‘m.’. Ook dat bleek niet houdbaar toen het aantal soorten apparaten uitbreidde.

De mobiele website bleek overigens om meer redenen onwenselijk. Je had namelijk twee websites inhoudelijk en technisch te onderhouden. Ook hadden zoekmachines zoals Google te maken met twee websites met vrijwel exact dezelfde inhoud.

Responsive webdesign

In 2010 kwam responsive webdesign om de hoek kijken. Bij responsive webdesign werken we niet meer met exacte pixel-afmetingen, maar we gebruiken percentages. In plaats van 800 pixels breed, zeggen we 100% breed. Een kolom die voorheen 200 pixels breed was, is in de responsive aanpak 25% breed.

Omdat die 25% kolombreedte op mobiel te klein is, zijn er ‘breekpunten’ geïntroduceerd. De websitebouwer kan instellen: als een scherm kleiner is dan 800 pixels, dan moeten de 25%-kolommen niet naast elkaar, maar ónder elkaar getoond worden in 100% breedte.

De responsive aanpak werd breed geadopteerd en Google raadde het aan boven een apart mobiele website.

Niet alleen een kwestie van formaat

Responsive is niet enkel en alleen een formaat kwestie. Er zijn meer eigenschappen waar je als webbouwer op moet letten:

• Sommige apparaten hebben touchscreen. Je kunt dus niet met de muisaanwijzer over iets heen bewegen. Dit is belangrijk om te realiseren wanneer je werkt met elementen die zichtbaar worden zodra je er met de muis overheen gaat, zoals een tooltip.
• Gebruikers werken mogelijk via een mobiele verbinding, die niet altijd even goed is. Houd daar rekening mee met de bestanden die je meestuurt met je webpagina.
• Gebruikers kunnen onderweg zijn en hebben wellicht geen behoefte aan longreads. Dat betekent niet dat je geen lange tekst mag plaatsen, maar je zou wel het scannend lezen kunnen ondersteunen.
• Op de smartphone is de kans groter dat een bezoeker op zoek is naar contactgegevens. De bezoeker heeft bovendien de mogelijkheid om meteen te bellen. Dit kan bijvoorbeeld verwerkt worden in de header of footer van de website.

Ook interessant: Hoe ontwerp je een mooie strakke website?