Responsive design: de voors en tegens

De desktop of laptop is allang niet meer het enige apparaat waarmee we over het web surfen. Ook smartphones en tablets lenen zich hier uitstekend voor. Maar websites zijn veelal ontworpen met een 'normale' pc in gedachte. Een breedte van je website van 1000 pixels of meer is eerder regel dan uitzondering. Niet zo vreemd, moderne breedbeeldmonitoren kunnen deze gemakkelijk en zonder problemen weergeven.

Maar op je laptop of tablet is dat wellicht een ander verhaal. Deze schermen zijn veel kleiner en hebben soms moeite met het goed en leesbaar weergeven van een website. In dat geval is 'responsive design' een mogelijke oplossing.

Wat houdt het precies in? Een website die ontworpen is volgens de principes van responsive design heeft altijd dezelfde html-code en url-structuur, ongeacht of je deze bezoekt vanaf een laptop, desktop, tablet of smartphone. Maar de css, de code waarin de vormgeving ligt opgesloten, die past zich aan het bezoekende platform aan. Bezoek je een website met je smartphone, dan krijg je een ander design voorgeschoteld dan wanneer je deze op een normale computer zou bezoeken, terwijl de rest van de techniek exact gelijk is.

Scenario's

Wanneer moet je je website nou voorzien van responsive design? Daar zijn de meningen over verdeeld. Een logisch geval zou zijn wanneer jouw website erg onleesbaar of onbruikbaar wordt op kleinere (aanraak)schermen. Bijvoorbeeld omdat je website een klein font gebruikt, of je menu-items relatief krap vormgegeven zijn. Of omdat jouw website op een mobiel of tablet erg veel scrollen zou vereisen. In die gevallen kan het lonen voor specifieke schermformaten een specifieke vormgeving aan te bieden. De vormgeving kun je immers helemaal afstemmen op een kleiner scherm en bovendien rekening houden met aanraakbediening.

Ook biedt responsive design, in tegenstelling tot een compleet mobiele website, een ander voordeel: je hebt maar een url. In het geval van een mobiele site zou je url immers iets worden als m.jouwbedrijf.nl. Die eenduidigheid verhoogt de herkenbaarheid bij de bezoeker. Ook worden bezoekers niet omgeleid. Een ander voordeel: bots en crawlers hoeven maar één website door. Voor hen is de css immers niet relevant, zij spitten alleen je html door en die blijft gewoon hetzelfde. Je hoeft de SEO-authoriteit van je normale pagina niet met allerlei trucs te koppelen aan die van je mobiele pagina of website, want je biedt immers maar één pagina of website aan.

Tegenstanders

Toch is niet iedereen voorstander van responsive design. Zo zeggen kritische experts dat het je bezoeker kan verwarren, omdat de website er anders uitziet dan hij of zij verwacht. En het laatste wat je wil is afwijken van de verwachting van je bezoekers. Zijn ze gewend aan je website zoals het wordt weergegeven op de desktop, dan gooi je met responsive design die gewenning in één keer overboord.

Een ander aspect is de kwaliteit van mobiele browsers. Moderne mobiele browsers bieden tal van mogelijkheden om de weergave van een 'niet-geoptimaliseerde' website toch prima te bekijken. Denk aan pinch-to-zoom, denk aan een automatisch vergroten van kleine elementen, denk aan een dubbel-tap om in te zoomen op een bepaald deel van de site. Gebruikers zijn hiermee inmiddels zo vertrouwd dat je je kunt afvragen of een apart design voor kleine schermen nog echt nodig is.

Bedenk ook dat de implementatie van een responsive design linksom of rechtsom niet gratis is. Het kost tijd, en dit vertaalt zich meestal in een hogere factuur van je websitebouwer. In het gunstigste geval kun je het zelf, maar ook dan kost het je jouw kostbare tijd. Aan de andere kant is het doorvoeren van een responsive design minder werk dan het bouwen van een complete mobiele versie van je website. Alleen de css hoeft immers verbouwd te worden.

