Wat is het nut van responsive design?

delen 
18 oktober 2013

Het internet word niet alleen meer via de computer bekeken. We bezoeken steeds vaker websites en onze mail via mobiele apparaten. Dit betekent dat wij bij het maken van websites rekening moeten houden met deze ontwikkeling. Een veelgebruikte oplossing is responsive web design, hierbij past de website zich automatisch aan, aan het apparaat waarmee de site bezocht wordt. Hoe werkt responsive design? Wat zijn de voor- en nadelen? En hoe implementeer je responsive design succesvol? Dit kan toegepast worden op websites, webshops, maar ook commercieel mailverkeer.

Waarom responsive design?

Het mobiel internet wordt steeds groter. Veel meer mensen bekijken websites en webshops via mobiele apparaten. Dat is echter niet het enige. Er komt ook meer diversiteit tussen mobiele apparaten. Deze diversiteit zorgt er ook voor dat een aparte website voor mobiel niet meer voldoende is, omdat er veel verschillende mobiele telefoons zijn, maar ook verschillende maten tablets en notebooks. Een responsive design biedt mogelijkheden omdat de site automatisch wordt aangepast op de mogelijkheden van het device waarmee gekeken wordt. Door deze groei en diversiteit wordt het telkens belangrijker om uw website er op aan te passen. Omdat mensen er meer gebruik van gaan maken en telkens meer bedrijven hun sites aanpassen wordt het voor consumenten steeds belangrijker dat een site ook mobiel gebruiksvriendelijk is. Uit een recent onderzoek blijkt nog dat 76% van de bedrijven  geen of een heel magere strategie hebben op het gebied van mobiele commercie.

Hoe werkt responsive design?

Responsive design maakt een website interactiever. Internet 1.0 staat bekend als het internet waarbij een bezoeker alleen kon kijken naar het internet. Tegenwoordig is het internet veel interactiever. Bezoekers kunnen op bijna alle sites die ze bezoeken zelf content aanleveren, reageren en interacteren met de site.

Bij responsive design wordt er daarvoor nog een stap ingevoegd, namelijk interactie tussen de website en het apparaat van waaruit de bezoeker de site bezoekt. Dit wordt gedaan door ‘media queries’, de website stelt vragen over het formaat, resolutie en andere aspecten van het apparaat waarmee de site bekeken wordt. Op basis van deze gegevens wordt de lay-out van de website automatisch geoptimaliseerd voor het apparaat waarmee de site bezocht wordt. Op deze manier krijgt iedere gebruiker de voor hem geschikte opmaak te zien. Dit vergroot de gebruikerservaring. De gebruikerservaring is een belangrijke factor die meespealt in de CTR (Click-Through-Rate) en de conversiegraad (dus hoeveel producten er verkocht worden op het aantal bezoekers). Bekijk als voorbeeld van responsive design het onderstaande voorbeeld of de site van matrascenter die wij gemaakt hebben.

Wat zijn de voordelen van responsive design?

Een belangrijk voordeel van responsive design is dat als je het hebt, alles automatisch aangepast wordt. De opbouw van de site blijft hierdoor hetzelfde en aanpassingen worden direct voor alle formaten doorgevoerd. Hierdoor heb je niet een losse mobiele pagina nodig die je dan afzonderlijk moet bijhouden en updaten. Dit scheelt natuurlijk enorm in tijd en kosten. Als het een keer goed geregeld wordt werkt het daarna altijd goed.

Een ander belangrijk voordeel is dat het aantal verschillende mobiele apparaten snel is gegroeid (mobiele telefoons, tablets, mini tablets, notebooks etc.). Hierdoor is het niet meer voldoende om slechts een mobiele versie te hebben van de site, maar om te werken met verschillende stylesheets. Dit is met responsive design in principe eenvoudig mogelijk, mits de goede media queries ingesteld worden. Anders zou men voor een optimale gebruikerservaring voor elk apparaat een aparte website moeten bouwen, wat natuurlijk onnodig omvangrijk is en niet eenvoudig te beheren.

