Responsive design, hoe je website op meerdere apparaten hetzelfde doel behaalt

Door John van Hulsen, front-end developer - @johnvanhulsen
7 maart 2012 - 2071 x bekeken - Categorie├źn: Innovatie

Weet jij de resolutie van het scherm waarop je dit verhaal momenteel leest? Misschien wel maar misschien heb je zelfs nog nooit van de term resolutie gehoord. Ik weet het als developer zonder het te controleren in ieder geval niet, terwijl iedereen wel van mij verwacht dat ik een website maak die voor iedereen goed te bezoeken is, een website die voor iedereen de juiste ervaring van het merk of bedrijf geeft.

Websites worden al jaren ontworpen op een redelijk vaste breedte. In de beginjaren van het internet waren monitoren klein en was +/- 760 pixels de maximale breedte waarbinnen gewerkt kon worden om ervoor te zorgen dat alle bezoekers de website goed zagen zonder horizontaal over het scherm te moeten scrollen. Inmiddels zijn we jaren verder, zijn grotere schermen betaalbaarder geworden en is de gangbare breedte voor websites opgekrikt naar ongeveer 980 pixels. In de loop der jaren hebben we er wel ongeveer 220 pixels bijgekregen om te gebruiken. Klinkt mooi, maar anno 2012 lopen we tegen een probleem aan. Afwijkende apparaten en mobiele gebruikers.

(Ruim 10% van de bezoekers heeft nog een lagerere resolutie die het lastig maakt om buiten deze 980 pixels te treden.)

Mobiel

Een paar jaar geleden was je nog een nerd zodra je internettoegang op je telefoon had. Inmiddels kunnen steeds meer mensen niet meer zonder een mobiele databundel. Zelfs op vakantie in het buitenland is het tegenwoordig niet vreemd meer dat je internet opstart en het nieuws, websites of je social media tot je neemt met een smartphone op een terrasje.

Doordat we met z'n allen meerdere apparaten met internettoegang zijn gaan gebruiken kan het dus voorkomen dat je dezelfde website meermaals bekijkt. Onderweg op je mobiele telefoon, overdag op een normale desktop en 's avonds -voor de televisie- op een tabblet. Hier hebben we de uitdaging te pakken. Waar we de afgelopen jaren een stijgende lijn zagen qua monitorresoluties en we meer ruimte te besteden kregen, is deze ruimte tegenwoordig sterk wisselend terwijl de hoeveelheid content die we willen presenteren op de websites niet kleiner geworden is.
Mobiele gebruikers hebben veelal een kleiner scherm maar bedienen hun apparaat niet met een muis maar veelal met hun vingers. Op minder oppervlakte moet dus ruimte zijn om een dikkere cursor (vingers) te werken.
De oplossing die hiervoor bestaat zijn mobiele websites. Dit zijn vaak afzonderlijk ontworpen websites die toegespitst zijn op de behoeftes van gebruikers die de website op hun mobiel kijken. Een budget om een tweede website te laten maken is er niet altijd. Het is ook veel gemakkelijker om één website te presenteren.
Dat kan tegenwoordig!

Responsive Design

Een techniek die de laatste tijd in opmars komt is het zogenoemde Responsive Design. Responsive design is een gedachtegang die websites geen vastgestelde breedte meer geeft maar waarbij vooraf goed nagedacht wordt over de belangrijkste elementen en deze aanpast, bijschaalt of verplaatst, naar de mogelijkheden van de gebruiker en de beschikbare ruimte op het scherm. De 980 pixels breedte waar we hierboven over spraken is mogelijk nog steeds het uitgangspunt voor de normale website zoals je die gewend bent, maar als ontwerper en ontwikkelaar houden we ons niet vast aan deze breedte. Hierbij kijken we bijvoorbeeld naar elementen van de website die naast elkaar staan, of in een lijst: Zouden er ook minder items getoond kunnen worden en wordt hierdoor mogelijk de gebruikerservaring verbeterd? Of is het menu, met al zijn ruimte, wel nodig? Kunnen we hier op een mobiel apparaat niet beter een andere weergave voor ontwikkelen zodat mensen met hun vingers altijd in 1x raak kunnen klikken door de items groter weer te geven? Meer ruimte te geven of minder randinformatie te tonen?

