Mediaweb | Adaptive+Responsive Web Design

Geen zin om te lezen? Luister naar deze blogpost via de player hieronder:

Responsive Web Design (RWD) is hot. En dat is niet verwonderlijk, want het is een elegante oplossing om je website met één CMS op één URL geschikt te maken voor alle denkbare schermen. Van kleine smartphone tot mega smart TV. Maar er kleven ook risico’s aan RWD.

Responsive websites kunnen onnodig traag zijn,  vooral op wat oudere smartphones en het kan zinvol zijn om je website niet alleen op basis van schermgrootte aan te passen, maar ook op basis van het apparaat, locatie en bijvoorbeeld de snelheid van de verbinding.

Dit is waar een ontwerpstrategie genaamd “Progressive Enhancement” (PE) in combinatie met RWD uitkomst biedt. Een goede combinatie van RWD en PE noemen wij bij Mediaweb zelf voor het gemak ‘Adaptive+Responsive Web Design’ (A+RWD).

Website Speed & Performance

laadtijd-infographic-01.png

Onderzoek uit 2009 (Forrester Research[1] [2]) leert ons dat 47% van websitebezoekers verwacht dat een site binnen 2 seconden geladen is. En maar liefst 40% van websitebezoekers haken af als de site nog niet is ingeladen binnen 3 seconden! Volgens onderzoek van Google uit 2014 was ons geduld al afgenomen tot 1 seconde (zie ook de video hieronder).