Wat zijn de nadelen van responsive design?

Er zijn niet alleen maar voordelen van responsive design, het heeft enkele nadelen. Het is wel mogelijk om deze nadelen op te vangen, maar toch is het goed om bewust te zijn van de nadelen voordat je responsive design wilt implementeren.

Het eerste nadeel is dat de website er trager van kan worden. Dit komt doordat responsive design wel alle content van de website laad. Dit betekent dat hij kan besluiten dat het op een mobiele telefoon beter is om bepaalde onderdelen (bijvoorbeeld grote afbeeldingen) van de website niet te tonen, maar toch zullen ook deze ingeladen worden. Bij wifi is dit niet zo’n probleem, maar wel bij mobiele netwerken. Dit gaat ten eerste trager, maar denk ook aan een datalimiet op mobiel internet. Een tragere laadtijd werkt negatief voor de gebruikerservaring en het vertrouwen dat mensen hebben in de website. De performance is altijd belangrijk om in de gaten te houden. Als de performance in het geheel goed geregeld is zal de kleine vertraging door responsive design geen negatieve invloed hebben op de gebruikerservaring. Het is echter wel belangrijk om de performance van de site te blijven monitoren.

Het tweede nadeel is dat het maken van een goede responsive website een complexe taak is. Dit betekent dat er best wat uren en dus geld in gaan zitten. Er moet goed over worden nagedacht en geëxperimenteerd met verschillende lay-outs en queries voordat een responsive site helemaal optimaal is voor die website. Dit betekent dat het best een investering is om een site responsive te maken. Als een site vanaf het begin af aan responsive wordt gemaakt is het eenvoudiger dan een al bestaande site om te bouwen. Dit vraagt een grotere startinvestering, maar scheelt later weer geld.

Is responsive design de moeite waard?

Ja, responsive design is de moeite waard. Waarom? Omdat het zorgt dat ook op mobiele apparaten het gebruikersgemak van de website optimaal kan zijn. Kan zijn inderdaad, want er zitten ook nadelen en risico’s aan die hierboven besproken zijn. Deze zijn wel op te vangen. Zo hangt de snelheid van veel andere factoren af en zal deze niet veel vertraagd worden door media queries.

Het is wel verstandig om na te gaan hoeveel invloed een responsive webdesign heeft. U kunt hiervoor bekijken hoeveel procent van de bezoekers van uw website via een mobiel apparaat bekijken. Deze groep wordt telkens groter. Een aantal bedrijven die onderzocht hebben wat het gevolg was van een responsive webshop merkten een aantoonbare conversiegroei van ongeveer 7 tot 20 procent. Het is een redelijke investering om het op te zetten, maar op termijn scheelt het werk en heeft het een positief effect op uw CTR en conversies.

Tot slot nog enkele tips om een responsive design zinvol te implementeren:

  • Zorg dat de basis van de website goed is. Simpel, mooi en optimale performance.
  • Maak voor kleine schermen 1 kolom, alles boven elkaar. Zo kan de gebruiker alles wel goed zien.
  • Bedenk waar je bezoekers naar op zoek zijn en laat ze vooral dat zien, de rest is secundair en mag uit het zicht verdwijnen.
  • Maak wat je hebt groter. Hiermee bedoelen we lettergrote, knoppen.
  • Vergroot je navigatieknoppen. Als ze goed opvallen dan wordt de CTR vergroot.
  • Zorg bij afbeeldingen dat ze zo min mogelijk opslagruimte in beslag nemen. Dit voorkomt traagheid. Bekijk bijvoorbeeld de site TinyPNG waar je heel makkelijk afbeeldingen kan verkleinen.
  • Als het belangrijke afbeeldingen of grafieken zijn, bekijk dan of ze klein nog steeds goed zichtbaar zijn of dat het beter is een alternatieve afbeelding te gebruiken.
  • Performance blijft het belangrijkste!

Meer weten?

Bedankt voor je bericht. We nemen spoedig contact met je op!