Responsive web design

, # Usability & user experience, # Webdesign, # Mobile

Als website eigenaar wil je zoveel mogelijk bezoekers een website voorschotelen die optimaal werkt op het toestel waarmee ze surfen. Een website maken per soort toestel (smartphone, tablet, computer, ...) is een optie. Maar die keuze is duur en heeft bovendien een aantal grote nadelen.

In dit artikel leg ik uit:

  • Waarom de klassieke mobiele website voorbijgestreefd is;
  • Wat responsive web design is;
  • Waarom responsive web design de toekomst is.

De klassieke mobiele website werkt niet meer

De evolutie van mobiel surfen die ik eerder schetste, zou dat eigenlijk al heel duidelijk moeten maken:

  • mensen surfen meer en meer mobiel (en dit stijgt explosief)
  • er zijn veel verschillende soorten apparaten waarmee je mobiel kan surfen

Ik zet mijn stelling kracht bij door een aantal concrete vereisten op te stellen waaraan een goed werkende mobiele website moet voldoen... en waaraan een klassieke mobiele website niet voldoet:

1. Een website moet optimaal werken in verschillende resoluties

Een iPhone 3GS heeft een resolutie van 480x320 pixels (163 ppi); bij een Samsung Galaxy Tab is dat 1280x800. Tot je beide toestellen in portrait-modus (rechtopstaand) houdt. Dan wordt het 320x480 en 800x1280. Vervelend als je website dan te breed of veel te smal is.

Bedenk ook dat er steeds nieuwe toestellen zullen komen, met nog andere resoluties. De ideale website ziet er altijd optimaal uit, ongeacht de resolutie die je bezoeker gebruikt.

2. Alle info moet raadpleegbaar zijn

Er werd vroeger wel eens gezegd dat mobiele surfers andere informatie zoeken dan laptopgebruikers.

Da’s niet altijd zo. Zeker voor content-driven websites (zie verder), mag je er niet van uitgaan dat een mobiele gebruiker ook daadwerkelijk ‘mobiel’ is. Iemand kan evengoed met z’n smarpthone in bed liggen of met z’n iPad in de zetel zitten.

Een bezoeker kiest zelf waar, hoe en wanneer hij jouw website bezoekt. Over dit onderwerp verscheen deze week trouwens een interessant artikel van Thomas Baekdal: The Real Mobile Shift - For Publishers.

Ik heb een korte test gedaan: ik wilde te weten komen hoe ik mijn iPhone moest configureren om te surfen via de mobiele verbinding. Ik bezocht via m'n iPhone de mobiele website van een aantal Belgische operators:

Resultaat: het staat er bij geen een van de vier op! Het lijkt mij nochtans zowat het meest cruciale stukje informatie te zijn dat je wil hebben van je mobiele operator.
Ga er dus niet van uit dat mobiele gebruikers alleen je adres of openingsuren willen opzoeken. Ze zijn ook op zoek naar andere informatie.

3. Alle info moet makkelijk vindbaar zijn met een zoekmachine

Ook mobiele surfers gebruiken zoekmachines. Omdat een mobiele website typisch veel minder info bevat en daardoor minder goed scoort qua SEO, duiken de pagina’s ervan veel minder makkelijk op in Google of Bing.

Wat vaak gebeurt, is dat je als mobiele surfer de pagina’s terugvindt van de volledige (niet-mobiele) website en dat je bij het doorklikken geredirect wordt naar de mobiele website. De pagina die je wilde zien mag je daar dan opnieuw gaan zoeken. Zeer vervelend en nefast voor een optimale conversie.

4. Dezelfde info moet altijd op dezelfde url te staan

Mensen delen links. Op Facebook, op Twitter, via e-mail, ... Ze doen dat met verschillende apparaten, net zoals de mensen die er op klikken.
Wie op een link klikt, wil op een website terechtkomen die geoptimaliseerd is voor zijn toestel, niet voor het toestel van diegene die de link deelde.

Met andere woorden: je wil als laptopgebruiker niet op een mobiele website terechtkomen omdat je een link volgde die een smartphonegebruiker deelde.