Hoe dat nu anno 2016 is, is nog maar de vraag, maar als je de verwachte laadtijden vanaf 1999 tot aan 2014 bekijkt (‘99: 8 seconden, ’06: 4 seconden, ’09: 2 seconden, '14: 1 seconde), dan ligt de conclusie voor de hand dat bezoekers alles boven 1 seconde als traag en vervelend zullen ervaren.

Google: 1 seconde!

https://www.youtube.com/watch?v=pNKnhBIVj4w

Een saillant detail is dat deze cijfers gebaseerd zijn op desktopgebruik. Hoe zouden gebruikers reageren op trage laadtijden op een mobiel? Op apparaten die relatief over minder rekenkracht en internetsnelheid kunnen beschikken? Hoe reageert jouw ‘op snelheid geoptimaliseerde’ site op smartphones? Reken er maar op dat laadtijden met gemak kunnen verdubbelen.

En dat terwijl het geduld van smartphonegebruikers zelfs nog minder is dan op desktops. Google stelt het zelfs onomwonden: op een smartphone moet de inhoud van een pagina (‘above the fold’) binnen 1 seconde zichtbaar zijn. Ze wijzen daarbij naar onderzoek waaruit blijkt dat een vertraging langer dan 1 seconde de gedachtenstroom van de gebruiker onderbreekt en dat veroorzaakt een slechte gebruikerservaring.

Leestip: Mobiele Snelheidstest Top 200 NL Bedrijven 2015

Search rankings

Daarnaast kondigde Google in 2010 aan dat trage websites een negatieve impact hebben op Search Rankings. Dacht je dat je dit probleem getackeld had? In juni 2013 liet Google al weten dat trage laadtijden van sites op mobiele apparaten zouden gaan meewegen in je Search Rankings. Google zet dan ook zwaar in op het verbeteren van de gebruikerservaring voor smartphonegebruikers. Bij Mediaweb onderschrijven we deze visie volkomen.

SEO teksten voor je website? CopyRobin helpt!
Probeer nu gratis

Mobile First

Wanneer er een besluit ligt om een bestaande site responsive te maken, komen designers en ontwikkelaars vaak hetzelfde probleem tegen: hoe kun je een volle, werkende website zo samenpersen en van content/functionaliteit strippen dat het op een mobiel goed te gebruiken is? Om dit probleem bij nieuwe websites te voorkomen beginnen moderne ontwerpers steeds vaker volgens het principe ‘mobile first’.

mobile-first

Je begint bij ‘mobile first’ trajecten met het belangrijkste onderdeel: content. Je wilt dat mensen de content zien, lezen, maar ook makkelijk kunnen navigeren van en naar verschillende content. Dat is dan ook meteen punt twee: navigatie. Je wilt natuurlijk ook dat je te allen tijde in ieder geval kunt navigeren op de site.

Om dit bij de ontwikkeling van een website in goede banen te leiden moet je beginnen te ontwerpen voor de apparaten met de meeste beperkingen: een lage resolutie, trage processor, langzame verbinding, en geen ondersteuning voor geavanceerde webtechnieken als HTML5 en JavaScript. En dan kom je al snel uit bij PE.

Leestip: Responsive website of native app? Allebei!

Wat is progressive enhancement?

progressive-enhancement

(Image credits: Antoine Lefeuvre)

Laten we even uitgaan van een volgestopte desktopsite: Fly-out menu’s, meerdere carousels/sliders, Facebook/Twitter share scripts, geavanceerde kalender systemen, ingewikkelde tabellen. Ga zo maar door.

Deze site wil je dus weergeven op bijvoorbeeld een oude BlackBerry Curve. Een correct opgezette RWD site zal als het goed is automatisch het volgende doen:

  • Menu’s aanpassen en bruikbaar maken.
  • Een 1-koloms layout gebruiken voor de weergave van de site.

  • Mouseover/hover functies geschikt maken voor touch screens en/of trackpad/balls.
  • Carousels werkbaar maken voor het scherm en eventueel touch gestures, of zelfs de carousels weghalen/vervangen.

  • Op basis van content prioritering de inhoud van site structureren waarbij belangrijke content hoger belandt en minder belangrijke content bijvoorbeeld achter een link/button verdwijnt.
  • Typografie (lettertype’s, marges, uitlijning) aanpassen en plaatjes correct weergeven binnen de daarvoor beschikbare schermruimte.

Leestip: Zin en Onzin van Google PageSpeed

Enorme verbetering

Wanneer je dit op basis van een standaard RWD methode doet, haalt de browser van de bezoeker over het algemeen alle originele inhoud (inclusief grote plaatjes, alle JavaScripts) op.

De site past zich dus alleen aan de verschillende schermgroottes aan. Dit is uiteraard al een enorme verbetering ten opzichte van een niet responsive opgezette website. Maar het kan ten opzichte van een aparte mobiele website wel nadelen hebben.

Zo is de kans groot dat een standaard responsive website onnodig traag is op smartphones. Dat kan onder meer de volgende oorzaken hebben:

  • Grote afbeeldingen, maar dan wel geschaald om te passen binnen een klein schermpje.
  • Veel JavaScripts, inclusief het ook daadwerkelijk uitvoeren/parsen van de vele functies die op een desktopweergave gebruikt worden, maar die niet relevant zijn voor de smartphones.

  • Veel elementen die wellicht op een smartphone niet worden getoond (denk aan sharing scripts, tekstelementen die standaard verborgen worden, zoals uitklapelementen) e.d.

Dit probleem doet zich hoe dan ook voor bij de meeste standaard responsive templates, die je bijvoorbeeld veel in WordPress websites ziet.

Leestip: App, Mobiele website of Responsive Site

Snel, strak, simpel

Om een site zo optimaal mogelijk te krijgen en op zoveel mogelijk apparaten weer te geven (en dus ook zo snel mogelijk in te laden), kan PE flink helpen. Bij het toepassen van PE zorg je ervoor dat een website een basisniveau aan gebruikerservaring heeft op elk denkbaar apparaat.

Zodra een apparaat en de browser die daarop gebruikt wordt meer aan kan (groter scherm, meer rekenkracht, meer ondersteunde webstandaarden), bouw je de functionaliteit van de website verder uit.

Bij het implementeren van deze extra functionaliteit kun je dus het beste werken volgens het ‘mobile first’ principe: als je een apparaat gebruikt dat de basis UX weergeeft, laadt dan geen onnodige zaken in, voer geen overbodige (extra) code uit. Houd het snel, strak en simpel zodat de site op elk apparaat snel en prettig in gebruik blijft.

Leestip: 33 Prachtige Webdesign Inspiratie Sites

'Above the fold'

Een goede toepassing van PE zorgt ervoor dat de perceptie van de laadtijd snel is en de gebruiker binnen no time de site correct ziet. De oude discussies over ‘above-the-fold’ is dit geval op een andere manier relevant: zorg ervoor dat ‘above-the-fold’ juist snel weergegeven wordt en met PE laad en render je overige zaken daarna in. Deze testresultaten van Jake Archibald laten duidelijk zien hoe belangrijk PE kan zijn voor de snelheid van een website.

Onderhoudende uitleg over modern progressive enhancement van Jake Archibald:

https://www.youtube.com/watch?v=r038QioMtxI

Nog een aantal punten om rekening mee te houden:

  • PE is ook sterk aan te raden uit oogpunt van zoekmachineoptimalisatie. Want als je de meest belangrijke content zonder JavaScript en overtollige informatie al direct kan voorschotelen aan bezoekers, dan heb je je pagina’s eigenlijk al perfect klaar voor de indexbaarheid van je site door search crawlers. Deze crawlers voeren geen JavaScript uit en als je je core-content paraat hebt staan voor deze ‘bezoekers’ garandeer je dat de juiste content geindexeerd wordt. Update 2016: Google indexeert inmiddels wel degelijk JavaScript.
  • PE is ook beter voor de uptime van je website. Want het probleem dat een site ineens maar deels of geheel niet werkt (als bijvoorbeeld een JavaScript functie faalt) komt minder vaak voor. Mocht er iets goed misgaan, probeer dan de basis UX zo goed mogelijk te garanderen.

  • Vanuit het oogpunt van De Duurzame Website, waarmee je dus je website future-friendly wilt opzetten, is een content-driven aanpak wellicht aan te raden boven een device-driven aanpak. Je past dan RWD en PE toe op basis van content prioritering (core content). En dus niet persé op basis van regels van wat de nu al talloze beschikbare apparaten ondersteunen.

Progressive Enhancement is anno 2016:

Please select at least one option.

Welkom bij de voorhoede

Je hebt nu een en ander gelezen over het fenomeen ‘Responsive Web Design’ en de ontwerpstrategie ‘Progressive Enhancement’. Tezamen noemen we deze aanpak bij Mediaweb ‘Adaptive+Responsive Web Design’ (A+RWD). En wellicht heb je besloten dat je eigen site koste wat kost A+RWD moet zijn.

Je wilt dat jouw site altijd en overal voor iedereen toegankelijk is, leesbaar is en prettig in gebruik is. Daarnaast is je site makkelijk te onderhouden met één CMS en staat hij voor alle apparaten op dezelfde URL. Google is hier ook heel blij mee en beloont je met een hoge ranking. Perfect! Welkom bij de voorhoede. Welkom bij de onontkoombare ‘toekomst’ van internet.

We publiceerden deze blogpost oorspronkelijk op 5 september 2013, maar hebben hem uitgebreid en up-to-date gemaakt met o.a. nieuwe onderzoeken, bronnen en voorbeelden.

Wij zijn dé Adaptive+Responsive design specialisten.
Maak een afspraak

Deze post delen?

e book online marketing checklist 2017

Meer inspiratie voor 2017?

Gratis ‘De Online Marketing Checklist’ - Deel 1 (epub, mobi, pdf) downloaden en elke week een inspirerend en leerzaam artikel in je inbox ontvangen?
Ja graag! →

1 reacties op “

  1. Gravatar for Cees Muursticker

    Cees Muursticker

    Erg leuke blog! leuk om te lezen! Groet Cees!

Reageren niet meer mogelijk.