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.

Een e-mailtje van Google in mijn inbox:

Dear Google Apps admin,

In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 ​as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010.  After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting this week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser.  We will also alert you again closer to March 1 to remind you of this change.

In 2009, the Google Apps team delivered more than 100 improvements to enhance your product experience.  We are aiming to beat that in 2010 and continue to deliver the best and most innovative collaboration products for businesses.

Thank you for your continued support!

Sincerely,

The Google Apps team

Hopelijk helpt dat om de overgebleven Internet Explorer 6 gebruikers — die nog in hele zwermen rondklikken op één van mijn websites — over te hevelen naar een meer courante versie.

Hoe graag zou ik meedoen met een help Internet Explorer 6 de wereld uit actie? Héééél graag. Als webbouwer is het ronduit vervelend om meerdere versies van een browser te moeten ondersteunen. Zeker als er nogal wat verschil zit in de manier waarop deze versies omgaan met webstandaarden.

verder lezen »

Ben jij ook nog zo iemand die te maken heeft met Internet Explorer 6? En in zijn webwerk rekening probeert te houden met de rendering onder IE6? Ik wel. Al is het maar omdat er op één van mijn websites nog meer dan 20% van de Internet Explorer bezoekers gebruik maken van versie 6.

Als je bouwt voor IE6 is het reuze handig om analyse en debugtools tot je beschikking te hebben. Want de script-foutmeldingen van Internet Explorer zelf bieden nauwelijks houvast. Dan wordt foutopsporing zoeken naar een speld in een hooiberg.

De volgende tools komen bijzonder goed van pas:

Debugbar — een Firebug-achtige ontwikkelomgeving. Maar dan voor Internet Explorer. Gratis voor personal use.

Companion JS — een enorm handige javascript debugger. Companion JS draait als een schil rond de (op zichzelf niet al te nuttige) Script debugger van Microsoft. Nooit meer zoeken naar de oorzaak van dat stukje javascript waarop Internet Explorer zich stukbijt.

FireFox 2 RC3 zie er errug slick dick uit, maar op mijn thuis-laptopje bevriest de browser om de één of andere reden met de regelmaat van de klok. Terwijl Firefox 2 RC3 op de Dell Latitude van m’n werk hier totaal geen last van heeft en ongestoord webpagina’s blijft laden.

Ik beschouw mezelf niet als een hysterische gebruiker die in de stress schiet als een applicatie een keertje crasht, maar met tenminste zes freeze-ups in het afgelopen uur was ik het vandaag even meer dan zat. Waar ik vroeger zou zijn gaan uitpluizen waar het probleem zit, heb ik deze keer gekozen voor de gemakkelijke weg. Met andere woorden: Hup. Eraf met die handel en downgraden naar 1.5.0.7!

En toch. Ondanks mijn keuze voor the easy way out … stiekem ben ik toch wel benieuwd waar de pijn nou precies zit:

• Te weinig rechten? Op mijn thuislaptop werk ik zoals het eigenlijk hoort – als een normale gebruiker met weinig rechten
• De combinatie Firefox met op de achtergrond Windows Media Player die liedjes loopt te blèren?
• Een onwillige Firefox extensie die roet in het eten gooit?
• De aanwezigheid van het dotnet 2.0 framework en een hele bult Microsoft developer shit die op mijn privé computer draait? – Ik heb eerder gemerkt dat een systeem niet direct stabieler wordt van de aanwezigheid van bijvoorbeeld Visual Web Developer …

Eerlijk gezegd … ik weet het niet. Er zijn zoveel redenen waarom het fout kan gaan. Het blijft zoeken naar de speld in een hooiberg. Hopelijk geeft de eerste productie release van Firefox 2 geen problemen …