Slightly ajar

The iPhone has now been released to much fanfare. I'd like to run through a few things on what this means to web developers and those that want to optimise their sites to work on mobile web browsers.

The first point that has to be raised is that Apple also believe in the One Web approach, where they feel that mobile browsers are capable of rendering regular web pages and optimisations can be made by giving an alternative stylesheet customised for the smaller screen. This is a view that Opera supports. Makers of WAP browsers will probably disagree as they don't have the technology to display regular web pages correctly. It isn't a black and white case of course. Sometimes it is nice to have a mobile specific version, such as when the content is very location aware, or the application is complex so it would take a lot of work to optimise the regular site. I would say on average is is best to leave the page as it is, and rely on technology such as Opera Mini's intelligent zoom or iPhone's zoom, or optimise the CSS (more on that later) for web pages (blogs, wikis, news sites etc) and do a custom mobile version for web apps like Flickr or Gmail etc. With a mobile specific site a link should always be given to go to the regular site, as there may be information there that wasn't provided on the mobile version.

If using One Web principles, the issues comes with trying to optimise the CSS for mobile. The W3C spec has a solution for this; the handheld media type. The principle being that computers use Screen media, when printing Print is used, Handheld for mobile phones, PDA and small handheld media devices/tablets and so on. This sounds rosy, except Apple and Nokia in their wisdom have decided not to support Handheld. That may be fine if they didn't want authors to optimise the layout for iPhone/S60 Phones, but Apple clearly do in their developer documentation (click on Optimise for Page Readability and scroll down). They state that iPhone ignores the print and handheld media queries because these types do not supply high-end content. Where they get this idea from I've no idea. It is obvious they don't need to support print (Opera Mobile and Mini don't either) because you are not likely to hook your mobile up to a printer and print the document, but print media has nothing to do with high or low end content. It is the same for Handheld, and it should be used for doing exactly what the suggest; specifying a stylesheet for mobiles. They get around the lack of handheld support by using Media Queries. This is a solution I've proposed in a previous article. This works well and gives a lot of fine grain control, but it would be much simpler to just support handheld media to get the same effect. That would get around any issues where a desktop based browser could get the mobile stylesheet due to using the screen media type, and where older mobile browsers will not get the mobile stylesheet as, as far as I know, only Opera based and WebKit based browsers support Media Queries. It is also worrying that they seem to suggest that developers should design specifically for the iPhone, and not mobile browsers in general, especially with a CSS filename of iphone.css in their example. This is a case we tried to avoid when the Wii browser was getting popular, by adding TV media support, so that all TV based browsers would benefit from the optimisations. There are of course exceptions where a web site is and should specifically be aimed for one browser and device, such as when Wiicade make use of the Wiimote hardware for example. In the case of the Apple documentation they give the following code suggestion:

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

I'd suggest changing it to the following:

<link media="handheld, only screen and (max-device-width: 480px)"
href="mobile.css" type="text/css" rel="stylesheet" />

