Skip navigation.

Slightly ajar

Posts tagged with "iPhone"

Short-sightedness of iPhone only development

Sunday, 9. September 2007, 19:02:02

, , , ...

The issues of designing foe one browser, never-mind one device, should be very clear to anyone that has promoted web standards and the open web. Apple themselves have made this even more clear by their latest move. They've just recently anouned the iPod Touch, with the included Safari browser. Now this doesn't suffer from many of the problems of designing for one browser or device; It has the same screen, the same engine and likely the same hardware. However, if we look at all those URLs that have been coming out in the last weeks. like digg.com/iphone, mediatemple.net/iphone et al. we have a problem. It is easy to imagine that iPod Safari users will think these sites are for iPhone only, when they'd in fact work just great on the iPod. Work great that is as long as the authors don't use browser sniffing to detect the iPhone (providing the iPod uses a different user agent string, I'm not sure). These sites will often also work great on other mobile browsers like the S60 browser, Opera Mini and Opera Mobile, but the URLs suggest otherwise.

Of course, the naming and the iPod issue isn't the only reason why it is short sighted. I've hi-lighted why one browser design is bad, in that it introduces cases where you rely (even accidentally) on browser bugs and vendor specific extensions. It may not matter to you, after all the Iphone/ipod is really hot, but it does matter to your potential customers. If we look who there are, then you'll probably see something like this:

Mobile/Handheld browser share for August 2007, as percentage of total browser market share

Data from Net Applications

  1. Opera Mini: 0.27%
  2. iPhone Safari: 0.05%
  3. PSP Internet Browser: 0.02%
  4. Series60 Browser: 0.02%
  5. Danger Web Browser: 0.02%
  6. ACCESS NetFront: 0.01%
  7. BlackBerry: 0.00%

Mobile/Handheld growth, July '07 to August '07, as percentage of total browser market share

  1. Opera Mini: + 0.03 (0.24 -> 0.27)
  2. iPhone Safari: + 0.01 (0.04 -> 0.05)
  3. PSP Internet Browser: 0
  4. Danger Web Browser: 0
  5. ACCESS NetFront: 0
  6. Series60 Browser: - 0.01%
  7. BlackBerry: Doesn't feature in July features

    8. The iPhone and Series60 figures were taken from the Operating System figures. For iPhone this will be a accurate measure as Safari is the only browser available. For Series60 it will also include other browsers like Opera Mobile. As always with statistics, take them with a grain of salt. I don't know which sites were monitored to get these figures. As they are a US based company, I'd expect (but don't know) the stats to be biased towards the US or English speaking countries, where Apple tends to be stronger. Nokia tends to be stronger outside the US and Opera Mini historically is also more popular outside the states as Mini doesn't work on Verizon phones and has had issues with T-mobile US.

    At least by these figures, Mini is not only far more popular than all the other mobile browsers (put together) but is also growing faster. This is something to bear in mind when thinking of making a device/browser specific web site, or optimisation. I'm certainly not saying to make Mini only sites though, digg.com/mini would just be as bad. Imagine how much work it would be to update and create the regular site, and a Mini, iPhone/iPod and Wii version for example. Admittedly, there is not much to go on with just two months data, and things will likely change as time goes on. The global role out of the iPhone will help its marketshare, when that eventually happens. Mini will always be available on more devices, and more carriers, and in markets where Apple doesn't focus. There are markets where devices like the iPhone will be too expensive, such as the developing world, where feature phones rule. There are a lot of people in these markets. I think iPhone will eventually get a significant percentage of the mobile market and be a major mobile browser, but I don't think it will take over the industry like it has for digital music players. Another advantage Mini has is that for the most part, the users of Mini are people that downloaded a mobile browser because they want to surf the web. For many other mobile browsers, they are pre-installed applications that people don't always use, or know what the application does. Safari wont often have this problem either as Apple will market internet on the iPhone heavily and people buying the iPhone will probably be see it as a reason for purchasing the phone. Who knows who will eventually become the major player beyond the desktop, but I don't think it will be a one horse race like happened on desktop.

12 comments

iPhone and developing for mobile

Thursday, 5. July 2007, 15:51:01

, , , ...

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.

12 comments