HTML and CSS for Mobiles
Monday 14 June, 2004 (11:51AM GMT)
Although it's chugging along rather slowly (certainly more slowly than people predicted a few years ago), with phones and PDA's becoming ever more advanced, the mobile internet is clearly going to play a big role in the future of the web.
A problem in designing web pages for these platforms is the multitude of mobile devices (both PDA's and phones) that will no doubt render pages in different ways. If web standards were fully supported then it would be possible to optimise pages for these mobile devices without changing the underlying HTML - just like providing alternative styles for print.
It all comes down the
handheld media type. If that was supported then we'd be laughing - one style sheet for screen, one style sheet for print and one style sheet for mobiles, with code something like this:
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />
But here's where the practical difficulties kick in. In everyday web design it's often difficult enough to get hold of a platform other than the one you're using, but when it comes to mobiles, where the hell do you start?. I understand that the
handheld media type is supported by some devices and software, but I don't know to what extent. I also know that some also apply styles specifically targeted with the
screen media type. Tut tut. Naughty.
Opera have a browser for the Series 60 platform, which looks great. In fact, you can see what a web page would look like on it by going to the "View" menu and selecting "Small Screen" on a regular Opera browser. It has good support for standards (including the
handheld media type), as you might expect from Opera but unfortunately, I'm assuming that this isn't that popular a browser for mobiles, although it does come pre-installed on a certain new Nokia phone.
Some phones have their own built-in browser (such as the Nokia 6220), and I assume a lot of PDA's do too. The mobile version of IE is bound to be a major player, but there could well be hundreds of different mobile browsers out there. Another factor is international differences, especially with phones. Europe has quite a different market to America and parts of Asia are in a super hi-tech world of their own.
Can anyone can shed any light on mobiles and how they handle HTML and CSS? I've constructed a test page that should show how a browser deals with
handheld media types (this works really well with Opera), so if you've got a web-enabled phone or PDA, please take a look at the page (http://htmldog.com/test/handheld.html) and let me know how many "applied" and "not applied"'s show up.