Responsive design, de toekomst van het web

Een website met een responsive design is een website die met al die net opgesomde vereisten rekening houdt.

Wat is responsive web design?

De beste manier om uit te leggen wat responsive web design is, is om er meteen een voorbeeld bij te nemen:

  1. surf naar fork-cms.com
  2. maak het venster van je browser zo smal mogelijk

Nog een aantal andere voorbeelden:

Je ziet dat de layout van de website zich continu aanpast aan de schermgrootte. Zowel met een smartphone als met een brede laptop zie je dezelfde website zo optimaal mogelijk.

Technisch gezien is er geen aparte website meer voor desktop- of mobiele apparaten.

En da's het enorme voordeel van responsive web design. Ik hoef wellicht niet te vertellen dat zoekrobots dit zeer plezant vinden: dezelfde info staat altijd op 1 unieke url. Ook het delen van url’s wordt hierdoor weer makkelijk.

De zelf-aanpassende layout betekent dat je op een smartphone niet steeds moet in- en uitzoomen. Via nieuwe technieken kan er bovendien voor gezorgd worden dat foto’s geladen worden in de grootte waarin ze nodig zijn. Op een mobieltje heb je immers geen hoge-resolutie foto’s nodig. Daardoor laadt alles ook lekker snel.

Responsive web design is de toekomst voor content-driven websites

Ik ben er hard van overtuigd dat ‘responsive web design’ de toekomst is van het web. En dan zeker en vooral voor content-driven websites. Een content-driven website is een website waarbij het vinden van informatie een belangrijke hoofdtaak is van de bezoekers.

Enkele voorbeelden van content-driven websites:

Ook voor apps?

Of web apps (waar de focus op het uitvoeren van een actie ligt) dezelfde weg opgaan is moeilijker te zeggen. Toch zijn er trends die in die richting wijzen: bekijk m.facebook.com maar eens op een smartphone en daarna op een tabletcomputer. Dezelfde interface volgt mooi de grootte van het scherm. En opvallend: die web interface ziet er exact hetzelfde uit als die van de iOS app.

Niet nieuw

Responsive design is trouwens helemaal niet nieuw en geen uitvinding van de webwereld. Open iCal (Mac) of Outlook (Windows) en wijzig de grootte van het venster. Inderdaad, de interface past zich mooi aan. Da’s responsive design.

Het moet nog beter

Toch zijn we er nog niet helemaal. Een jammer gemis is dat een website niet te weten kan komen wat de snelheid is van de verbinding waarmee iemand surft. Op een klein scherm kan je altijd de kleine versie van foto’s tonen. Maar op een groot scherm wil je misschien niet de grote foto zien als je via een erg trage verbinding surft.

Ik ben er zeker van dat dat probleem gaat opgelost worden: ofwel doordat de mobiele verbindingen snel genoeg worden, ofwel door een manier die het mogelijk maakt om de snelheid te detecteren waardoor er op ingespeeld kan worden.

Conclusie

Responsive design is een logisch volgende stap in de manier waarop websites gebouwd worden. Mensen gebruiken steeds meer verschillende soorten toestellen om het web te consulteren. Ze vinden hun info voor een groot stuk door ernaar te zoeken via een een zoekmachine.

Als website eigenaar wil je zoveel mogelijk bezoekers een website voorschotelen die optimaal werkt op het toestel waarmee ze surfen. Een website maken per soort toestel (smartphone, tablet, computer, ...) is een optie. Maar die keuze is duur en heeft bovendien een aantal grote nadelen.

Een website met responsive design heeft dan alleen maar voordelen.

Meer weten? Advies nodig?

Kom gerust langs voor een kop koffie en een goed gesprek. Wijs geeft strategisch advies, en helpt bij het uitwerken en verbeteren van all things digital.

Gerelateerde diensten

Gerelateerde cases

  • Een nieuwe site voor ExtraTijd met een focus op online vertrouwen

  • Nieuwe website voor Partena Ziekenfonds

 

Al 24 reacties

Laat hier een reactie achter of contacteer ons via e-mail


schreef

Beste Bram,

