Put Your Content in My Pocket

by Craig Hockenberry

46 Reader Comments

Back to the Article
  1. Thanks for that interesting coverage of iPhones HTML and CSS capabilities. While the iPhone is not available in Europe yet, it’s good to be prepared.

    Sometimes it may be necessary to have two versions of your website: one for web browsers and one for mobile devices. Even if your website is clean you might want to reduce the content for mobile devices and you even might to have a different page flow. The capabilities of mobile devices always increase and the iPhone might be a low end web browser or a high end mobile browser. So it’s ion between the two versions and you have to think how to cover it without making a third version.

    Copy & paste the code below to embed this comment.
  2. Thank you very much for this really interesting article!
    So far when I designed a new website I wasn’t considering mobile phones and even just didn’t know that there are special tags for mobile browsers. But as the mobile internet is growing so quickly, it is in deed more and more important to think about the special problems of mobile devices.

    Copy & paste the code below to embed this comment.
  3. I’m a bit disappointed by safari on the iPhone.  I have owned the Nokia N770 for a long time now and it has an excellent version of opera installed.  The new N800 has an even more advanced version, though both can handle css/javascript/flash.  I have yet to find a website which can not be displayed.  Although as developers we need to strive for perfection with our code, I think that mobile devices need to learn from Nokia and stop forcing users into a water downed version of the internet.

    Copy & paste the code below to embed this comment.
  4. It depresses me that, after a brief discussion about web standards, the first code I see in the article makes use of the <embed> element. I’m also disappointed that the CSS media type of “handheld” is unsupported.

    Copy & paste the code below to embed this comment.
  5. Thanks for the insightful article Craig. I’m also disappointed by safari on the iPhone. James I agree “The new N800 has an even more advanced version, though both can handle css/javascript/flash.” I tested N800 and it’s really great, I like flash on N800 it looks very good. Nokia is the king od mobile devices for me!

    Copy & paste the code below to embed this comment.
  6. I think far too much attention is being given to the iPhone, especially with the issues presented here. When developing for a mobile platform, no one should be focusing soley on the iPhone. That would be about as presumptuous as only checking your site for IE compatability. What needs to be realized is that the reason the iPhone is important is that it is adding to the growing demand for content provided to the mobile web. While I have no problem developing a mobile-specific style, it is arrogant for anyone to assume that I’m going to waste my time developing for one specific device. There are enough incompatability issues already, we don’t need any more.

    Copy & paste the code below to embed this comment.
  7. If you follow the logic of this article, the only conclusion you should come to is that developers should go back to what we did years ago when we had to create different versions of our sites for different browsers and then but a notice on the site saying it’s been optimized for x browser. The purpose of creating standards was so we could design once for all browsers. Should we all start to limit the widths of our pages so people using an iPhone don’t have to scroll horizontally to see everything?

    Copy & paste the code below to embed this comment.
  8. Richard, et. al.: This article is not about creating a version of your site that’s built specifically for a single device. It’s about taking into consideration the viewing environment and the needs of the user—they are very different on a small screen.

    The only thing special about the iPhone is that it will allow A LOT of new users to experience the mobile Web. If the layout of your site doesn’t work for them, you’ll want to address the problem or lose visitors.

    Copy & paste the code below to embed this comment.
  9. The biggest downside with not supporting flash (in my opinion) is how much that limits web experiences that include video. From a developer standpoint, flash has certainly become the easiest way to deliver video. Does this mean that iPhone will only support websites that use Quicktime as their video plugin?

    Copy & paste the code below to embed this comment.
  10. Craig, you wrote about the iPhone that “it will allow a lot of new users to experience the mobile web”. I think that is true if you just have a look at the absolute numbers. But there are billions of web users out there and the number of mobile web users is so small yet. Only the few more iPhone users will not make a difference. And even if they do you still have to get them onto your site. Will iPhone users find the iPhone enhanced web sites?

    Copy & paste the code below to embed this comment.
  11. Your comments say you are not telling people to create different versions of their site specifically for one device, yet in your article you say

    “Finally, you may wish to make a version of your site that is targeted directly at the iPhone: a site fully optimized for the device.”

    “Going deeper: designing for the iPhone”

    “Finally, remember the width of the iPhone screen: 320 pixels (for portrait) and 480 pixels (for landscape). Content that fits naturally within these sizes works best and will require less scrolling by the user. Likewise, content that does not span across multiple columns will be easier for the iPhone user to access.”

    “Now let’s talk about taking the big plunge: creating a separate part of your website that is dedicated to iPhone users.”

    To me, this sounds a lot like you are saying we should all develop sites specifically for the iPhone to make yours and the millions of other iPhone users happy.

    Copy & paste the code below to embed this comment.
  12. Adam, it’s true that there are not a lot of mobile web users. Yet.

    Take a look around and count how many white earbuds you see in your daily travels. Now think about each one of those people migrating to an iPhone or some similar type of mobile device and you’ll get an idea of the scale of the coming change.

    The iPhone is just a beginning.

    And they’ll find the content that best suits their device. People share links.

    Copy & paste the code below to embed this comment.
  13. Richard, these recommendations are options, not edicts.

    Do whatever you want. Just be aware that your decisions COULD impact a visitors experience.

    Copy & paste the code below to embed this comment.
  14. The comments people have made about making multiple versions of a site are quite valid. This article suggest, even advocates, the sort of forking we have been trying to avoid for years. It is for this same reason that I did not approve of the .mobi top-level domain.

    I’m sorry, but although this is a well-written and interesting article, I think this sort of encouragement is a backward step for A List Apart.

    Copy & paste the code below to embed this comment.
  15. I gotta back Craig up on this one. Phones are stealth thin clients, and while mobile web is not new, it just got a huge boost in momentum from Apple. If you want to look at the numbers, don’t look at PC users vs. smart phone users. Look at the total number of mobile phone users, and think about how it is more than likely that more and more of these users will be accessing the mobile web as phone manufacturers feel the need to compete with Apple.

    Also, just going by iPhone users, keep in mind that these are people that are willing to drop $500 – $600 on an unsubsidized phone. iPhone users are people with money to spend, a very desirable group from an advertising and marketing POV.

    Rather than complain, you should be thanking Craig for giving you the heads up so you can stay ahead of the curve in implementing these changes. From a purist standpoint, mobile web might be a step backwards, but real artists embrace challenges and limitations.

    Copy & paste the code below to embed this comment.
  16. I believe that given enough time, most people who design for the web realize they are information architects at the core. We become devoted to standards, not the client apparatuses no matter how glorious they may be.

    Copy & paste the code below to embed this comment.
  17. Mike, what’s the first thing you get from Googling “define:Information Architecture”?

    Term used to describe the organisation of information, the content, functionality, navigation and usability of a web site.

    In the case of the mobile web, the client apparatus has a direct and substantial impact on functionality, navigation and usability.

    Copy & paste the code below to embed this comment.
  18. You state: “Rely on web standards. If actions speak louder than words, note that Apple has replaced Flash with web standards on its own corporate website.”

    Very good article but what’s the web standard Apple is using? If you’re saying Quicktime, then I would argue the statement. How can Flash not be considered one if the penetration of the player is even higher than QT. I rarely design Flash content but in the end, both technologies are not necessarily “standards” but different means to an end.

    Copy & paste the code below to embed this comment.
  19. Very few companies will be issuing iPhones to employees, like Blackberry hand-helds. But still, the iPhone and everything to come from Apple sure may tackle the younger, non-executive market. Yep, I have one—and I’m not executive. I have it because it’s VERY cool, and has everything I want in a mobile device. Unfortunately, the service isn’t that great as a phone. How many dropped calls did I have yesterday….

    I’m also a Web Producer, and am excited about making some content that works really well on an iPhone. I’m impressed with the Web applications available already, as well as the tools (iUI).

    I let out a sigh when I used the iPhone Safari browser to view my Web sites… and they looked just fine, apart from missing Flash. Thanks, Apple. Nice article too!

    Copy & paste the code below to embed this comment.
  20. I was surprised that Apple chose not to support the handheld CSS media type – not even a preference or an option. This is a handheld device is it not? I get that Apple wants to provide the whole web and all, and Safari does handle big and wide sites quite elegantly. But at the same time, we have a handheld device here and a “whole entire site”:http://developer.apple.com/iphone/ at Apple dedicated to optimizing for the small screen, complete with a whole set of iPhone-only markup and CSS techniques to facilitate this optimization. And there is clearly a large and growing movement to build sites and applications specifically for the iPhone.

    Why not just support the handheld media type and be done with it? I’ve already optimized several sites for handheld media – they are now like the tiny little towns on Route 66 that got bypassed by the interstate. Apple could own this space in no-time with all the rush to build iPhone-compatible layouts. With Apple’s current guidelines, I feel like I’m having to fork my code unnecessarily.

    The iPhone should support the handheld media type, at least as a preference or an option. And all that font sizing and viewport setting should in my opinion be set in the styesheet and not in the markup. I love my iPhone, but this is the only area where I take issue.

    Copy & paste the code below to embed this comment.
  21. 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).

    Copy & paste the code below to embed this comment.
  22. 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.

    Copy & paste the code below to embed this comment.
  23. 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?

    Copy & paste the code below to embed this comment.
  24. 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.

    Copy & paste the code below to embed this comment.
  25. 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.)

    Copy & paste the code below to embed this comment.
  26. 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.

    Copy & paste the code below to embed this comment.
  27. 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/

    Copy & paste the code below to embed this comment.
  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?

    Copy & paste the code below to embed this comment.
  29. 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.

    Copy & paste the code below to embed this comment.
  30. 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/

    Copy & paste the code below to embed this comment.
  31. 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.
  32. How do you detect an iPhone that access the site?

    Copy & paste the code below to embed this comment.
  33. 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

    Copy & paste the code below to embed this comment.
  34. 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…)

    Copy & paste the code below to embed this comment.
  35. 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.

    Copy & paste the code below to embed this comment.
  36. I own a iPhone now, thanks for the post of iPhone’s HTML and CSS capabilities.

    Copy & paste the code below to embed this comment.
  37. 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.
  38. I imported mine as i live in Germany and it isnt out here yet, a wonderful peace of hardware..

    Copy & paste the code below to embed this comment.
  39. 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

    Copy & paste the code below to embed this comment.
  40. 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

    Copy & paste the code below to embed this comment.
  41. 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.
  42. 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.

    Copy & paste the code below to embed this comment.
  43. 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

    Copy & paste the code below to embed this comment.
  44. 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!

    Copy & paste the code below to embed this comment.
  45. 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?

    Copy & paste the code below to embed this comment.
  46. 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.

    Copy & paste the code below to embed this comment.