Categorie archief: Responsive

Responsive web

Met de komst van allerlei handige techniek om sneller en vooral betere responsive websites te maken zie ik om me heen steeds meer websites die op een goede manier werken op mobiel. Toch zijn er genoeg afwegingen die je moet maken, ik zet er in deze post drie op een rijtje.

1. Hoe belangrijk is mobiel?

Vraag jezelf ten eerste af: hoe belangrijk is mobiel voor mij? Wanneer je veel verkeer uit sociale media kanalen haalt dan kan een mobiele website verschil maken. Google Analytics geeft genoeg handvaten om uit te zoeken op welke apparaten jouw bezoekers naar je website komen. Vraag jezelf ook af of de taak die je bezoeker probeer te doen ook handig mogelijk is op mobiel. Persoonlijk zou ik niet snel iets kopen in een webshop met een mobieltje.

2. Wat is de investering?

Mobiel geeft voor ontwikkelaars en designers nog altijd een paar pittige uitdagingen. Hoe ervaren een partij ook is: ze zullen er altijd meer tijd mee kwijt zijn. Bestaande code is vaak lastiger aan te passen voor responsive: bij nieuwe ontwikkeling is responsive vaak goedkoper en daarom aantrekkelijker. Een handige vuistregel voor het meerwerk is er vaak niet. Vraag bij twijfel meerdere offertes op.

3. Welke impact heeft ‘responsive’ op de andere zaken die ik (wil) doen?

Dit is een beetje onderschat element, maar wanneer je voor een responsive website kiest zul je ook willen kijken naar mobiele templates voor de e-mail marketing, of bijvoorbeeld een wizard waarmee een gebruiker een eigen configuratie kan kiezen. Die laatste functionaliteit zie je vaak op auto-websites waarbij je zelf kleuren en accessoires op het product kunt kiezen. Dit is ook mogelijk op mobiel, maar zal een stuk duurder uitvallen. Ook zijn er zaken als cookiemeldingen die niet altijd meewerken op de mobiele website: hier zul je dus alternatieven voor moeten ontwikkelen.

 

 

 

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.