Mooi artikel! Ik geloof ook heel sterk in responsive maar heb toch nog vraagtekens bij de inhoud dat je mobiel plaatst en hoe dat de snelheid beïnvloed.

Het is ontzettend irritant als bepaalde inhoud niet beschikbaar is op je mobiele website, daar twijfel ik geen seconde aan. Maar een kleiner scherm heeft zijn gevolgen en vertaalt zich toch in de inhoud?

Ik zou bvb in een overzicht van producten op een mobiele versie van een website enkel een foto en de naam van het product laten zien. En op de desktop versie ook nog de prijs en misschien zelfs een kleine beschrijving.

Alle inhoud zal uiteindelijk beschikbaar zijn maar op mobiel moet je eens extra doorklikken om een beschrijving of de prijs te lezen.

Het "probleem" bij responsive is dan dat je dezelfde html voorgeschoteld krijgt en je die extra informatie brut weg verbergt. Dat kan een hoop extra kb's zijn om in te laden!

Daarom lees ik bvb. de standaard liever via hun app, die inhoud laadt ontzettend snel. Als de standaard enkel een responsive website zou hebben moet ik wachten tot de html + css + javascript + afbeeldingen (al dan niet geoptimaliseerd) zijn ingeladen.

Ik geloof dat responsive een standaard is waaraan elke website aan zou moeten voldoen. Maar ik zou ook al snel overgaan naar een toestel geoptimaliseerde beleving, zeker voor smartphones.

Met vriendelijke groet,

Dieter

Stijn De Mulder

Stijn De Mulder
schreef

Nog niet volledig gelezen maar het volgende viel me op:

Als je wil opzoeken hoe je je iPhone moet configureren om te surfen kan je toch nog niet surfen en hoef je dit dus ook niet op de mobiele site te zoeken...


schreef

Voor verwarde zoekmachine-gebruikers: tot voor kort stond er op deze URL een ander artikel over responsive web design, met ongeveer de tegenovergestelde boodschap: http://web.archive.org/web/20101101082302/http://www.netlash.com/blog/detail/responsive-web-design


schreef

Ik ben al een tijdje bezig met onderzoek te doen naar web app development voor het toekomstige Windows 8 platform.

Responsive webdesign staat er zeer centraal als de 'aangewezen' werkwijze voor desktop app development.

http://msdn.microsoft.com/en-us/library/windows/apps/hh465386

Rekeninghoudend dat ook IE 10 mulitple views in win 8 ondersteund zal dit ook verwacht worden van de websites die je bezoekt in win 8.

De vraag is dus niet 'wanneer' en 'of' responsive webdesign zal doorbreken.

Een nieuwe site zou 'vandaag' al responsive moeten zijn, alleen al om in 2012 klaar te zien voor windows 8.

Het enige nadeel, zoals je in je artikel beschreef (bandbreedte) zal wellicht zichzelf oplossen door de komst van hogere mobiele bandbreedte.


schreef

@Mathias: goed opgemerkt.

Het web evolueert en onze visie uiteraard ook. Omdat we bezoekers liefst naar een up-to-date visie sturen, hebben we de url aangepast.

Ik ben er zeker van dat de zoekmachines dat snel zullen opmerken en juist zullen indexeren.

Voor de liefhebbers: het oude artikel (met een ondertussen verouderde visie) vind je nog steeds terug op onze blog: http://www.netlash.com/blog/detail/responsive-web-design-visie-2010

Robert

Robert
schreef

Bram,

Ook hier staan we helemaal achter responsive design.

Al is het volgens mij ook soms nuttig om na te denken of er content is die mobiel erg relevant is. (Hangt veel gewoon van het project af.)

Zo hebben H&M en MacDonalds ooit beslist om de store locator direct te tonen.


schreef

@Dieter:

Tekst laden gaat altijd snel, ook op trage verbindingen. Voor de extra javascript, css, ... zijn er technieken om alleen die code in te laden die nodig is.

Probeer eens de krant http://bostonglobe.com op je smartphone. Zelfs via EDGE laadt die snel.

@Stijn:

