Mediaweb | Responsive website: 4 strategieën

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

De statistieken van je website tonen het keihard aan: mobiele bezoekers zijn al bijna in de meerderheid. En de bounce rate van deze bezoekers is met meer dan 80% onrustbarend hoog. Ondanks de duidelijke waarschuwingen, zoals Mobilegeddon, heeft de lang voorspelde opkomst van het mobiele web je toch nog verrast. Het gaat nu zo snel!

Het afgelopen jaar (2015) was responsive web design enorm in opkomst. Uit ons eigen onderzoek onder top 200 bedrijven in Nederland blijkt dat tussen november 2014 en november 2015 het percentage responsive sites in deze categorie is gestegen van 33% naar 52,5%. Maar uit onderzoek van Akamai uit eind 2014 blijkt dat naarmate websites minder verkeer krijgen, dit percentage ook een stuk lager is.

RWD Adoption Tiered 2014 1024x825 496x400

We mogen er dan ook veilig vanuit gaan dat de meeste websites op dit moment nog niet responsive zijn. 

Geen budget

Omdat je organisatie een paar jaar geleden fors heeft geïnvesteerd in een nieuwe website, is er op dit moment nog geen budget om een nieuwe site te bouwen. Die ruimte is er pas over 2 jaar. Maar dit kan zo niet langer doorgaan. Je kunt je mobiele gebruikers niet zo lang blijven verwaarlozen. De website moet responsive worden. Maar hoe?

Leestip: 33 Prachtige Webdesign Inspiratie Sites

Responsive is de standaard

Als jouw organisatie dit jaar voldoende budget beschikbaar heeft om een nieuwe website te laten bouwen, is je probleem te overzien. Vrijwel alle nieuwe sites die nu worden gebouwd zijn responsive. Responsive is tegenwoordig een defacto standaard. Nu kun je responsive web design goed uitvoeren, maar het kan ook heel makkelijk fout gaan. Lees daarom voor je met een responsive website begint eerst onze eerdere blogposts over responsive web design en adaptive+responsive web design.

Adaptive content voor je responsive website? CopyRobin helpt!
Probeer nu gratis

Wil je een webshop responsive maken? Laat je dan inspireren door ons eerdere artikel 20 Prachtige Responsive E-commerce Sites.

4 Strategieën

Maar wat als er pas in 2017 of 2018 weer financiële ruimte is voor een nieuwe website? Hoe bedien je tot die tijd dan de groeiende groep bezoekers met een smartphone of tablet? In dit artikel behandelen we 4 verschillende strategieën om tot een responsive website te komen:

  1. Bestaande website ombouwen
  2. Responsive mobiele site
  3. Adaptive+Responsive Web Design
  4. Beetje bij beetje

1) Bestaande website ombouwen

Bij deze strategie pas je de bestaande website aan, zodat deze responsive wordt. Deze aanpak is aantrekkelijk als de website groot is, veel bezoekers heeft en het helemaal opnieuw bouwen teveel tijd en geld gaat kosten.

Vooral als een website veel terugkerende bezoekers heeft, is een grondige re-design niet zonder risico.

Voordelen

Relatief snel. Een bestaande website responsive maken kan al door een aparte css te maken voor kleine schermpjes. Afhankelijk van hoe de website is geprogrammeerd kunnen de programmeurs wellicht ook meerdere ‘breakpoints’ (media queries) aanbrengen voor verschillende scherm-afmetingen, waardoor je het effect van een echte responsive website aardig kunt benaderen. Dit zal de gebruikerservaring voor mobiele bezoekers in ieder geval verbeteren. En daarmee ook de vindbaarheid van je website op smartphones.

Vertrouwd. Vooral als een website veel terugkerende bezoekers heeft, is een grondige re-design niet zonder risico. Mensen wennen nu eenmaal aan een website en verzetten zich al snel tegen elke verandering. Ook als deze feitelijk een verbetering is. Door de bestaande site om te bouwen is het verschil met de oude situatie relatief beperkt.

Organisatorisch makkelijk. Het ombouwen van een bestaande site zal ook intern minder snel op weerstand stuiten. Je zult minder gedoe krijgen over het ontwerp en welke kleur blauw te gebruiken. Je kunt werken met bestaande teksten en foto’s. Je zult minder tijd kwijt zijn aan het overtuigen van managers en directie.

Nadelen

Het blijft een lapmiddel. Een goede ervaring voor mobiele gebruikers gaat niet alleen over het aanpassen van het ontwerp aan verschillende scherm-afmetingen. Bij het ombouwen van een bestaande site naar responsive laat je de nodige kansen liggen die een echt goed uitgevoerd responsive design kan bieden.

