Tot voor kort besteedde ik er eigenlijk weinig aandacht aan: de manier waarop een webpagina wordt gerenderd op een mobiele telefoon. Het enige waar ik rekening mee hield waren webstandaarden.

Sinds ik zelf in het bezit ben van een goeie smartphone — HTC Desire — ben ik een stuk meer geïnteresseerd geraakt in dit onderwerp. Hey, maar dan nog, waar zou ik me druk om maken? Een eigentijdse mobiele webbrowser beschikt over een prima zoomfunctie. Een webpagina die volgens webstandaards is gecodeerd kun je prima bekijken.

Dat kan zijn. Maar daarmee stel ik me niet tevreden. Ik wil meer. Ik wil een snelle website die ook zonder inzoomen leesbaar is op een relatief klein scherm. Met andere woorden, ik wil een echt mobiele versie van mijn website, niet alleen een miniatuurversie.

Snel klaar. Toch?
Da’s toch appeltje · eitje? Ik bedoel, how hard can it be? Plaatjes eruit slopen. Floats weg. Geen in pixels gedefinieerde breedtes.

Onderschat
Da’s te kort door de bocht. Met andere woorden, het is een schromelijk onderschatte kunst: het knutselen van een stijlblad voor mobiele apparaten. Nogmaals, het lijkt zo eenvoudig, gewoon eventjes een css-bestandje maken voor smartphones en gadgets als  de iPad, het resultaat van je ‘niet zo noeste arbeid’ linken in de html-code van je site en klaar is Kees:

<link rel=”stylesheet” href=”/pad/naar/het/stijlblad” type=”text/css” media=”handheld” />

Helaas – hoe kon het ook anders – zo simpel zit het web-leven niet in elkaar. Ik beperk me tot smartphones, maar dan nog, er zijn nogal wat verschillende mobiele telefoons op de markt. Elk met hun eigen operating system  — Windows Mobile, iOS, Android — om er een paar te noemen. Over de webbrowsers die je op deze telefoons tegenkomt zal ik maar zwijgen.

Mijn punt: je hebt bijzonder weinig zicht op de manier waarop webpagina’s gerenderd worden op een mobieltje. Opera Mini is een toonbeeld van hoe webstandaards geïmplementeerd kunnen worden, maar verder … ben je aan de goden overgeleverd.

Media query
Op A List Apart staat een bijzonder informatieve tekst over web voor mobile: Return of the Mobile Stylesheet. Hierin wordt bevestigd dat mobile browsers nogal eigenzinnig omgaan met een ‘handheld’ stijlblad. Da’s goed om te weten als webbouwer. Je weet dan in elk geval dat het niet persé aan jouw code ligt.

Jammer genoeg biedt de in het artikel genoemde ontsnappingsroute, het gebruik van media queries in de stijlbladdeclaratie, ook niet echt uitkomst. Tenminste niet cross-platform. Ik heb hiermee getest op turboslak.nl en loop tegen problemen aan met de Android browser op mijn HTC. Die snapt de media="only screen and (max-device width: 480px)" stuff blijkbaar niet. De dombo.

Sad but true
Het is best triest, maar het enige wat op het moment van schrijven vrij aardig lijkt te werken is een serverside browser detectiescript. Je kijkt in de code naar de user agent die de pagina opvraagt en op basis daarvan biedt je een stijlblad aan. Op Detect Mobile Browser download je een stukje code dat de user agent uitfiltert.