Scherp gezien :) Maar je kan natuurlijk ook via wifi opzoeken hoe je je mobiele verbinding moet instellen.

@ Kevin:

Klopt. Ik hoorde Arturo Toledo van Microsoft onlangs exact hetzelfde vertellen.


schreef

@Robert:

Ja en neen.

Ja, je moet je website natuurlijk afstemmen op de toptaken van je bezoekers.

Neen want via een mobieltje surft, is niet per se onderweg. En dan is het knap vervelend dat die store-locator steeds in de weg zit.

Als je natuurlijk vaststelt dat bijna alle smartphonegebruikers vooral het adres van je shop willen vinden, dan is het aangeraden om daar op in te spelen.


schreef

Enkele uitdagingen voor responsive design:

1/ Technisch

Ongelooflijk spannende en vernieuwende tijden voor web ontwikkelaars. Maar tegelijk ook een zeer onstabiele. We moeten toegeven, niet lang geleden was er één device en één probleem: de desktop en IE6. Nu is er de tsunami van apparaten en zijn er onophoudelijk nieuw opduikende technische uitdagingen. (MediaMarket als testlab)

Responsive design lijkt voorlopig een goed hulpmiddel, maar is geen oplossing voor alles.

vb: Die nieuwe technieken voor afbeeldingen staan nog helemaal niet op punt. Ploeg maar eens door de drie artikels op Cloudfour. Dit is het laatste in de reeks: http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/.

2/ Content strategie

Het is nu al een verduiveld moeilijke klus om klanten er echt toe te brengen om hun content in orde te krijgen in functie van hun gebruikers.

Er wordt nog massaal en blindelings veel te veel bagger in content management systemen gepompt. En die technische systemen bepalen nog veel te veel hoe en welke content er wordt getoond. (De verpakking bepaald de inhoud.)

Een 'responsive approach' zal het nog moeilijker maken om de juiste content beslissingen te nemen.

'Schrijven voor het internet' is niet meer wat het was. Laat staan publiceren op het internet.

3/ Tools

Photoshop, Fireworks, en co zijn niet meer geschikt. Het zijn verouderde, logge dingen geworden. Hoogstens nog geschikt voor print. We hebben beters en anders nodig. Ook voor prototyping zijn allicht nieuwe tools nodig. (Responsive Axure)

4/ Gebruikersonderzoek

Er zal nog meer onderzoek nodig zijn naar het echte profiel en het gedrag van de gebruiker in zijn vele gedaantes in een steeds veranderende context. Meer toestellen, meer persona's, meer scenario's, meer protoypes, meer gebruikerstesten.

5/ Adverteerders

