Tweakers.net verbetert mobiele ondersteuning

De laatste tijd heeft het gebruik van mobiel internet een hoge vlucht genomen. Meer en meer mensen beschikken over een mobiel apparaat waarmee geïnternet kan worden, en steeds vaker wordt daarmee dan ook even gekeken wat het weer wordt, hoe laat de trein gaat of welke nieuwtjes er op ict-gebied zijn.

Voor dat laatste kon je voorheen maar beter meteen naar tweakers.mobi surfen, want de homepage van tweakers.net slingerde je bundel zo een halve megabyte omlaag. Dat is nu veranderd!

Het internet is altijd al een vergaarbak geweest waar verschillende 'user-agents' hun deel uit konden pikken. Een internet dat onafhankelijk was van de voor het surfen gebruikte hardware was ook altijd het streven van Sir Tim Berners-Lee, maar de praktijk pakte helaas toch anders uit... Het moderne internet is vooral visueel gericht, en dan nog vooral op desktop-pc's met hoge-resolutiebeeldschermen.

Ondersteuning voor mobiele apparaten is voor internetsites altijd een wat lastige kwestie geweest, want hoe pak je zoiets aan? Een aantal jaar geleden was de vraag naar mobiele toegang voor de meeste sites nog dusdanig klein dat meestal werd volstaan met een simpele, aparte wap-site, en toen mobiele apparaten ook (x)html(-mp) gingen ondersteunen met een zwaar uitgeklede versie van de normale site op een apart adres. Het grootste probleem met dergelijk aparte mini-sites is echter dat ze zich altijd moeten richten op de grootste gemene deler, niet alleen wat betreft de mogelijkheden tot opmaak, styling en gebruik van dynamische content, maar ook wat betreft de bandbreedte. Daarbij betekent het onderhoud van een dergelijke aparte site vaak extra werk.

De technologie staat echter niet stil, en moderne mobiele apparaten hebben dikwijls een browser aan boord die aardig kan tippen aan de mogelijkheden van z'n desktop-broer. Fabrikanten van dergelijke apparaten doen dan ook hun best om de 'desktop-ervaring' zoveel mogelijk te benaderen. Om die ervaring voor het mobiel gebruik te optimaliseren bedienen fabrikanten en telco's zich vaak van verschillende truukjes zoals het proxy'en van requests via een eigen server waar een website nog enigszins wordt 'uitgekleed', en het beperken van de executie-tijd voor javascript. Dat dit soort handigheidjes ook tot ongewenste resultaten kan leiden is evident.

De noodzaak om dergelijke trucs toe te passen toont wel aan dat 'het internet' niet zonder meer geschikt is voor mobiele consumptie. De belangrijkste beperkende factoren zijn de lagere bandbreedte van mobiele verbindingen en de beperkte schermresoluties en processorkracht van mobiele apparaten. Fabrikanten proberen dan ook hun eigen apparaatspecifieke technologieën te pushen, waarbij sites hun content door middel van speciale 'apps' beschikbaar kunnen maken.

Wij stelden onszelf echter de vraag: hoe kunnen wij onze eigen site over het algemeen meer mobiel-vriendelijk maken zonder daarbij concessies te doen aan onze standaard weergave en zonder een aparte codebase te hoeven onderhouden? Het idee was om met verschillende 'gradaties' van weergaven te gaan werken al naar gelang de mogelijkheden van het apparaat en de browser van een mobiele bezoeker. Het eerste probleem diende zich daar echter al aan: hoe herken je een mobiel apparaat, en nog lastiger: hoe weet je om welk apparaat het gaat en wat de specificaties daarvan zijn? Daarbij is in zekere mate ook nog van belang welke browser er gebruikt wordt op dat apparaat, en in hoeverre die overweg kan met onze opmaak, styling en scripting.

Nu kwamen we tijdens onze zoektocht naar een oplossing voor deze vraagstukken al vrij snel terecht bij het Wurfl open-source community project. Deze database bevat voor ons voldoende informatie en wordt ook regelmatig bijgehouden. In eerste instantie leek de php-api niet lastig te implementeren, maar uiteindelijk bleek dat nog behoorlijk wat voeten in de aarde te hebben: naast het feit dat we het caching-mechanisme graag wilden laten aansluiten op onze eigen code en daar dus een schil omheen moesten schrijven, liepen we ook tegen een aantal bugjes en performance issues in de api aan. Hiertoe hebben we de api-code zelf enigszins moeten aanpassen. Deze fixes hebben we overigens ook weer beschikbaar gesteld aan de maintainers van de Wurfl api zelf

Uiteindelijk heeft dit geleid tot een systeem waarbij apparaten en browsers op basis van een aantal criteria - onder andere mate van html/css-support, javascript-support en schermresolutie - een 'grade' toegekend krijgen. Op basis van deze 'grade' kunnen we in onze code bepaalde beslissingen maken; zo kunnen we bijvoorbeeld de tracker uitschakelen voor apparaten met lagere schermresoluties, bepaalde lijsten simpeler weergeven, gebruik maken van een alternatieve stylesheet met minder gebruik van achtergrondplaatjes om bandbreedte te besparen, of de gehele pagina ontdoen van elke vorm van javascript.

Handheld stylesheet

Een uitgebreide uitleg van de verschillende gradaties vind je op onze 'device detect'-pagina, waar je ook kunt zien hoe jouw browser/apparaat wordt herkend en geclassificeerd. De herkenning van browsers en apparaten is niet bepaald een exacte wetenschap; de kenmerken waarop detectie wordt gedaan zijn meestal niet gestandaardiseerd, terwijl de herkenning vaak ook wordt bemoeilijkt door proxies die niet alle oorspronkelijke variabelen doorsturen en door fabrikanten die de mobiele browser zich toch als een desktopbrowser laten voordoen. Om die reden is het op de 'device detect'-pagina mogelijk om een hogere of lagere 'grade' te forceren. Die instelling wordt opgeslagen in een cookie. Als een apparaat als een mobiel apparaat herkend wordt, is een linkje naar de 'device detect'-pagina beschikbaar in de vorm van een -icoontje rechtsboven.

Op dit moment worden de 'grades' nog niet overal in onze code gebruikt. Op de frontpage index zijn al wel een paar voorbeelden te vinden, zoals de weergave van de reviews-carrousel en de pricewatch-producten, maar het zal nog even duren voordat heel Tweakers.net 'gegraded' is. Ook het forum zal daarbij natuurlijk betrokken worden

Feedback over dit systeem is uiteraard welkom. Voor bugmeldingen, bijvoorbeeld over verkeerde browserdetectie, kun je terecht in ons Lieve Devvers forum. Uiteraard zijn daar ook suggesties welkom, bijvoorbeeld over verbetering van de indeling voor bepaalde apparaten en browsers, of over concrete zaken die veel profijt zouden hebben van aangepaste weergave op mobiele apparaten.