Het loont in ieder geval de moeite eerst te kijken of jouw website überhaupt veel bezocht wordt via mobiele apparaten. Website-statistieken als Google Analytics bieden daar een eenduidig antwoord op. Bedenk wel dat de lage bezoekcijfers vanaf mobiele apparaten ook juist het gevolg kunnen zijn van het ontbreken van een responsive design. Als jouw website erg ontoegankelijk is op een klein scherm, is het wellicht niet zo vreemd dat je vanaf die apparaten weinig bezoek trekt.

Geen one-stop-solution

Responsive design is geen one-stop-solution voor het aanbieden van een mobiele site. Het houdt alleen in dat de css zich aanpast aan het medium, maar de functionaliteit van je website verandert niet. Wil je voor je mobiele bezoeker specifieke functionaliteit aanbieden of juist onthouden (denk in dat laatste geval bijvoorbeeld aan een print-functie), dan gaat responsive design niet ver genoeg. In die gevallen kun je beter een complete mobiele site aanbieden, waarbij bijvoorbeeld ook een andere html-code wordt aangeboden. Ook een app behoort dan tot de betere alternatieven. Bij die laatste heb je een aantal extra mogelijkheden, zoals het gebruikmaken van locatiegegevens via de gps-chip.

Bedenk ook dat een responsive design niet door gebruikers over de hele wereld even goed wordt opgepikt. In minder ontwikkelde landen zijn 'feature phones' nog standaard, en die kunnen met hun browsers (in veel gevallen Opera) niet overweg met responsive design.

Ander kritiekpunt is de snelheid van je website. Een site die helemaal geoptimaliseerd is voor mobiel is vaak sneller dan responsive design, dat alleen een ander design presenteert.

SEO

Heeft responsive design effect op de vindbaarheid bij zoekmachines, oftewel op de SEO-waarde van je website? Op die vraag is moeilijk een eenduidig antwoord te geven. Google zegt in een officieel statement dat het een positief effect heeft, mits een responsive design 'de juiste oplossing voor je gebruiker is'. Die omschrijving is natuurlijk behoorlijk cryptisch en biedt geen garantie dat responsive design in jouw geval voor een betere SEO-waarde gaat zorgen.

Alternatieven voor responsive design

Responsive design zorgt voor een geoptimaliseerde vormgeving van je website op mobiele apparaten. Maar er zijn meer wegen die leiden naar Rome.

• • Een 'dedicated' mobiele website

In dit geval wordt je sitebezoeker omgeleid naar een mobiele versie van je website. Deze staat in principe los van je hoofdwebsite, en heeft vaak een url als m.jouwsite.nl. Je biedt dus andere html en css aan, en hebt dus ook de mogelijkheid om andere functionaliteit aan te bieden.

• • Dynamic serving

In dit geval blijft je url gelijk, maar kun je wel andere html aanbieden. De server herkent het type apparaat dat je website bezoekt en past daar zowel de css als de html op aan. Ook bij deze variant heb je dus de mogelijkheid op verschillende platforms verschillende functionaliteit en content aan te bieden.

• • Een app

Dit is de meest verregaande vorm. Hierbij draait jouw website in de vorm van een app op het platform van de gebruiker. Je kunt niet alleen specifieke functionaliteit en content aanbieden, maar ook gebruikmaken van hardwarefuncties van het betreffende apparaat, zoals bluetooth of gps.

Conclusie

Responsive design mag dan het zoveelste buzzwoord zijn in internetland, bedenk goed of het wel voor jouw website de meest geschikte keuze is. De voordelen zijn evident en de technologie past in het huidige mobiele tijdperk, maar de nadelen en de investering die het vergt kunnen zwaarder wegen en de balans naar de andere kant doen uitslaan.

Een ding staat als een paal boven water: in een tijd waarin de desktop allang niet meer zaligmakend is, ontkom je er niet aan goed na te denken over de vormgeving en bruikbaarheid van jouw website op andere media dan een 23-inch breedbeeldmonitor.

---

Bronnen:

Official Google Blog over Responsive Design

Search Engine Watch: Next Generation Site Architecture