Zie hiervoor de interessante artikels van Mark Boulton (http://www.markboulton.co.uk/journal/comments/responsive-advertising) en Roger Black (http://rogerblack.com/blog/post/the_holy_grail_part_2)

Responsive design is fantastisch omdat het web zich eindelijk losmaakt van oude broer 'fixed size' print. We zitten op volle zee en het bootje is eigenlijk nog niet helemaal zeewaardig. Maar we varen en er is geen weg terug.

Terence T

Terence T
schreef

Ik schaar mij achter het standpunt van Dieter. Time is of the essence.

Voor anno 2010 zou ik eerder het gebruik van de mobi site in combinatie met responsive webdesign aanraden.

Ja men moet 2 sites onderhouden: een light responsive mobi (je kan deze versie ook beschouwen als een WAI-AAA compliant site, zie text-only paragraaf van de standaard) en de gewone responsive met alle toeters en bellen.

Amazon: 1% revenue increase for every 100ms of improvement

Indien je een goede CMS-systeem gebruikt zou deze al het werk voor jezelf al kunnen oplossen: beide site versies genereren. (je hoort deze ook niet bij iedere request aan te maken want uiteraard zal het conditioneel strippen van bepaalde tags/elementen zorgen voor de nodige overhead, 1x genereren en daarna laten serverside cachen)

Just my .2 cents


schreef

Voor alle duidelijkheid, ik heb het originele artikel geschreven, mijn mening is ondertussen ook wel veranderd.

Die mening is er een met veel "als" en "het hangt er van af", maar komt in grote lijnen overeen met wat in dit artikel geschreven wordt. Puik werk Bram.

Een ruwe versie van die mening, die wat te lang is om als comment te posten, kan je vinden op https://raw.github.com/gist/1424405/5614c513d685abae68f4cf7fb746181813dd6a09/responsive_updated.txt


schreef

Goed te lezen dat responsive design meer tractie krijgt onder invloed van toenemend mobiel gebruik en dat puur pixelbased Photoshop design ook stilaan verdwijnt.

UX krijgt zo vanzelf voorrang op design (is niet altijd zo geweest) en dat kan ik enkel toejuichen.

Als we nu alles responsive krijgen, niet enkel de markup en styling, maar ook de content/assets, dan kan je werkelijk spreken van een responsive site.

En hopelijk ook meer van "content first".

Jan Nikolaas Gijsen

Jan Nikolaas Gijsen
schreef

Toch blijft het altijd oppassen dat de variaties tussen je verschillende 'width-views' (als ik het zo even mag stellen) consequent blijft. Vaak gaat met in de content snoeien die men beschikbaar maakt op een "kleine" versie, zodat de page-flows tussen je verschillende versies aardig kan verschillen. Moest je dan een gebruiker krijgen die je site al van zijn notebook kent, dan moet hij opnieuw gaan zoeken voor dezelfde informatie in de mobiele versie. Soms kan dit zelfs drop-out scenario's veroorzaken waardoor de gebruiker denkt dat de content niet meer bestaat. Dus het blijft een moeilijke, en de klassieke "switch to full website" kan je dan ook enkel nog maar in een verbasterde vorm brengen.

Ook blijven die adaptieve versies vaak beperkt in hoe ze de verschillende ratios te lijf gaan. De meeste passen zich aan op basis van de waargenomen breedte van de client-browser, terwijl de gereduceerde hoogte in landscape oriëntaties vaak vergeten worden. Laat staan dan men zich nog altijd ongemakkelijk voelt om na te denken over horizontaal scrollen in het tijdperk van web apps ipv websites, en de multitouch muisvlakken en touchscreens ipv de scrollwieltjes.

Maar goed. :)

Moest je trouwens toch de snelheid van een client-browser willen (blijven) meten, als je er wat tijd in wil steken dan kan het toch via een vrij "simpele" methode. Zo kan je bvb asynchroon via javascript een asset met een vaste grootte downloaden terwijl je meet hoelang de client ervoor nodig heeft. Gezien je vooraf kan bepalen hoe lang het gemiddeld mag duren voor die asset binnen te halen per 'connectiesoort' kan je dan toch wel een educated guess maken. Vaak kan je dit proces ook asynchroon laten verder lopen elke x-aantal minuten. Zo kan je zelfs opvangen moest je gebruiker met zijn mobieltje wisselen tussen Wi-Fi thuis en 3G of trager on the go.

De meeste video streaming plugins of players in je browser werken op hetzelfde principe. Ze bepalen een "baseline" snelheid, door je IP geografisch te plaatsen t.o.v. hun server, dat te mappen met welke browser-client ze detecteren en de weergave afmetingen (mobile, desktop), mogelijk ook nog het tijdstip van de dag (om netwerk/breedband consumptie in te schatten), enz. En dan blijven ze ook gewoon continue meten hoe snel je browser de verschillende data pakketjes binnenhaalt. Met die informatie kunnen ze je video kwaliteit dan verhogen of verlagen.

Maar ook zit je met dezelfde bedenking als voor mijn eerste punt. Hoe ga je de gebruiker dan toch weer een optie presenteren om zelf te grootte/niveau/kwaliteit te kiezen, ongeacht van wat jij voor hem of har kan bepalen. :-)


schreef

Krachtig artikel Bram. Ik geef toe dat ik er zelf mee aan het sukkelen ben. Het is een uitdaging om je site toegankelijk te maken voor iedereen, omdat je dan soms aan conversie kan inboeten. Dat merk ik toch bij mezelf.

