5 oplossingen voor een betere responsive site

Drie jaar geleden werd responsive design gelanceerd. Inmiddels weet elk webbureau ervan, maar blijft de kwaliteit van de adaptieve sites nog achter. Problemen als overload, retinasatie, ontoegankelijkheid, traagheid en testlaksheid zijn nog veel gezien, maar ook goed te verhelpen! Hoog tijd voor een verbeterslag.

Uiteraard weet iedereen die hier terecht is gekomen al hoe responsive in de basis werkt, maar die basis resulteert niet vanzelf in een goede responsive site. Op het Mobilism-congres ging het dit jaar dan ook veel over verbeteren van responsive websites. De 5 meest voorkomende problemen én oplossingen op een rij:

1. Information overload

Probleem: teveel informatie in één keer tonen is op geen enkel device gebruikersvriendelijk, maar op de kleinere devices ook niet eens zichtbaar of leesbaar.

Oplossing: maak een contentstrategie. Nog voor je over enig ontwerp nadenkt: sorteer je content. Wat voor typen content heb je? Wat is het belangrijkste? Kijk vervolgens hoe je dit kunt verdelen in meerdere niveaus en tot slot: welke niveaus zijn op welk device in welke pagina’s van belang? Let erop dat dit om meer dan drie typen devices kan gaan. Ook e-readers, tv’s of game-consoles kunnen op internet. En er is meer:

2. Retinasatie

Probleem: met de komst van de retina-schermen worden alle afbeeldingen 4x zo groot!

Oplossing: voor iconen en logo’s: gebruik SVG! Kleinere bestandsformaten, perfect schaalbaar en ondersteunt door vrijwel elke browser (>=IE8). Ook vanuit Illustrator direct te exporteren.

Voor foto’s: maak verschillende afbeeldingen voor klein en groot formaat. Toon niet standaard een volle breedte retina-foto. Een automatisch gegenereerde miniatuur ervan is de makkelijke weg, maar niet altijd de beste. Vaak is het beter om een uitsnede van de kern van de foto te maken.

Bovenstaand voorbeeld maakt gebruik van het script van de Filament Group. Er wordt nog gewerkt aan (of: gestreden om) een W3C-oplossing.

3. Ontoegankelijkheid

Probleem: steeds meer bedrijven zijn goed bezig met toegankelijkheid, maar veel responsive websites gebruiken technieken die dat niet zo zijn. Daarbij zijn er ook nieuwe uitdagingen voor mobiele toegankelijkheid.

Oplossingen: er zijn vele kleine aandachtspunten met betrekking tot responsive toegankelijkheid, hierbij een aantal uitgelicht:

1. let op dat gebruik van (responsive) scripts niet de HTML slecht leesbaar maken (voor screenreaders);
2. bij onderdelen die in en uit beeld te swipen zijn: zorg dat het ook met een klik werkt en maak onderdelen buiten beeld ook in de code onzichtbaar na het uit beeld swipen.;
3. test ook hoe je site op een mobiel met voice-over werkt.

4. Traagheid

Probleem: 72% van de responsive websites laden voor een mobiel ongeveer net zoveel in als voor een scherm dat 4x groter is (zie dit onderzoek). Op een GPRS-verbinding is duurt 100kb ongeveer 10 seconden en de gemiddelde website homepage is vaak rond de 1MB…

Oplossing: uiteraard helpt met name het slim omgaan met afbeeldingen al enorm, maar let ook op de CSS-effecten, de opbouw van de Javascript en het aantal externe bestanden dat ingeladen wordt.

Verder zijn plugins als jQuery erg handig, maar bieden ze vaak meer dan nodig. Bovendien zijn animatie met CSS3 sneller dan jQuery. Gelukkig zijn er dan ook weer projecten die alleen uit jQuery filteren wat je nodig hebt.

5: Testlaksheid

Probleem: het is erg tijdrovend om je site op meer dan honderd apparaten in meerdere browsers met ook nog verschillende data-snelheden te testen. Vaak wordt slechts gekozen wat er voor handen is. Dit kan flink uiteen lopen met de werkelijke gebruikersscenarios.

Oplossing: er zijn steeds meer testtools beschikbaar. Een kleine opsomming:

• Slowy app: simuleert tragere verbindingen op desktop;
• Ripple: Chrome-extensie waarbij je veel apparaten en instellingen kunt simuleren;
• Device Anywhere: remote op ECHTE mobiele apparaten testen!

Wie doen het al goed?

BBC News: allesomvattende aanpak voor responsive site

Op Mobilism presenteerde John Cleveley een zeer indrukwekkend verhaal over de allesomvattende aanpak van de nieuwe responsive site van BBC News. Al het bovenstaande (en meer!) heeft de BBC toegepast en dan werkt de site ook nog eens op oude Symbian Nokia’s en in talen waar je van rechts naar links en ondersteboven lezen! Het enige is dat ze deze responsive site momenteel alleen voor kleine mobiele apparaten gebruiken. Het afstappen van de desktopsite is echter nog een stap te ver. Zelfs op de iPad opent standaard een andere site, al vertelt onderstaand screenshot dat er wel tabletplannen zijn.

Starbucks: op elke resolutie een goede interface

Nog een goed voorbeeld van een complexe responsive site die op elke resolutie een goede interface geeft is de website van Starbucks. Deze is wel in de volle breedte toegepast en zo kan je ook goed de verschillen zien als je je browser schaalt. Let ook op de contentveranderingen in het menu.

Microsoft: afbeeldingen aangepast aan (kleiner) schermformaat

De nieuwe Microsoft-site is ook responsive. Van de grote afbeelding bovenaan wordt ook een kleinere variant geladen op kleinere schermen. Wat wel opvalt is dat het producten-menu op mobiel de subgroepen verliest en daarmee erg onduidelijk wordt.

Wie doen het niet goed?

Apple: gelikt design, maar alleen voor groot scherm

Het gelikte design wil deze grootmacht niet kapot maken, want Apple biedt alleen maar een “grote” site. Op hun eigen mobiele telefoon is de site niet te gebruiken en lezen zonder zoomen.

LinkedIn: niet welkom op mobiele site

Zij hebben liever niet dat je de site mobiel bezoekt, want ze slaan meteen de deur voor je neus dicht (meer “doorslams”) met een fullscreen popup waarin ze je de app opdringen.

Opvallend is ook dat vrijwel alle Nederlandse grote blogs nog niet responsive zijn. Het blijft toch ook lastig hoe met advertenties om te gaan, maar dat is weer een andere blogpost waard.

Investering en ontwikkeling

Al met al is duidelijk geworden dat de webontwikkeling er de laatste jaren niet makkelijker op is geworden door de wildgroei aan devices en dit wordt alleen maar meer. Responsive lijkt in veel gevallen de beste oplossing, maar het ontwikkelen van een goede adaptieve site vereist veel investering, wat zelfs de grootste bedrijven nog nauwelijks aandurven. Mobilism heeft in ieder geval met de sterke line-up en presentaties weer een goede bijdrage geleverd aan de responsive ontwikkeling. Aan ons “de webindustrie“ om dit in praktijk te brengen! Help je mee?