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.
WIDGETIZE
Anonymous # 20. July 2007, 08:21
Hi!
A very good and useful posting. I've been looking for this kind of info for ages (since the new S60 browser was launched). In fact I was a bit angry back then for Nokia not implementing the support for handheld stylesheets. Who on earth came up with the idea that a handheld device can deliver the desktop browsing experience :)
But if the browsers really support the media query you suggest then my worries are over and I dumb the JavaScript non-sense used for stylesheet switching.
Thank you and keep up the good work!
Anonymous # 21. July 2007, 22:43
Nice read. Thanks.
So the your suggested media query has been tested? You said later in the article that you don't own an iPhone yourself (neither do i). I wonder if this really solves it. Just for future reference :)
Best, Kjell
Anonymous # 2. August 2007, 11:22
Hi again!
I've been testing your suggested media query with different desktop browsers:
Opera 9.22 and Safari 3 beta work as you suggested and IEs won't of course. Firefox 2.0.0.6 and Netscape 8.1.3 seem to have an annoying issue with the query.
The query won't work but these browsers pick up the "screen" from the
code and apply the styles in this file. When the query is placed straight into the CSS-file using the @media statement (as in your examples in the other post discussing this) these browsers ignore it completely and so work as supposed.
When I use the following code:
FF and NN don't get the "screen" mediatype anymore and ignore the CSS-file completely as they are supposed to.
Unfortunately neither of these work in the S60 3rd browser of my Nokia N73 device. Perhaps the 3rd SP1 browser do support the queries with device screen width?
Payday Loans # 18. August 2007, 12:57
David Storey # 2. September 2007, 22:14
Anonymous # 13. September 2007, 21:45
According to w3.org/TR/REC-CSS2/media.html the handheld media type is "Intended for handheld devices (typically small screen, monochrome, limited bandwidth)" which does not really describe full-color hi-res wifi devices like internet tablets, iphones, etc, small screens notwithstanding. Given what the "handheld" stylesheets I've seen look like, it is obvious why Opera on Nokia tablets and Safari on Apple handhelds both ignore that media type.
Anonymous # 13. September 2007, 21:56
"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 appears Apple might have actually read the spec in this case.
Can you find any examples in the wild of handheld stylesheets that the user of a color wifi handheld would want to render? Wouldn't such a stylesheet actually be a misuse of the handheld media type?
Sorry to have to drive the point home like this... I think the iPhone is rubbish and I can't believe I'm defending apple here, but I do think you're mistaken about the handheld media type :)
David Storey # 14. September 2007, 19:05
Apple themselves suggest to add a new stylesheet for iPhone to reformat the layout to suit the small screen. The problem is they don't support handheld, so have to use screen with a media query, The problem here is that breaks IE on desktop as the regular screen stylesheet (the one that desktop browsers use) will also be applied with the mobile specific one, as the browser has to use both screen stylesheets. To avoid that you have to put a media query on the regular stylesheet for displays bigger than the value specified. This works fine in all desktop browsers that don' support media queries as they see the screen keyword, ignore the media query and use the stylesheet, except it doesn't work in IE as it ignores the entire statement when it sees the a part it doesn't understand (the media query), and thus IE gets unstyled markup. Hardly ideal. If they supported handheld (or even just handheld if a media query is also used) then it would solve this major problem. It will likely never go away that mobiles have small screens and restricted input. The bandwidth issue is probably solvable over time, but is still an issue unless you are running on wifi.
As great as a zoom mode is, it is often much better if the content is correctly adapted to the screen size by the designer, as it solves the issue of trying to find the ocntent you are looking for in overview mode, zooming in then zooming out again to find the rest of the content. As you cant read anything in overview mode, it makes it difficult to navigate on sites that you don't know well. There are very few examples of good handheld stylesheets out there now, but that is because it is early days of designers having interest in the mobile web design. We are also just now getting browsers that support CSS well with different font sizes and supporting background images and such. As the more basic wap browsers die out, I think we'll see a lot better content and optimisations.
Anonymous # 15. September 2007, 03:56
But currently, before those basic browsers have died out, isn't Apple and the W3C still correct in reserving the 'handheld' media type for low-bandwidth monochrome devices? Wouldn't serving "high-end content" with a handheld stylesheet be the wrong thing to do, especially given that there are today probably more devices that DO support 'handheld' than there are iPhones?
Anonymous # 6. March 2008, 18:41
...realizing this post is long since dead...
I'm just now researching media queries as a way to get my site "handheld" optimized. I am running into all of the problems you've discussed here.
I tried these combinations:
(http://www.ziarek.com/sandbox/handheld-test/)
screen -- FF, Opera, Safari, MobileSafari, PocketIE, IE7
handheld -- small screen Opera
screen and (max-device-width: 480) -- MobileSafari
only screen and (max-device-width: 480) -- MobileSafari
screen and (min-device-width: 480) -- Safari, FF, Opera
I didn't have an actual mobile Opera browser to test with.
So, basically, we are all over the board. I agree with anonymous, that "handheld" is far too ambiguous. I think media queries -- allow a much finer grain control and give us capability filtering.
With Opera and WebKit becoming major players in the mobile space, hopefully this can become a defacto standard. In the meantime, I don't see how to target your designs without some sort of kludgey work around. In 2008 we should be past that.
Anonymous # 19. November 2008, 22:52
Your #wrap4 div is missing a background-color declaration so half of the sidebar is sitting on the dark background :-(
Anonymous # 26. July 2009, 10:33
May be off topic but something came to my mind that Applications cannot work everywhere, an iPhone app would work only on iPhone and not on blackberry or any other. This is why i think that iPhone compatable websites (like m.digg.com) are a better in comparison to applications. Cost effective, work on every platform, Just a browser needed, and so many benefits. And after some googling this is what i got:
'Made for iPhone' websites by SDP Labs makes it even simpler and easier to have a iPhone compatible website.
Hope that helps someone.