Please, whenever you hack your website for iPhone, keep in mind that it’s not the only mobile browser in the world. It’s not even the only WebKit-based nor Acid2-compliant mobile browser (S60, Opera Mobile).
It’s nice to see that there’s such wide support for the iPhone (albeit from iPod users), and as much as I agree with Craig that the mobile internet ‘revolution’ is inevitably going to grow in both coverage and usage (more so when internet speeds and g3 actually get up to speed).
But although Craig doesn’t advocate the creation of an iPhone specific site, and in fact only offers it as an option, it’s plain as day that Apple would love us all to create an alternative site for their format.
Their creation of a huge knowledge base of supported micro-formats and new methods, and their ignorance in ditching flash in favour of yet another naff Quicktime format (that unfortunately gained more weighting when Youtube decided to start converting all it’s videos to follow the trend); shows to me that Apple, like Microsoft in past year, prefer to write the standards and rules that we all must follow rather then making use of well established technologies and techniques.
Jesus even media temple jumped on the bandwagon (granted their time could be better spent solving other issues), but it does show that more and more “trend” following companies are jumping to kick their developers into creating new sites and systems implementing Apples new obscure, phone specific CSS.
I’m very much with Joe’s observation in that they should have taken a more industry standard approach and implemented the hand-held media type as its base.
In the end though I expect if sales are big enough (which with all the iPod fan boys out there they will be), and mobile networks finally get their 3G up to speed; we’ll all find ourselves developing iPhone friendly sites to please a directors whim (who will of no doubt got the idea off their 11 year old kid).
Lets hope Nokia doesn’t release a contender and its own set of CSS rules, then Sony, then Motorola.
If they wanted a new standard it should have gone through the W3C, granted they may not have been able to make the product for 8 years while they argue over semantics but the standard would have been recognised.
Copy & paste the code below to embed this comment.
Mike Sabatino
I should have been a little less curt in my comment. I liked the article and thought the reasoning in it illustrates well the challenge we face in designing for the mobile web, and I’d like to stress the word design. I guess that was the point I was trying to make, that my primary focus is structure with design being secondary.
As you demonstrated in the article, design solutions for the iPhone (and the rest of the mobile web) should be left to CSS. But I will never change the structure of the information based on what type of client is reading it; proper structure is the path to functionality, navigability, and ultimately usability.
Is it possible to detect the iPhone on the server using user-agent?
hcabbos, You’re absolutely right—neither QuickTime or Flash is standard in the sense that it’s supported without the use of a plug-in.
To be honest, I’m not an expert on web video. I do know that Apple pitches QuickTime as a “wrapper” around video standards such at MPEG-4, H.264 and AAC. From what I understand, Flash relies on proprietary codecs (although they have announced H.264 support in a future version.)
From a pragmatic point-of-view, it doesn’t really matter: QuickTime is available, Flash is not.
Joe, you’re not the first person to wonder about the “handheld media type”:http://my.opera.com/dstorey/blog/iphone-and-developing-for-mobile
All that I can suggest is that you sign up for a “free ADC membership”:http://developer.apple.com/products/online.html and submit a bug report. From what I’ve seen, the Safari and WebKit developers are very responsive to this kind of feedback from the developer community.
And if you see that your bug has been marked as a duplicate, that’s a good thing: it means that other developers share your concern (and therefore carries more weight with the people that can fix the bug.)
Mike, From what I’ve seen, there can be benefits to restructuring information on a mobile device.
The main reason is that you want to see less information on a mobile device. Filtering some content can actually improve the user experience.
Of course, this could be done with CSS and “display: none;” but that means you’re sending a lot of structural markup that is unused (and wasting bandwidth on a device that doesn’t have much.) The alternative of forking your information structure and maintaining two versions of a site is also unattractive.
The best course of action is to evaluate development on a case-by-case basis: know the costs and find the solution that fits best.
As far as the user agent is concerned, the iPhone specifies this platform information: “(iPhone; U; CPU like Mac OS X; en)”. There’s more detail in the “iPhone guidelines”:http://developer.apple.com/iphone/designingcontent.html
As others have pointed out, you shouldn’t place too much weight on that string, since there are other mobile devices that can benefit from handheld markup and styling.
By sheer coincidence, Cameron Moll released a PDF book entitled Mobile Web Design on the same day of my article.
I took a look at the preview pages and it looks like a great resource for anyone thinking about developing for mobile devices: especially for ones other than the iPhone. There is more information on “his weblog”:http://cameronmoll.com/archives/2007/08/mobile_web_design_the_book_available_august_28/
Please do remember that in a global scale, iPhone is in a niche—and will stay there for a long time.
Nokia, for example, is shipping more than 1.1 million phones a day (“see here”:http://www.tgdaily.com/content/view/33204/118/ ), so they’ll sell more phones in nine days than Apple during the rest of the year. Further, 1.1 million is number of real shipments, not predictions.
N95 has sold more than iPhone and it is a quite capable phone, but I haven’t seen any tips and tricks to made sites just for it. Maybe ALA would pick the topic?
Thanks for the info! As an iPhone lover (I never leave home or the office without it) and someone concerned with making sure my websites are as mobile friendly as possible, I will use this info and will encourages my own readers to read your article.
I’m shocked that ALA has allowed an article to be published that goes against it’s prior preaching of code once for all browsers and devices. Device specific design seems like a trip back to the dark ages when everyone “optimized” their site for a specific browser.
Yes, the iPhone is neat and shiny but what about the 650 million other mobile-web devices out there? The iPhone only accounts for 0.046% of mobile devices.
Here is a graphic that will help put things into perspective -> http://www.russellheimlich.com/blog/the-iphone-is-not-the-only-mobile-web-device/
I think it is absurd that Nokia and Apple haven’t implemented the support for handheld mediatype in their browsers. It would make everyone’s life so much easier helping the developers and users both. Fortunately Nokia has give people the opportunity to have their “say in the future development of the S60 platform”:http://www.s60.com/business/productinfo/wishlist/displayWishDetails.do?wishId=1021&activeCat=10. I even think that Nokia is subconsciously admitting that it might have been a mistake not to support the handheld media as “discussed on the Boagworld forum”:http://boagworld.com/forum/comments.php?DiscussionID=2572&page=1#Item_5. Of course I might just be imagining.
Another thing what I don’t understand is the fuzz about iPhone. Of course it is sexy and cool and every geek must have a one but as mentioned before it’s sales are only a needle in a haystack. The one thing that I consider important in the whole iPhone phenomenon is that it brings more attention on the whole mobile web issue and even main stream users will eventually understand that they have the Internet in their pockets.
Copy & paste the code below to embed this comment.
Philip Howard
I would have prefered an article on the growth of Opera Mini and to a lesser extent Opera Mobile. There is a far wider user base out there. I’m a new student to all this but if i was to adapt a site i’d be optimizing it for Opera Mini.
“Opera Mini Market share”:http://operawatch.com/news/2007/09/opera-minis-growth-over-the-past-5-months-027-of-total-market-share.html
Thank you so much for including the numbers about how many mobile devices Apple is selling. This great post (and the one on “Switchy McLayout”) have helped me to decide on building sites to accommodate screens that are under 640px.
I can’t wait to test these ideas out on my Boss iPhone. (That line about her buying ME one back fired…)
The first question in my mind, how to build my website to really accommodate little devices like iPhone and others? It’s like “extensibility” question on the web?
At last time, I am testing one version of my website which is extensible, but I suppose that isn’t enough or satisfying. I see as the Safari browser implements tools to improve for displaying media (image for example). It’s very interesting.
But a subject of your article makes me being attentive : “the <meta> tag with the viewport information” !
I would like to learn more about that.
Can you really explain me how is it used?
One of the main limitations I’ve noticed with the iPhone concerns scrollable divs within the page. For example “wide comic strips”:http://matthewjamestaylor.com/comics/ogga-cyclone are no longer scrollable even though they still work on the full Safari.
Copy & paste the code below to embed this comment.
Jared Stein
Hm, we’ve been spent some long hours XSLT’ing our XML-based Flash flashcards for web browsers, and lo and behold, guess what’s on iPhone Safari’s list of unsupported technologies?
Copy & paste the code below to embed this comment.
Jared Stein
Hm, we’ve been spent some long hours XSLT’ing our XML-based Flash flashcards for web browsers, and lo and behold, guess what’s on iPhone Safari’s list of unsupported technologies?
Love the great feature of the iphone. It has the futuristic look and it works great. Looking to get my hands on this phone coming feb 2008! Iphone rocks!
Copy & paste the code below to embed this comment.
Bret Lanius
I’ve been fighting this issue for days and the Quicktime tags just don’t work…
I had it working somewhat but ONLY if the poster image was a full path to it and the video was NOT full path AND in the same folder. I am using the embed tags exactly as described in Apples site and here.
First of all thank you for posting such a great and easy to understand info.
Some links however are broken (do not need .html part):
http://www.css3.info/preview/rounded-border.html
should be
http://www.css3.info/preview/rounded-border/
Same goes for http://www.css3.info/preview/border-image.html
Copy & paste the code below to embed this comment.
Paul Gustafson
This is a great article, but I would like a little more info on the section where you talk about adding video to an iphone optimized site. Do you have any resources for doing this?
I’m wondering how the hcard code handles International calls where numbers need to be omitted or added to dial out of the country and into another.
For example, the standard for displaying a French phone number with country code is: “33 (0)4 68 71 31 58” and you assume that an International caller knows to ignore the Zero in parentheses. Does the hcard have similar ignore if international protocol?
You mentioned using css to load lower res images for the iPhone, did you mean using css background images, or some other technique? Css background images are not really appropriate in a lot of cases as they don’t have alt tags.
46 Reader Comments
Back to the Articlebugmenot bugmenot
iPhone is the new Internet Explorer 4…
Please, whenever you hack your website for iPhone, keep in mind that it’s not the only mobile browser in the world. It’s not even the only WebKit-based nor Acid2-compliant mobile browser (S60, Opera Mobile).
Chris McKee
It’s nice to see that there’s such wide support for the iPhone (albeit from iPod users), and as much as I agree with Craig that the mobile internet ‘revolution’ is inevitably going to grow in both coverage and usage (more so when internet speeds and g3 actually get up to speed).
But although Craig doesn’t advocate the creation of an iPhone specific site, and in fact only offers it as an option, it’s plain as day that Apple would love us all to create an alternative site for their format.
Their creation of a huge knowledge base of supported micro-formats and new methods, and their ignorance in ditching flash in favour of yet another naff Quicktime format (that unfortunately gained more weighting when Youtube decided to start converting all it’s videos to follow the trend); shows to me that Apple, like Microsoft in past year, prefer to write the standards and rules that we all must follow rather then making use of well established technologies and techniques.
Jesus even media temple jumped on the bandwagon (granted their time could be better spent solving other issues), but it does show that more and more “trend” following companies are jumping to kick their developers into creating new sites and systems implementing Apples new obscure, phone specific CSS.
I’m very much with Joe’s observation in that they should have taken a more industry standard approach and implemented the hand-held media type as its base.
In the end though I expect if sales are big enough (which with all the iPod fan boys out there they will be), and mobile networks finally get their 3G up to speed; we’ll all find ourselves developing iPhone friendly sites to please a directors whim (who will of no doubt got the idea off their 11 year old kid).
Lets hope Nokia doesn’t release a contender and its own set of CSS rules, then Sony, then Motorola.
If they wanted a new standard it should have gone through the W3C, granted they may not have been able to make the product for 8 years while they argue over semantics but the standard would have been recognised.
Anyway, I’m ranting, back to work.
Mike Sabatino
I should have been a little less curt in my comment. I liked the article and thought the reasoning in it illustrates well the challenge we face in designing for the mobile web, and I’d like to stress the word design. I guess that was the point I was trying to make, that my primary focus is structure with design being secondary.
As you demonstrated in the article, design solutions for the iPhone (and the rest of the mobile web) should be left to CSS. But I will never change the structure of the information based on what type of client is reading it; proper structure is the path to functionality, navigability, and ultimately usability.
Is it possible to detect the iPhone on the server using user-agent?
Craig Hockenberry
hcabbos, You’re absolutely right—neither QuickTime or Flash is standard in the sense that it’s supported without the use of a plug-in.
To be honest, I’m not an expert on web video. I do know that Apple pitches QuickTime as a “wrapper” around video standards such at MPEG-4, H.264 and AAC. From what I understand, Flash relies on proprietary codecs (although they have announced H.264 support in a future version.)
From a pragmatic point-of-view, it doesn’t really matter: QuickTime is available, Flash is not.
Craig Hockenberry
Joe, you’re not the first person to wonder about the “handheld media type”:http://my.opera.com/dstorey/blog/iphone-and-developing-for-mobile
All that I can suggest is that you sign up for a “free ADC membership”:http://developer.apple.com/products/online.html and submit a bug report. From what I’ve seen, the Safari and WebKit developers are very responsive to this kind of feedback from the developer community.
And if you see that your bug has been marked as a duplicate, that’s a good thing: it means that other developers share your concern (and therefore carries more weight with the people that can fix the bug.)
Craig Hockenberry
Mike, From what I’ve seen, there can be benefits to restructuring information on a mobile device.
The main reason is that you want to see less information on a mobile device. Filtering some content can actually improve the user experience.
Of course, this could be done with CSS and “display: none;” but that means you’re sending a lot of structural markup that is unused (and wasting bandwidth on a device that doesn’t have much.) The alternative of forking your information structure and maintaining two versions of a site is also unattractive.
The best course of action is to evaluate development on a case-by-case basis: know the costs and find the solution that fits best.
As far as the user agent is concerned, the iPhone specifies this platform information: “(iPhone; U; CPU like Mac OS X; en)”. There’s more detail in the “iPhone guidelines”:http://developer.apple.com/iphone/designingcontent.html
As others have pointed out, you shouldn’t place too much weight on that string, since there are other mobile devices that can benefit from handheld markup and styling.
Craig Hockenberry
By sheer coincidence, Cameron Moll released a PDF book entitled Mobile Web Design on the same day of my article.
I took a look at the preview pages and it looks like a great resource for anyone thinking about developing for mobile devices: especially for ones other than the iPhone. There is more information on “his weblog”:http://cameronmoll.com/archives/2007/08/mobile_web_design_the_book_available_august_28/
Janne Kalliola
Please do remember that in a global scale, iPhone is in a niche—and will stay there for a long time.
Nokia, for example, is shipping more than 1.1 million phones a day (“see here”:http://www.tgdaily.com/content/view/33204/118/ ), so they’ll sell more phones in nine days than Apple during the rest of the year. Further, 1.1 million is number of real shipments, not predictions.
N95 has sold more than iPhone and it is a quite capable phone, but I haven’t seen any tips and tricks to made sites just for it. Maybe ALA would pick the topic?
Angela Parker
Thanks for the info! As an iPhone lover (I never leave home or the office without it) and someone concerned with making sure my websites are as mobile friendly as possible, I will use this info and will encourages my own readers to read your article.
I’m looking forward to installment #2.
Russell Heimlich
I’m shocked that ALA has allowed an article to be published that goes against it’s prior preaching of code once for all browsers and devices. Device specific design seems like a trip back to the dark ages when everyone “optimized” their site for a specific browser.
Yes, the iPhone is neat and shiny but what about the 650 million other mobile-web devices out there? The iPhone only accounts for 0.046% of mobile devices.
Here is a graphic that will help put things into perspective -> http://www.russellheimlich.com/blog/the-iphone-is-not-the-only-mobile-web-device/
Pirkka Rannikko
I think it is absurd that Nokia and Apple haven’t implemented the support for handheld mediatype in their browsers. It would make everyone’s life so much easier helping the developers and users both. Fortunately Nokia has give people the opportunity to have their “say in the future development of the S60 platform”:http://www.s60.com/business/productinfo/wishlist/displayWishDetails.do?wishId=1021&activeCat=10. I even think that Nokia is subconsciously admitting that it might have been a mistake not to support the handheld media as “discussed on the Boagworld forum”:http://boagworld.com/forum/comments.php?DiscussionID=2572&page=1#Item_5. Of course I might just be imagining.
Another thing what I don’t understand is the fuzz about iPhone. Of course it is sexy and cool and every geek must have a one but as mentioned before it’s sales are only a needle in a haystack. The one thing that I consider important in the whole iPhone phenomenon is that it brings more attention on the whole mobile web issue and even main stream users will eventually understand that they have the Internet in their pockets.
Nemanja Cosovic
How do you detect an iPhone that access the site?
Philip Howard
I would have prefered an article on the growth of Opera Mini and to a lesser extent Opera Mobile. There is a far wider user base out there. I’m a new student to all this but if i was to adapt a site i’d be optimizing it for Opera Mini.
“Opera Mini Market share”:http://operawatch.com/news/2007/09/opera-minis-growth-over-the-past-5-months-027-of-total-market-share.html
David Pennington
Thank you so much for including the numbers about how many mobile devices Apple is selling. This great post (and the one on “Switchy McLayout”) have helped me to decide on building sites to accommodate screens that are under 640px.
I can’t wait to test these ideas out on my Boss iPhone. (That line about her buying ME one back fired…)
Laura PLEXI
The first question in my mind, how to build my website to really accommodate little devices like iPhone and others? It’s like “extensibility” question on the web?
At last time, I am testing one version of my website which is extensible, but I suppose that isn’t enough or satisfying. I see as the Safari browser implements tools to improve for displaying media (image for example). It’s very interesting.
But a subject of your article makes me being attentive : “the <meta> tag with the viewport information” !
I would like to learn more about that.
Can you really explain me how is it used?
Thank you for your answer.
Paveo Chen
I own a iPhone now, thanks for the post of iPhone’s HTML and CSS capabilities.
Matthew Taylor
One of the main limitations I’ve noticed with the iPhone concerns scrollable divs within the page. For example “wide comic strips”:http://matthewjamestaylor.com/comics/ogga-cyclone are no longer scrollable even though they still work on the full Safari.
Tommy Bekri
I imported mine as i live in Germany and it isnt out here yet, a wonderful peace of hardware..
Jared Stein
Hm, we’ve been spent some long hours XSLT’ing our XML-based Flash flashcards for web browsers, and lo and behold, guess what’s on iPhone Safari’s list of unsupported technologies?
Here’s the full list, from the iPhone Dev Center:
Safari on iPhone does not support:
* window.showModalDialog() or window.print()
* Mouse-over events
* Hover styles
* Tool tips
* Java applets
* Flash
* SVG
* XSLT
* Plug-in installation
* Custom x.509 certificates
* WML
* File uploads and downloads
Jared Stein
Hm, we’ve been spent some long hours XSLT’ing our XML-based Flash flashcards for web browsers, and lo and behold, guess what’s on iPhone Safari’s list of unsupported technologies?
Here’s the full list, from the iPhone Dev Center:
Safari on iPhone does not support:
* window.showModalDialog() or window.print()
* Mouse-over events
* Hover styles
* Tool tips
* Java applets
* Flash
* SVG
* XSLT
* Plug-in installation
* Custom x.509 certificates
* WML
* File uploads and downloads
Thomas Burt
Love the great feature of the iphone. It has the futuristic look and it works great. Looking to get my hands on this phone coming feb 2008! Iphone rocks!
Bret Lanius
I’ve been fighting this issue for days and the Quicktime tags just don’t work…
I had it working somewhat but ONLY if the poster image was a full path to it and the video was NOT full path AND in the same folder. I am using the embed tags exactly as described in Apples site and here.
Saf Ernest
Hello!
First of all thank you for posting such a great and easy to understand info.
Some links however are broken (do not need .html part):
http://www.css3.info/preview/rounded-border.html
should be
http://www.css3.info/preview/rounded-border/
Same goes for http://www.css3.info/preview/border-image.html
Regards! Saf
Paul Gustafson
This is a great article, but I would like a little more info on the section where you talk about adding video to an iphone optimized site. Do you have any resources for doing this?
Thanks, great article!
Ryan O'Connell
I’m wondering how the hcard code handles International calls where numbers need to be omitted or added to dial out of the country and into another.
For example, the standard for displaying a French phone number with country code is: “33 (0)4 68 71 31 58” and you assume that an International caller knows to ignore the Zero in parentheses. Does the hcard have similar ignore if international protocol?
seanmullins
You mentioned using css to load lower res images for the iPhone, did you mean using css background images, or some other technique? Css background images are not really appropriate in a lot of cases as they don’t have alt tags.