Content

Wat je móet weten over responsive webdesign

0

Responsive webdesign. Ik durf te wedden dat we er – zeker hier op Frankwatching – allemaal wel eens iets over hebben gehoord of gelezen. Het is ongeveer de meest geroepen term in webdesignland. De eerste vraag die mensen stellen als je iets roept over een nieuwe website: ‘istie responsive?’ En Mashable riep 2013 uit tot het jaar van responsive webdesign. Kortom, afgekort naar RWD heeft deze term het internet nu al volledig op z’n kop gezet.

Reden genoeg om hier een serie van 4 artikelen aan te wijden. In dit eerste artikel praat ik je bij, stel ik je op de hoogte en laat ik je ruiken aan de ins, outs, overs, unders en doorheens van RWD. Ik leg kort uit wat het is, wat de voordelen zijn en waarom het als een uitermate belangrijke ontwikkeling beschouwd wordt.

Waarom RWD?

Allereerst een antwoord op de vraag waarom we worden doodgegooid met deze term. Omdat websites in grootmoeders tijd – zo’n vijf jaar geleden en daarvoor – vrijwel alleen werden bezocht op desktops en laptops met allemaal ongeveer hetzelfde schermformaat. En dat is nu niet meer zo. De mobiele revolutie – en daarmee de lancering van apparaten als smartphones en tablets – is een aantal jaar geleden in gang gezet en de afgelopen tijd in een wilde stroomversnelling geraakt.

De smartphone veroverde de wereld, de verkoop van tablets explodeerde en de behoefte om altijd en overal online te zijn is groter dan ooit. Op dit moment komt bijna 20% van het totale internetverkeer van een mobiel apparaat. En dat zal in 2014 naar verwachting naar boven de 25% groeien. Het aantal mensen met een mobiele internetverbinding ligt al boven een miljard. Ook dat zal alleen maar verder stijgen. Dit alles zorgt voor een compleet nieuwe situatie. Een situatie waarin mensen op honderden verschillende apparaten websites bezoeken. Dat wil zeggen; niet alleen op verschillende schermformaten, maar ook op verschillende manieren, met andere behoeftes en andere context.
Waarom responsive webdesign?
Gevolg: het ambacht webdesign wordt naar een hoger niveau getild. Websites worden ontworpen en gebouwd voor verschillende schermformaten en gebruikersbehoeften. Daarbij zijn nieuwe vraagstukken ontstaan, moeten nieuwe afwegingen in ogenschouw worden genomen en andere keuzes worden gemaakt.
Content moet worden geprioriteerd, waarna je voor verschillende formaten en apparaten een andere indeling of weergave moet kiezen. Vaak wordt zelfs een deel van de content weggelaten. Maar welke content? En in welke gevallen wel en welke niet? In mijn derde artikel in deze serie zal ik daar dieper op ingaan.

Wat houdt RWD precies in?

Nu we weten hoe de term is ontstaan, wil ik toch nog even precies definiëren wat de term nu eigenlijk precies inhoudt. Er is de afgelopen tijd namelijk enige verwarring ontstaan over de betekenis en het gebruik van de term. Mijn definitie:

RWD is een manier van ontwerpen waarbij geprobeerd wordt gebruikers van verschillende apparaten en schermformaten een zo optimaal mogelijke gebruikerservaring te bieden. Door de indeling – en de content – te ontwerpen aan de hand van de beschikbare ruimte, ontstaat een ervaring die beter past bij de manier waarop een website wordt bezocht.

Adaptive webdesign

