Responsive web design

Responsive web design

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.

Bram

Bram Vanderhaeghe
UX Architect & Strategist

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!