Responsive webdesign: één site voor meerdere apparaten

Vandaag de dag wordt een gemiddelde website bezocht met laptops, desktops, smartphones en tablets. Allemaal met andere beeldschermformaten en mogelijkheden. Deze wildgroei aan verschillende apparaten lijkt de nachtmerrie voor iedere website-eigenaar die geen grijze haren wil kweken. Gelukkig wordt de techniek achter websites ook steeds slimmer. Responsive webdesign brengt uitkomst.

Volgens een recent onderzoek van Telecompaper heeft 58 procent van de Nederlanders tussen de 15 en 65 jaar een smartphone op zak. Tablets maken daarnaast ook een zeer snelle opmars. Waren er in december van 2011 nog 'slechts' 1,7 miljoen landgenoten met een tablet, dit jaar is dat aantal al bijna verdubbeld. Dikke kans dat de bezoeker die overdag je site bezoekt via een laptop, dit 's avonds op de bank doet met zijn iPad, of onderweg in de trein op z'n smartphone.

Sites bouwen voor meerdere apparaten

Het loont dus om bij het bouwen van je website rekening te houden met de enorme diversiteit aan apparaten. Maar het is ondoenlijk om voor ieder apparaat een apart ontwerp te laten maken. En zodra de fabrikanten weer iets met een groter scherm lanceren, is je met zorg gebouwde template weer achterhaald. Responsive webdesign moet dit makkelijker maken door sites als het ware mee te laten groeien met het formaat van het apparaat waarop ze bekeken worden.

Slimme websites passen zich aan

Een website gemaakt volgens het principe van responsive webdesign kan de opmaak live aanpassen op basis van zogeheten ‘media queries’. Simpel gezegd: de website krijgt informatie over verschillende eigenschappen van het apparaat waarop de site te zien is. Meestal is dit de breedte van de browser. Door elementen van de site zoals tekstblokken en plaatjes slim te verplaatsen of te schalen, kan de layout van een pagina zich dynamisch aanpassen aan de grootte van het scherm.

De site van Greenpeace Magazine Online past haar layout automatisch aan, of hij nu op een tablet, smartphone, of laptop wordt bekeken.

Voordelen van responsive webdesign

Bij een responsive ontwerp baseert de site het ontwerp op de afmetingen van het scherm. Ook kan tekst in relatieve groottes worden weergegeven, zodat hij altijd goed leesbaar is, ongeacht grootte en resolutie van het scherm. En afbeeldingen kunnen indien nodig groter of kleiner worden weergegeven, zodat ze altijd goed op het scherm passen.

Accent op responsive webdesign

Hieronder vind je enkele links naar voorbeelden van nationale en internationale sites met een mooi responsive ontwerp. Accent Interactive kan jouw bestaande website ook responsive maken. Wil je weten hoe? Neem contact met ons op en wij kunnen jou een maatwerkoplossing leveren.

Neem contact op over de mogelijkheden

⊕ Gepost door Joost van Veen

Ontvang elke maand onze tips & trucs in je mailbox.