Teveel en verkeerde content. Meestal vergt goed responsive design ook een heroverweging van de contentstrategie, omdat kleinere schermpjes dwingen tot sterke prioritering van de content. Het risico bestaat dat mobiele gebruikers door de bomen het bos niet meer zien.

Prestaties. Goed responsive design betekent ook het optimaliseren voor met name langzame smartphones met trage verbindingen. Bij het ombouwen van een desktop site is dit meestal onbegonnen werk.

Bij een responsive mobiele site plant je als het ware een zaadje voor een responsive toekomst.

2) Responsive mobiele site

De tweede strategie is om met beperkte middelen een responsive mobiele (m.dot) site te lanceren naast de bestaande desktop site en deze langzaam door te laten groeien om uiteindelijk de desktop te vervangen.

Je plant als het ware een zaadje voor een responsive toekomst, terwijl je de bezoekers met een smartphone op korte termijn al een veel betere ervaring biedt.

Mobiele responsive site als basis 1

Voordelen

Snelle, betaalbare oplossing. Een mobiele versie (m.dot) van een website is doorgaans veel sneller en goedkoper te realiseren dan een complete responsive re-launch. Je zult je mobiele bezoekers dus al redelijk snel een goede gebruikerservaring kunnen bieden tegen een relatief geringe investering.

Beperkt risico. Vooral als het aantal mobiele bezoekers aan de website van jouw organisatie nog niet zo groot is. In dat geval biedt deze aanpak de mogelijkheid om kennis te maken met responsive design. En dat zonder gelijk alles op het spel te zetten.

Betaalbaar lesgeld. Door klein te beginnen en in geleidelijke stapjes de responsive website uit te bouwen, zonder de enorme druk van een complete responsive re-launch, kan het team rustig experimenteren en leren.

Toekomstbestendig. Een responsive opgezette mobiele website volgens onze principes van De Duurzame Website maakt je organisatie klaar voor de toekomst. Want deze website dient uiteindelijk als basis voor de responsive website die na verloop van tijd de bestaande desktop site zal vervangen.

Mobiele responsive site als basis 2

Nadelen

Het is nog wel een m.dot site. De nieuwe site mag dan wel responsive zijn, het is nog steeds een m.dot site met alle nadelen van dien: URL redirect problemen, content management en beheer kwesties, continuiteit, SEO, etcetera. Een handige vergelijking tussen een mobiele site en een responsive website of native app vind je in deze eerdere blogpost.

Lapmiddel. Als het voornemen om de responsive mobiele site door te laten groeien naar een responsive website voor alle scherm-afmetingen niet wordt doorgezet, bestaat de kans dat het een lapmiddel voor de korte termijn blijft.

Het ideaalplaatje: Adaptive+Responsive Web Design.

3) Adaptive+Responsive Web Design

Het ideaalplaatje wanneer er voldoende middelen beschikbaar zijn om de bestaande website in z’n geheel te vervangen door een nieuwe, duurzame, responsive website. De Adaptive+Responsive website gaat het beste om met de restricties van veel mobiele gebruikers: kleine schermpjes, langzame processors en trage internetverbindingen. Ook biedt deze aanpak gelegenheid om apparaat-specifieke mogelijkheden te benutten, zoals gps plaatsbepaling e.d.

Voordelen

Een schone lei. Een Adaptive+Responsive Web Design betekent een nieuw begin. Het biedt de kans om de website te baseren op een doordachte contentstrategie en een schone code-base zonder de balast van verouderde technologie.

Breder bereik. Je kunt de website werkelijk mobile-first en content first ontwikkelen en door middel van progressive enhancement een veel breder spectrum aan mobiele apparaten bedienen.

Prestaties. Bij een schone, mobile-first aanpak kunnen de ontwikkelaars de prestaties van de website vanaf het begin optimaliseren voor snelheid. Dit heeft grote voordelen voor de gebruikerservaring van alle denkbare bezoekers en daarmee voor de conversie van de website.

Allesomvattend. Een Adaptive+Responsive website biedt een optimale gebruikerservaring aan alle typen bezoekers. Van de kleinste smartphones en wearable gadgets tot de grootste Smart-TV’s. Het is een alles-in-een oplossing met alle voordelen van dien.

Duurzaam. Een schone start met een Adaptive+Responsive website biedt de gelegenheid om te ontwikkelen volgens de principes van De Duurzame Website. De Duurzame Website past zich moeiteloos aan, is eenvoudig uit te breiden met nieuwe functies, simpel aan te passen aan een nieuwe huisstijl, en je hoeft nooit meer een ingrijpend re-design te doen met alle kosten en risico’s van dien.

Nadelen