Als we het ook hebben over de manier waarop een apparaat wordt gebruikt – en contextuele factoren als tijd en locatie – hebben we het eigenlijk over adaptive webdesign. Er ontstaat vaak verwarring tussen deze twee begrippen. Adaptive webdesign gaat dus een stapje verder dan responsive webdesign. In dat geval kan ook de functionaliteit van een website zich aan de gebruiker aanpassen, door het tijdstip of de locatie van het bezoekmoment te gebruiken. De website past zich dan dus nog meer aan de gebruiker aan.
Voorbeeld Adaptive webdesign
Een goed voorbeeld is het gebruik van formulieren. Gebruikers van een desktop hebben de beschikking over een toetsenbord, waardoor typen een kleine moeite is. Het invullen van een formulier is zo gebeurd. Maar gebruikers van een smartphone zitten niet te wachten op veel typewerk. Bovendien werken formulieren technisch anders op veel mobiele apparaten of worden zelfs onbruikbaar. Je kunt je dus afvragen of het wijs is om gebruikers van een smartphone een sollicitatieformulier in te laten vullen. Misschien is het slimmer om de optie te bieden de vacature naar een emailadres te laten verzenden.

Afhankelijk van de situatie

Daarnaast bevinden gebruikers van een smartphone zich vaak in een andere situatie, doordat zij onderweg zijn. Door het bepalen van de geolocatie van de bezoeker, kan dat worden vastgesteld. Zo kun je erachter komen dat hij of zij op dat moment buiten loopt, de beschikking heeft over een camera (in smartphone) en waarschijnlijk minder tijd heeft dan een gebruiker van een desktop. Allemaal kennis waar je je voordeel mee kunt doen bij het selecteren en presenteren van content en functionaliteit.

En eigenlijk gaat adaptive webdesign nóg een stapje verder. Met name het woord ‘adaptive’ speelt daarbij een belangrijke rol. Adaptive webdesign is ook informatie die je hebt gebruiken om de ervaring die je biedt te verbeteren. Het definiëren van context om de gebruiker beter en specifieker te kunnen dienen. Zeker met de snelle ontwikkeling van social intelligence en big data wordt het steeds beter mogelijk om gebruik te maken van die context.

Een voorbeeld

Een belangrijke factor daarbij is het begrip ‘tijd’. Voor websites met een tijdelijk karakter (bijvoorbeeld de website voor het festival LowLands 2013), speelt tijd een belangrijke rol. Als ontwerper (en eigenaar) van zo’n website zou je je af kunnen vragen wat de behoefte is van bezoekers en op welke manier die behoefte verandert naarmate het festival dichterbij komt.

Van tevoren willen bezoekers informatie over de line-up, een kaart kopen, een routebeschrijving. Tijdens het evenement zou de website meer als ‘online krant’ moeten dienen. Route-informatie wordt dan minder belangrijk. Maar informatie over waar je gratis water kunt halen om de hittegolf te kunnen trotseren is wel weer heel gewild. En achteraf zijn er vast veel bezoekers op zoek naar filmpjes, gevonden voorwerpen of de datum van de volgende editie. Kortom: de prioriteit van content verandert in dit voorbeeld continu.

03-wat-houd-RWDWat zijn de voordelen van AWD en RWD?

Het is duidelijk dat bezoekers een website die zich aan hun specifieke situatie aanpast, beter beoordelen. Om deze stelling kracht bij te zetten, hier de uitkomst van een case studie op Medium.com, over de nieuwe responsive website van TIME Magazine:

  • Voordelen responsive webdesignAantal pagina’s per bezoek op smartphones steeg met 23%.
  • Aantal unieke bezoekers op de homepage steeg met 15%.
  • De tijd die bezoekers op de website doorbrengen steeg met 7,5%.
  • De bounce rate op smartphones daalde met 26%.
  • Het aandeel mobiel verkeer steeg van 15% naar 25%.

