Responsive, de nieuwigheid voorbij

Met de komst van honderden verschillende devices waarmee wij tegenwoordig op Internet zitten is het des te meer reden om goed te gaan bekijken hoe je responsive technieken in wilt gaan zetten. In dit artikel bespreek ik een aantal af- en overwegingen.

De stats
Werp maar eens een blik op je statistieken. Een middelgrote website in Nederland krijgt maandelijks bezoek van ongeveer 500 verschillende devices. Een relatief groot percentage daarvan is – afhankelijk van de website, maar reken op ergens 20% – tablet verkeer, met de iPad als absolute koning.

Responsive voor de iPad
Er is eigenlijk niet zoiets als ‘responsive voor de iPad’ want je moet het in landscape mode wel heel bont maken om niet te functioneren op de iPad. Vroeger waren er nog wel problemen met iframes en het scrollen binnen deze iframes, maar dit lijkt sinds iOS6 ook volledig opgelost door Apple.

Dan hebben we nog de portret modus. Die is al iets spannender omdat de viewport van de iPad (de effectieve resolutie) wijzigt naar 768 pixels breedte, en dit is vaak onder de standaard die veel webdesigners rekenen als ze een website voor desktop ontwerpen (rond de 900 pixels breed is gangbaar). Dit geld overigens niet voor de nieuwste generatie iPads met retina schermen, deze houden 1536 pixels in de breedte over en hebben dus ook nergens last van in portret modus. 

Responsive voor kleiner dan de iPad
Er is een grijs gebied waarin we van de iPad overstappen naar ‘echte’ mobiele resoluties, het gebied vanaf 480 pixels naar 768 pixels. Het is enigzins de vraag of je hier actief responsive layout voor wil maken. Er zitten absoluut een aantal devices bij die hier van kunnen profiteren, maar het aantal is laag. Zo kan een extreem grote smartphone (Galaxy Note) ook 800 pixels in de breedte weergeven en kan ook een kleinere 7 inch tablet als de Nexus 7 van Google/Asus dit.

Mobiel
Onder de breedte van 480 pixels belanden we op de mobiele pagina’s. Hier krijg je te maken met een flink aantal tweaks die je zult moeten doen om een prettige view te krijgen. Daarbij zul je ook rekening moeten houden met toegankelijkheid: niets is zo vervelend als het weglaten van (delen van) de site die voor je bezoeker juist cruciaal zijn. Kijk daarom in je statistieken goed wát mensen die deze devices nu al gebruiken op de site doen. Lezen ze artikelen? Of scannen ze de homepage? Blijven ze korter of juist langer? Het is interessant om naar gedrag te kijken bij het maken van de mobiele pagina’s: het is vrij simpel om een hele zijbalk zomaar weg te halen omdat deze niet op het scherm past, maar als hier functionaliteit in zit die gebruikers nodig hebben dan geeft dit alsnog een frustrerende ervaring. Voorbeeld: ik kwam ooit op een mobiele site terecht van een bedrijf waar ik een afspraak mee had. Ik stond in hartje Amsterdam maar wou het adres even weten. Het bedrijf had een responsive site, maar had vervolgens een Google Maps kaartje met een wolkje erin gebruikt om te tonen waar ze zitten. Deze zijn echter extreem vervelend en lastig te gebruiken op een mobiel. En het adres zelf werd ook nergens in een tekst genoemd dus dit maakt het zoeken ook nog eens een stuk lastiger.

Conclusie
Het is zeker geen sinecure om een goede responsive website te bouwen. Naast analyseren van je eigen data zul je ook belangrijke beslissingen moeten nemen over deze data: is 5% van de bezoekers de moeite om daar een webdesigner een volle week aan te laten werken? En hoe tevreden zijn mijn iPad bezoekers eigenlijk met mijn website? Blijven ze langer, of juist korter? Allemaal vragen waar je een antwoord op moet vinden. Zeker in combinatie andere strategische keuzes, zoals het (laten) maken van apps of het laten maken van een volledige losstaande mobiele website.

Ga je echter iets volledig nieuws bouwen dan lijkt het een no-brainer te zijn om te zorgen dat de website volledig responsive is. Er is genoeg techniek voorhanden om dit snel en goed te doen, en voor geen enkele goede webdeveloper zou dit echt ‘nieuw’ moeten zijn.