Het kost tijd en geld. Dit is bepaald geen quick fix. De realisatie van een nieuwe Adaptive+Responsive website vergt een behoorlijke investering van tijd en geld. De kunst is om ervoor te zorgen dat deze investering zich de jaren erna dubbel en dwars terugverdient.

Het is contra-intuïtief. Het is uitdagend om mensen en organisaties anders te laten denken. De Adaptive+Responsive aanpak zet alles op z’n kop. Voor veel mensen zal het contra-intuïtief aanvoelen om niet meer te denken in pixels en sterk ingesleten begrippen als ‘above the fold’.

Het is ingewikkeld. Een compleet re-design van een website is een ingewikkeld traject. En omdat er veel op het spel staat, is het vaak ook politiek gevoelig binnen een grotere organisatie. Dit vergt tact en doortastendheid van het team.

Het is riskant. Zoals hierboven al gezegd, mensen houden niet van verandering. Elk ingrijpend re-design - hoe groot de verbetering ook - roept altijd in eerste instantie weerstand op bij gebruikers. Denk alleen maar aan de commotie die er ontstaat wanneer Facebook iets verandert aan de interface.

4) Beetje bij beetje

Een kruising tussen ombouwen en de losse responsive mobiele site. In plaats van een nieuwe site voor alleen smartphones, begin je met de onderdelen van de website waar de mobiele bezoekers de meeste problemen ondervinden en vervolgens pas je de website beetje bij beetje aan.

Binnen deze strategie zijn er twee varianten:

1) Pagina voor pagina. Daarbij vervang je in een bestaande site eerst de belangrijkste pagina’s door responsive opgezette versies. Microsoft koos voor deze aanpak en begon met de homepages.

2) Component voor component. Coolblue koos voor deze strategie. Deze zeer succesvolle Nederlandse webwinkel begon juist aan het eind: bij het winkelmandje. Dit omdat ze in hun statistieken zagen dat mobiele gebruikers juist daar de meeste problemen ondervonden.

Voordelen

Gebruikers kunnen rustig wennen. Grote re-designs zijn zoals gezegd riskant. Op deze manier kun je de bezoekers rustig laten wennen aan de nieuwe, responsive interface. Door telkens nieuwe pagina’s of componenten responsive te maken, blijf je in de goede richting bewegen.

Hapklare brokken. Voor het ontwikkelteam is het overzichtelijk om telkens een pagina of een component aan te pakken. Wat ze daarbij leren, kunnen ze bij de volgende pagina of het volgende component gelijk weer toepassen.

Direct resultaat. Een compleet re-design kost veel tijd en daardoor duurt het lang voordat de mobiele gebruikers ervan profiteren. Door de website beetje bij beetje responsive te maken kun je sneller van de voordelen profiteren.

Nadelen

Verwarrend. Voor bezoekers kan het verwarrend zijn wanneer ze binnen één en dezelfde website afwisselend responsive en niet responsive pagina’s of componenten tegenkomen. 

Eindeloos. Met deze aanpak loop je het risico dat de nieuwe responsive website die het einddoel is er nooit komt. Sommige uithoeken van de site blijven misschien wel tot in lengte van dagen niet responsive.

Technische conflicten. Wat gebeurt er als een nieuwe, responsive module met de laatste technologie in conflict komt met een bestaande module met verouderde technologie? Deze aanpak kan zeer uitdagend zijn als het gaat om de technische architectuur.

Leestip: Mobiele Trends 2016

Conclusie

Wat is de beste strategie voor jouw organisatie? Daarbij spelen twee factoren de hoofdrol en die moet je tegen elkaar afwegen:

1) Hoe urgent is het probleem? Als momenteel meer dan de helft van je bezoekers mobiel is en de bounce rate en/of conversieratio van deze bezoekers is belabberd heb je een urgent probleem. Maar als nog maar 5% van je bezoekers mobiel is en je bouncerate en/of conversieratio is acceptabel heb je geen urgent probleem.

2) Beschik ik over voldoende tijd en middelen? Is er budget voor een compleet re-design of alleen voor wat lopend onderhoud? Hebben jij en je team wel tijd voor een groot project naast jullie dagelijkse werk?

De figuur hieronder geeft bij benadering aan welke keuze in welke situatie het meest voor de hand ligt.

Responsive website beslis-schema

Mijn responsive design strategie was/is/wordt:

Please select at least one option.

Leestip: Responsive website of native app? Allebei!

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

Nieuwe, snelle, veilige responsive website?
Bekijk ons werk

Deze post delen?

e book online marketing checklist 2018

Meer inspiratie voor 2019?

Wekelijks een e-mail notificatie ontvangen als onze nieuwste blog live staat?
Ja graag! →

0 reacties op “

Er zijn nog geen reacties.

Reageren niet meer mogelijk.