Ik probeer op belangrijke landingspagina's via een scriptje te werken dat meteen even nagaat of een gebruiker bijv. met een iPhone surft, zodat hij dan meteen een redirect krijgt naar een pagina die voor iPhone geoptimaliseerd werd.

Michel

Michel
schreef

Voor de detectie van mobiele toestellen kan je gebruik maken van de Tera-Wurfl database en api. Beide zijn open source.

Het werkt op basis van de user agent die je meekrijgt in de header van een request.De db wordt actief onderhouden en kan je heel wat informatie verschaffen over het type toestel waarmee de bezoeker surft.

Ik heb er goede ervaringen mee en het kan een krachtige tool zijn om responsive design te integreren in je project.

http://dbapi.scientiamobile.com/wiki/index.php/Main_Page


schreef

het wordt er alleszins niet makkelijker op voor webdesigners!


schreef

Niet makkelijker maar het moet een uitdaging blijven voor iedereen hé. Moest het gewoon plug en play zijn zou er ook niets leuks meer aan zijn. Ik vraag me af welke nifty dingen er nog allemaal zitten aan te komen ...


schreef

Knap artikel en het wordt er inderdaad niet makkelijker op voor webdesigners. De website van de VDAB vind ik echt een knap voorbeeld van responsive webdesign, een echt pareltje is die website geworden


schreef

Meerdere websites voor verschillende mediums is niet alleen kostbaar. Een ander voordeel aan een responsive website is dat er maar vanuit één broncode gewerkt hoeft te worden. Leuk geschreven artikel en leerzaam voor degene die nog niet veel over dit onderwerp afweten.

Een kritische noot mag, wijs!

Een kritische noot mag, wijs!
schreef

De meeste artikels over (nieuwe/recente) ontwikkelingen zijn meestal sterk vereenvoudigde vertalingen van de toonaangevende internationale kanalen. Kan hier gewag gemaakt worden van iets als "copy-paste SEO"? Geen wet die daarmee geschonden wordt, maar eerlijker is niet te laten uitschijnen dat het baanbrekende werk de verdienste is van deze fijne bende. Vergeet vooral niet dat er ook wakkere consultants of kleinere bedrijfjes actief zijn die het graag kleiner houden maar omwille van zoekmachine-manipulatie en decision makers die totaal geen inzicht hebben (of denken nodig te hebben) in het medium en een succesvolle samenwerking. Misschien meteen ook nog een reactie op http://wijs.be/nl/trends-inzichten/blog/detail/webdesign-kwaliteitslabel

Een kritische noot mocht - aanvulling

Een kritische noot mocht - aanvulling
schreef

En misschien moet ik leren de voorlaatste zin volledig in te tikken: "...in het medium en een succesvolle samenwerking *(en deels ook omdat zij minder tijd hebben om te bloggen,) niet of minder in aanmerking komen voor mooie projecten, maar wel bij zonder veel in hun mars hebben.*


schreef

Mijn complimenten, heel mooi artikel! Ik ben het er helemaal mee eens dat responsive webdesign alleen maar voordelen biedt. Het gebruik van mobiele apparaten is nog steeds aan het toenemen en met een website zonder responsive webdesign tel je snel niet meer mee in de online zakenwereld. Zelf heb ik vorige week ook mijn website laten optimaliseren (door Vrijdagonline) en dit bevalt top!


schreef

Responsive is zeker de toekomst van het web, en speelt momenteel al een cruciale rol. Dat wil niet zeggen dat élke website responsive dient te zijn. Een responsive website maken kost extra tijd en geld, wanneer jouw website niet veel met een smartphone bezocht wordt (en dit komt meer voor dan je denkt), dan is het een overweging om nog niet responsive te gaan.


schreef

Zonder responsive webdesign zou het uitermate frustrerend worden voor de mobiele gebruiker. Er is een grote toename in het mobiel gebruik, daarom is het nu zeker een goede investering om er op tijd bij te zijn, ook al kost dit natuurlijk extra geld om te laten ontwikkelen. Investeren in de toekomst is soms noodzakelijk, vooral in de zakelijke wereld.

Plaats een nieuwe reactie