Waarschijnlijk heb je de termen responsive webdesign - al dan niet afgekort tot RWD - en zijn slimmere broertje adaptive webdesign (AWD) wel vaker horen vallen. Misschien weet je niet wat het precies is en wat de verschillen zijn. Waarom is een responsive of adaptive ontwerp beter? We zetten het even op een rijtje.
Waarom is het ontstaan?
De eisen gesteld aan webdesign zijn veranderd door de enorme groei van de markt voor de smartphone, tablet en iPad. Mensen hadden opeens de mogelijkheid om overal en altijd online te zijn en die pakten ze met gretige handjes aan.
Het verschil in schermgrootte tussen een smartphone, tablet en desktop zorgde ervoor dat de meeste websites niet langer goed werden weergegeven. Het antwoord kwam in de vorm van responsive en adaptive webdesign, bedacht door Ethan Marcotte.
In plaats van ontwerpen in pixels, begon Marcotte te werken met flexibele grids en percentages.
Responsive webdesign: wat is het precies?
Bij het maken van een responsive webontwerp wordt er optimaal gebruik gemaakt van de beschikbare ruimte zonder dat de leesbaarheid daaronder lijdt. Het ontwerp reageert op de ruimte van het scherm of venster en past zich automatisch aan omdat de grids flexibel zijn.
Het doel is een betere gebruikerservaring op alle apparaten, onafhankelijk van het schermformaat. Het nadeel is een langere laadtijd omdat de template continu moet berekenen hoe breed het weergavescherm is en welke content opgehaald moet worden.
Dat kost veel uren progammeerwerk, testen en problemen oplossen. Een responsive design is om die reden wat kostbaarder.
Adaptive webdesign: een stapje verder
Responsive design was een mooie eerste stap. Toch bleek dat er meer nodig was om een website goed te laten functioneren op mobiele apparaten. Vooral de langere laadtijd is problematisch voor de haastige mobiele gebruiker die onderweg van A naar B snel wat moet opzoeken.
Aaron Gustafson was de eerste om daarmee aan de gang te gaan. Zijn eigen website is supersimpel. Een adaptive webdesign zorgt ervoor dat de functionaliteit van de website zich automatisch aanpast aan het schermformaat, locatie en tijdstip.
Afhankelijk vanaf welk apparaat de site wordt geopend, wordt de daarbij aansluitende template opgehaald. Je kunt net zoveel of zoweinig functionaliteit toevoegen als je maar wilt om de content beter te laten aansluiten bij de verwachting van de bezoeker. De website laadt snel op alle apparaten.
Ook aan adaptive design hangt een hoger prijskaartje omdat het heel veel werk is om te maken. Het grootste voordeel is dat je geen aparte mobiele versie hoeft te laten bouwen en content maar op één weblocatie beheert wordt.
Mobile first en AWD
Het is de tijd van mobiel internet. Steeds meer mensen bezoeken sites on-the-go vanaf hun smartphone. Niet voor niets lees je overal artikelen over mobile first. Nou is de term mobile first inmiddels alweer verjaard, maar toch is het verstandig om veel aandacht te besteden aan mobiel.
Met Google Analytics kun je bezoekers op je site volgen. Wat vaak gezien wordt is dat mensen beginnen op een smartphone en verdergaan op een tablet of desktop. Andersom kan ook.
Blije bezoekers komen terug
Een optimale gebruikerservaring geeft de doorslag of mensen op je site blijven, snel vertrekken, blijven terugkeren en/of je site met anderen delen. Door te werken met een adaptive webdesign kun je bezoekers veel specifieker bedienen met behoud van een snelle laadtijd.
Handige extensie
Met de simple mobile detection extensie meet je of iemand een mobiele bezoeker is. Relevante informatie over het apparaat wordt opgehaald en opgeslagen, zodat altijd de juiste template wordt ingeladen. De extensie is gratis te downloaden.
Test je responsive webdesign online
Voordat een nieuwe website op internet gepubliceerd wordt, is het ontwerp uitgebreid getest in verschillende browsers. Uiteraard is het net zo belangrijk om te testen hoe goed je prachtige responsive website uit de verf komt op verschillende apparaten.
De onderlinge verschillen tussen smartphones zijn groot. Vergelijk bijvoorbeeld een Samsung Galaxy mini maar eens met de Note of de S5 en 6! Om aan die behoefte te voldoen hebben we een website gemaakt waar je dat kunt doen zonder allerlei smartphones en tablets te hoeven aanschaffen.
Conclusie
Ondanks dat het in eerste instantie duurder is om een responsive of adaptive website te laten maken, valt het op de langere termijn best mee. Het voordeel is dat je niet óók nog een mobiele versie of een app hoeft te laten bouwen. Ook fijn voor de content manager. Je hoeft maar op één plek content te beheren. Het komt op je bezoekers heel professioneel over als je site net zo snel, leuk en goed is op een telefoon als op een desktop. Om er toch vanuit te gaan dat het allemaal vlekkeloos verloopt, kun je er ook voor kiezen om je website te laten maken.
Interesse gekregen in responsive webdesign?
We denken graag met je mee. Bel, mail, kom langs en vertel!
Andere artikelen
Tim Daalderop. Frankwatching.Wat je moet weten over responsive webdesign
Ryan Boudreaux. TechRepublic. What is the difference between responsive vs adaptive web design