That way it will work on any devices that support handheld media (and makes sure Opera Mini 4 doesn't apply its desktop overview mode) and also on mobile devices such as the iPhone and Nokia S60 browsers which only support Media Queries.

Apart from the handheld debate, it is interesting to note that iPhone suffers quite a few of the same limitations as Opera Mini. Notably that it doesn't support file downloads or uploads (although you can upload from the camera in Mini), no plug-in support such as Flash, limited javaScript execution time etc. Although these are draw backs of both browsers, it does mean that it will make the base line that developers can aim for much more consistent. Fixing issues in one browser should fix many issues in the other browser.

One thing of note on the iPhone that is interesting to me was revealed in Daring Fireball's iPhone First Impressions. That is that the UI's interface uses the Helvetica font. This is interesting for a couple of reasons. First of all OS X usually uses Lucida Grande as its default UI font. I wonder if there was any reason for the choice, or if it just looked better on the smaller but high resolution screen? Either way I love the Helvetica font, so I think it is a nice choice. The most interesting thing for web developers though is that it means one important thing — that regular desktop quality fonts are available on the iPhone. This is not really a surprise, as it is based off OS X after all, but it is nice to have confirmation. One of the biggest problems with mobile development in my mind is the inconsistencies between devices caused by font support on phones. many only have one font (which is of quite low quality) and some have very limited text sizes available. It is also common that italic isn't even available. I don't have a iPhone, so I can't confirm if any other fonts are available. I'd expect they'd include the Microsoft core fonts (in the Web folder in FontBook) such as Arial, Times New Roman and everyone's favourite Comic Sans MS. I think it is important for consistency in mobile web design for handset providers to start providing the same fonts across models and brands. Web Fonts could solve the problem but it will be a while before they are supported across multiple mobile browsers, and a user probably doesn't want to download large font files across a slow EDGE network.

<p.look out for our Opera Mini 4 developers guide soon. it is in the final stage of preparations. As Opera Mini 4 is in beta, standards support will likely change for the final release, so look for updates to the document as time progresses.

What does the Chief Lizard Wrangler herself, Mitchell Baker, have in common with the Iraqi Information Minister? Well, judging by her recent interview with ninemsn then her spinning of the truth comes a close second. Not so far off Steve Jobs' Reality Distortion Field about full HTML browsers.

Mitchell Baker: Oh well all of them are difficult to shoehorn onto a mobile device, so we should be clear about that. Opera has done a pretty good job of getting something useful on to a mobile device, but it's not a full fledged [sic] and doesn't have the capabilities of Firefox.

I'll give her the benefit of the doubt and assume she is talking about Opera Mini. Maybe that doesn't have all the features of Firefox, it is true, but that isn't the point. It is designed to work on almost any phone, and also compress data traffic so it is more economical to run, and faster to boot. We also have some exciting things in store for Opera Mini.

But the point is, that Mitchell conveniently overlooked, is we already have a tabbed browsing, Acid2 passing (it passed before Firefox), widget enabled web browser for mobile called Opera Mobile. This includes the full desktop rendering engine, is stacked with features, and can run in desktop mode like the Nokia and iPhone browsers. Except for extensions (which are probably not as useful as on desktop), I don't see what it lacks that Firefox provides. It is also available today. But we certainly welcome the competition in the mobile space, as we believe in the history and future of our innovation. Innovation that is unsurpassed in the browser space. Mozilla have talented people, so the competition should be fun.

The mobile version of Flickr has recently been updated, along with a few new desktop features. While Opera (including myself) promote One Web, where one site is used for all devices, and customised with the likes of handheld stylesheets and/or media queries, this doesn't preclude the use of mobile specific web sites where it makes sense. One thing we think is important is user choice, and that the user can access the original site if they wish.

The new Flickr is the perfect example of a situation where a mobile version makes sense, and a great example of this delivered almost faultlessly. The advantage a mobile version of the site gives them is that Flickr is a fairly complex web application, with a lot of options. With a mobile optimised site, they can cut the fat and expose only the options that are most likely used on the move, with the minimal of clicks to get the user there. If the user wants more control, the link to the regular Flickr is upfront on the first page visited. An example of this ease of use can be hi-lighted by using the new Opera Mini 3 Beta. Four clicks of the down arrow (or one click on the link if you have a touch screen) gets you to the photo upload, and if you have a camera phone, unlike me, one click on the upload button allows you to take a photo straight from the browser. Bang, your new photo is ready to be included in your Flickr photo stream. There can't be any faster way to upload photos on Flickr than the combination of this new easy to use site, and Mini's speed and advanced new features. The mobile web may have just found its first killer app. My only qualm would be that, in my opinion, the photo upload feature should be higher on the menu list than fourth place.

While not a fan of dotMobi, I think this is one example where it would be useful, as flickr.mobi would be much easier to guess than m.flickr.com. One basically doesn't know Flickr mobile exists unless one has read about it somewhere first.

If your site isn't an advanced application, with tons of links and even more JavaScript, in general the best approach is still to define a handheld stylesheet, and make sure to hide what you don't need with display:none; (Opera doesn't load this content, so bandwidth isn't wasted), otherwise it may be worth going down the route Flickr has. Just make sure you let the user go to the regular desktop page if you do.

As well as this site, Yahoo! created the FIFA World Cup Mobile site, which is another brilliant example of a well crafted mobile web site. They maybe one of the very few companies that really get the mobile web at present. Does anyone know of any other best of breed mobile sites, whether mobile specific or through use of handheld stylesheets? Not to blown our own horn, but I think Opera.com and my.opera.com are two other great examples -- even if they don't qualify for a dotMobi domain because of the insane requirement of needing to use XHTML mobile profile. Why? Mobile browsers are perfectly capable of displaying full (X)HTML, what's wrong with XHTML Strict? That one requirement breaks the who concept of "One Web" and device independence.