Een responsive website leidt in het algemeen tot bezoekers die langer blijven hangen, meer content consumeren, vaker tot conversies leiden, vaker terugkeren en uiteindelijk dus tot meer omzet leiden. Nog een voordeel: lagere kosten. Aangezien je maar één website in beheer hebt en niet een aparte mobiele website of een app. Je hoeft dus maar één keer content te publiceren (hoewel er trucjes bestaan om dat ook te doen in het geval van een mobiele website of app), één website te updaten of één website te vervangen. Uiteraard vraagt een professionele responsive of adaptive website om een investering, maar na deze éénmalige kosten, zullen de verdere kosten lager uitvallen dan wanneer je aparte versies in de lucht hebt.

Bovendien ziet het er professioneel uit: RWD en AWD is sexy. Je laat als organisatie zien dat je een online strategie serieus neemt en dat je bereid bent daarin te investeren. Een professionele website die meegaat met de mogelijkheden van de tijd straalt autoriteit uit. Het zorgt dat je een stapje voor hebt op je concurrenten en het verbetert je imago. Voor een uitgebreidere uitleg van deze voordelen, verwijs ik je graag naar een artikel dat ik eerder al schreef op het blog van 2Organize.

Belangrijke begrippen rondom RWD en AWD

Naast de termen responsive webdesign en adaptive webdesign, hoor of lees je vaak andere, verwante termen. Het is fijn om ook van die termen precies te weten hoe het zit. Hier de drie meest gehoorde:

  • States en breakpoints: Bij het ontwerpen van een responsive website wordt een aantal breakpoints vastgesteld. Deze breakpoints geven aan vanaf welk punt de volgende state (indeling) wordt gebruikt. De focus ligt daarbij meestal op de verschillende apparaten: één state voor smartphones, één voor tablets en één voor desktops en laptops. Maar vaak worden nog veel meer breakpoints en states gebruikt. Een voorbeeld daarvan is technologieblog TheNextWeb. Speel maar eens met de grootte van het venster en kijk wat er gebeurt.
  • Fluid design: Een ontwerp dat niet alleen een andere state heeft voor smartphones, tablets, desktops en laptops, maar bij vrijwel elke verandering in schermgrootte een andere state weergeeft, wordt ook wel een fluid design genoemd. Belangrijke eigenschap van zo’n ontwerp is dat de website procentueel is opgebouwd. Zo wordt altijd maximaal gebruik gemaakt van de beschikbare ruimte en zie je vaak geen ‘grijs gebied’ links en rechts van de website.
  • Mobile first: Een veelgehoorde term die staat voor een uitgangspunt waarbij de mobiele versie eerst wordt ontworpen en pas later de versies voor grotere schermen. De reden hiervan is dat je als ontwerper wordt gedwongen tot het maken van een strikte prioritering van content op basis van relevantie, omdat je maar heel beperkt de ruimte hebt. Hoe groter het scherm, hoe meer ruimte voor minder relevante content. De werkwijze gaat dus uit van ‘van klein naar groot’.
  • Media queries: Dit is de CSS3-module die wordt gebruikt om content bij het inladen afhankelijk van bijv. schermgrootte te kunnen weergeven.
  • Progressive enhancement: Ook rond deze term bestaat een hoop verwarring. In de sfeer van responsive webdesign wordt bedoeld dat alle functionaliteit en content toegankelijk moet zijn voor alle gebruikers, ongeacht het apparaat. Om dit mogelijk te maken, wordt vaak eerst bepaald welke functionaliteit essentieel is en hoe deze toegankelijk kan worden gemaakt op het apparaat met de minste mogelijkheden, op dit moment de smartphone.

Voorbeelden

Tot slot wil ik je nog een aantal voorbeelden geven van responsive websites. Je kunt hier inspiratie uit halen: bekijk hoe de websites met de grootte van je scherm meebewegen door je venster te vergroten en te verkleinen. Of gebruik de handige en sexy tool Responsive.is.

Over twee weken het tweede artikel in deze serie. Daarin neem ik een aantal misverstanden rond responsive webdesign onder de loep. Heb je vragen, toevoegingen of interessante voorbeelden rondom responsive webdesign? Verrijk dit artikel en reageer.