Alles wat ons dagelijks bezig houdt op het gebied van marketing, design en techniek delen we graag met je op onze blog. Van best practices voor een optimale customer experience, tips & tricks om de conversie te meten en te verhogen tot aan onze visie op disruptieve businessmodellen.

orange-juice.nl
/ 0

Design & UX

Responsive webdesign: één website geschikt voor elk scherm

25 juli 2016

In de afgelopen 10 jaar is er een explosieve toename van het aantal verschillende apparaten dat verbonden is met internet. Niet alleen computers, maar ook tablets, smartphones, wearables en slimme thermostaten. Hiermee is de behoefte ontstaan om vanaf elk device een website te kunnen raadplegen. Maar liefst 81 procent van de Nederlanders bezit een smartphone en in 61 procent van de huishoudens is een tablet aanwezig. Kortom: het is inmiddels noodzakelijk dat jouw website of webapplicatie geschikt is voor deze apparaten.

Scala aan schermgroottes

De specificaties van ieder individueel apparaat kennen grote verschillen, zowel in hardware (processor, geheugen etc.) als in schermgrootte en resolutie. Er zijn extra inspanningen nodig om
een website te ontwikkelen voor een breed scala aan schermgroottes, met behoud van een optimale gebruikerservaring. Het formaat (resolutie en pixeldichtheid) van een scherm bepaalt hoeveel content er op weergegeven kan worden. Dat is de reden waarom websites die ooit ontwikkeld zijn voor een gemiddeld desktopscherm, niet goed worden weergegeven op apparaten met een kleiner scherm. De lay-out van de website is simpelweg te breed waardoor alle teksten, afbeeldingen en knoppen verkleind worden weergegeven. Hierdoor is de content nauwelijks leesbaar en is het niet gemakkelijk om te navigeren door de webpagina’s.

De oplossing om een website te ontwikkelen die geschikt is voor weergave op meerdere schermformaten noemen we Responsive Webdesign. In deze context betekent responsive (reageren op) dat het stramien van de website zich automatisch aanpast naar de grootte van het scherm en de content niet wordt verkleind, maar waar nodig onder elkaar wordt geplaatst of een andere vorm krijgt.

Responsive webdesign met één bron voor content

Verschillen in aanpak

Er zijn vele vormen en technieken om een website te bouwen voor weergave op meerdere schermgroottes, maar in de basis zijn er twee manieren om dit aan te pakken; namelijk responsive en adaptive webdesign. Het onderscheid tussen responsive (reageren/inspelen) en adaptive (aanpassen) webdesign heeft vooral te maken met de strategische insteek van de website; welke bezoekers wil je welke informatie geven op welk moment of apparaat.

Adaptive webdesign

Adaptive webdesign wil zeggen dat je één bron gebruikt voor de content van de website, maar afhankelijk van het soort apparaat waarmee de bezoeker de website bekijkt slechts een deel van de content of zelfs andere content toont. En in dat geval ook een andere lay-out. Om de website compact te houden voor een optimale gebruikerservaring op kleine schermen, kies je ervoor niet noodzakelijke content in te korten of zelfs te verbergen. Ook het verschil in snelheid van de internetverbinding of het tijdstip van de dag kan een factor zijn om de bezoeker andere content voor te schotelen.

Responsive webdesign

Responsive webdesign gaat ook uit van één bron voor de content maar bij deze aanpak wordt alle content getoond op alle schermen. Het stramien past zich aan naar de breedte van het scherm zonder de content op de pagina aan te passen of de content te verbergen. Kolommen die op een groot scherm naast elkaar staan worden nu onder elkaar geplaatst, waarbij de tekstgrootte en grootte van overige grafische elementen in verhouding behouden blijft. Dit om de leesbaarheid en gemak in bediening te kunnen garanderen.

Adaptive vs Responsive

Bestaand principes, nieuwe technieken

Ook al lijkt responsive design een nieuw fenomeen, eigenlijk kennen we de principes al vanuit de wereld van print advertising. Als een advertentiecampagne geschikt moet worden gemaakt voor verschillende formaten tijdschriften, is het “responsive” maken van de advertentie iets wat de DTP-er voor zijn rekening nam. De DTP-medewerker zorgde ervoor dat dezelfde boodschap en beelden geschikt werden gemaakt voor een advertentieruimte met andere afmetingen door de kolommen opnieuw in te delen en de content te verplaatsen. Datgene wat de DTP-er voorheen handmatig deed in een opmaakprogramma, doet de browser nu op het moment dat je de webpagina opent. De browser interpreteert de code en zorgt voor de correcte weergave ten opzichte van de beschikbare schermruimte. Met responsive webdesign kunnen we hiervoor zorgen terwijl het beheer van de content binnen één CMS en/of database blijft. Een responsive website wordt één keer gerealiseerd en vanuit één bron onderhouden.

De eerste stap

Bij voorkeur wordt er eerst een schematische weergave van de website in de vorm van wireframes of een prototype opgezet. Hierin wordt de indeling, de content en functionaliteiten in kaart gebracht alleen nog zonder de grafische vormgeven. Zo kan je als team en opdrachtgever in een vroeg stadium van het project zien hoe de functionaliteiten en de content zich gedragen en op basis daarvan starten met het design en de bouw van de website

Voorbeeld wireframes. Bron: https://dribbble.com

Realisatie van een responsive website

Ten opzichte van een website die alleen geschikt is voor weergave op desktopschermen is het ontwikkelen van een goede responsive website arbeidsintensief. In de voorbereiding kost het meer tijd om de functionaliteiten, content en gedrag van alle interface-elementen voor meerdere schermgroottes in kaart te brengen. Vervolgens moet het gedrag van deze elementen en content per schermresolutie (breekpunt) in de HTML-en CSS-code beschreven worden. Om te garanderen dat het gebruiksgemak (usability) en de totale gebruikerservaring optimaal is op zowel grote als kleine schermen testen we de website op alle apparaten die we ondersteunen. Waar nodig worden er per versie van een browser nog uitzonderingsregels in de code opgenomen om consistentie in weergave te waarborgen.

Investering die zich snel terugbetaald

Het grote voordeel van een responsive website is dat er niet per apparaat een separate website ontwikkeld en beheert hoeft te worden. Door in het ontwerp en de realisatie rekening te houden met de weergave op verschillende resoluties zorgt een responsive website voor een betere gebruikerservaring op een breed scale aan apparaten. Daarnaast zal de website sneller gevonden worden door gebruikers van tablets en smartphones als de website hiervoor geschikt gemaakt is met als resultaat dat het bezoekersaantal zal stijgen. Uit onderzoek blijkt ook het aantal bezoekers dat op de pagina waar ze binnenkomen direct afhaken daalt bij responsive websites, de zogenaamde bouncerate. Al deze factoren zullen bijdragen aan het verhogen van de conversie. De conclusie is dat een responsive website een verantwoorde investering is.

Meer weten over de mogelijkheden

Heb je na het lezen nog vragen over dit onderwerp? Neem gerust contact met mij op om van gedachten te wisselen over hoe we een optimale en consistente gebruikerservaring neer kunnen zetten voor jouw bezoekers. Bel +31 (0)26 327 4045 of stuur een e-mail naar aran@orange-juice.nl

Creative Director @ Orange Juice.