Hoe werkt de techniek?

Websites worden gemaakt in HTML, een taal die de structuur van een pagina neerzet. In de HTML worden diverse aanknopingspunten geplaatst die we in CSS kunnen gebruiken om er een stijl aan te hangen en ervoor te zorgen dat de website er leuk uitziet en het idee van het ontwerp overgebracht wordt naar de bezoeker.

In responsive design passen we deze presentatielaag (de CSS dus) aan, aan de hand van de input die we kunnen krijgen van de browser van de bezoeker. Met zogenoemde mediaqueries kunnen we matchen of de breedte, de hoogte of de ratio van het scherm overeenkomt, groter of kleiner is dan de waardes zoals we het in de CSS opgeven.
Door in de matches de wijzigingen ten opzichte van de normale website te definiëren kunnen we vervolgens de weergave per resolutie of apparaat wijzigen.

De voor- en nadelen

Het grootste voordeel van een website die responsive werkt is het feit dat je slechts één website hebt. Dezelfde pagina's werken op vrijwel alle apparaten en je kunt ervoor zorgen dat de website er altijd goed uitziet voor iedere gebruiker.
Toch is het niet allemaal zaligmakend. Mobiel internet wordt steeds sneller maar in plaats van een lichte, voor mobiel geoptimaliseerde website met minder content en minder zware afbeeldingen, wordt er ook op je mobieltje op het terras een volwaardige website ingeladen en wordt er op het apparaat van de gebruiker pas gekeken welke weergave het beste werkt voor hem.

Mobile Down South - Responsive design voorbeelden

Mobile Down South

Bij E-sites zijn we voorzichtig bezig te kijken wat responsive design voor ons en onze klanten kan betekenen en of de voordelen het van de nadelen winnen. Recentelijk hebben we in samenwerking met een aantal andere bureau's uit het zuiden des lands een website opgezet voor een evenement waarbij we als E-sites zijnde betrokken zijn: Mobile Down South. Hét evenement voor en door mobile designers en developers.
Hierbij was in het ontwerp nagedacht over een viertal verschillende versies van hetzelfde ontwerp. Met een stukje logica in de CSS kijken we hoeveel ruimte we hebben om te tonen met als gevolg dat de website er op je desktop anders uitziet dan op je tablet of je mobiele telefoon. Er is zelfs een verschil tussen het verticaal of horizontaal bekijken op je tablet.
Bekijk de website Mobile Down South 

De toekomst?

Ik zou willen dat ik de toekomst kon voorspellen maar als ik de trends in de gaten hou dan durf ik gerust te stellen dat 'responsive' een grote rol gaan betekenen in mijn werk. De voordelen zijn duidelijk en zullen met nieuwe technieken in de toekomst alleen maar groter worden. Hopelijk zal er ook een vangnet komen voor de nadelen. Als je behalve de resolutie weet wáár de gebruiker is, wat voor internetverbinding/snelheid de gebruiker heeft of zelfs weet of de gebruiker links of rechtshandig is kunnen we het de bezoeker van de pagina gemakkelijker maken om de content die hij graag wil hebben te presenteren op een zo eenvoudig mogelijke manier.
Bezoeker blij en ik blij! Helaas moeten we het nu nog even doen met scenario's zoals hierboven beschreven.

Ik wil er meer over weten!

Dat kan!
Op http://mediaqueri.es zijn een groot aantal leuke voorbeelden te zien.
Mocht je willen weten of responsive design ook iets voor jouw website kan zijn, kom gerust eens langs. Wij kijken er graag naar!

SXSW Interactive 2012

Door Sjoerd van Oosten

Verslag van het bezoek aan SXSW Interactive 2012 - Lees meer

Lees verder