Responsive design

Responsive design

Responsive design

Steeds meer mensen bezoeken websites met hun smartphone of tablet. In Nederland is dat al meer dan 50% van al het websitebezoek. Dit betekent dat erg belangrijker is om een website te hebben die geschikt is voor deze apparaten. Geschikt is in deze niet alleen het gegeven dat de website normaal functioneert op ieder mobiel apparaat maar verder exact eruit ziet als de desktopvariant. Zoals je vaak tegenkomt zijn de letters dan veel te klein, is de navigatie slecht te bedienen en staat er veel te veel op het scherm.

Een oplossing hiervoor biedt Responsive Design. Bij responsive webdesign ontwerp je één website die zich aanpast aan de diverse schermformaten.
Bij een groot scherm is er ruimte voor meerdere – meestal drie – kolommen en grote headers en afbeeldingen. Bij een tablet is dit al een stuk minder (zeker als deze verticaal wordt gehouden) en op een smartphone is er nog maar ruimte voor 1 kolom. Bij een responsive design passen tekst en afbeeldingen zich daarom aan in zowel formaat als positie. Zo zal bijvoorbeeld het lettertype groter worden op een kleiner scherm, gaan de afbeeldingen boven of onder de tekst staan (in plaats van er naast) en worden afbeeldingen kleiner geschaald zodat deze mooi in het scherm van het apparaat passen. De ‘contentelementen’ verschuiven sowieso bij een responsive design van naast elkaar naar onder elkaar. Deze blokjes inhoud noemen ze contenttegels- of style tiles. Het zijn tegels met content die zichzelf kunnen herpositioneren al naar gelang van het schermformaat.

Gaat dit allemaal automatisch? Ontwerpt de designer één interface die we gewoon ‘vloeibaar’ maken? Helaas is het niet zo eenvoudig. Responsive design maakt het niet alleen technisch mogelijk om bij een ander schermformaat te bepalen waar welk element heen moet bewegen. Ook kunnen contentelementen in hun geheel weg worden gelaten bij een ander schermformaat of een ander uiterlijk krijgen. Het is op die manier dus mogelijk om de website ook voor wat betreft contenthierarchie en inhoud aan te passen aan het schermformaat en de behoeften van de gebruiker. Dit naar de juiste positie bewegen op het scherm van iedere content tegel moet door de ontwerper van te voren bedacht worden. Dit wordt ‘content choreografie’ genoemd. Er wordt voor smartphones, tablets, desktop en eventueel presentatieschermen een apart design gemaakt en een eigen content choreografie uitgewerkt.

Het is ook niet altijd zo dat het grote scherm leidend is. Steeds vaker staat het mobiele gebruik voorop want is dit belangrijker dan de desktopervaring. In dat geval begin je te ontwerpen voor de smartphone en ga je daarna kijken hoe dit responsive moet reageren op grotere schermen. Dat noemen ze een ‘mobile first’ strategie. Google vindt het tegenwoordig zo belangrijk dat websites responsive zijn, dat deze op een smartphone en op een tablet voorrang krijgen in de zoekresultaten boven sites die niet responsive zijn.

Over al deze zaken moet nagedacht worden door de ontwerper in samenspraak met de opdrachtgever. Een responsive design ontwerpen is dus altijd teamwerk.
Wilt u ook graag uw website omzetten naar responsive design of een nieuwe op deze manier laten ontwerpen? Neemt u dan contact met ons op voor meer informatie of een vrijblijvend gesprek.