Put Your Content in my Pocket, Part II

by Craig Hockenberry

26 Reader Comments

Back to the Article
  1. user-scalable is part of the content attribute, not its own attribute, so: <meta name=“viewport” c user-scalable=“no” /> should be: <meta name=“viewport” c user-scalable=no” />
    Copy & paste the code below to embed this comment.
  2. Craig I read the first one and the second one is also very good written! I think everyone can agree that size matters for me 480×320 pixels (landscape) is the best option so I will buy it next month and check how it really works! Regards
    Copy & paste the code below to embed this comment.
  3. I noticed how some websites rushed to create subdomains like iphone.somedomain.com when the iPhone first came out. But, now that mobile Safari is appearing in other places (like iPod Touch) that line of reasoning doesn’t make sense. I realize (and agree) that the best practices is to have one web address where all of your users can go. But, since not everyone actually takes that approach I’m just curious as to what people would actually call their mobile Safari friendly site? I think maybe it’s time to ditch those iPhone specific URLs since no one’s going to remember them.
    Copy & paste the code below to embed this comment.
  4. James, thanks for spotting that! I’ve let the editors know so we should see an update later today. -ch
    Copy & paste the code below to embed this comment.
  5. I had a hunch that the multi-touch UI would make it into other devices offered by Apple. Using iphone.domain.com or domain.com/iphone seemed shortsighted to me. In the long term, I think the most important thing about the iPhone/iPod is that they raise the bar for mobile devices. I think there will be a lot of manufacturers that follow Apple’s lead—making devices that use the real Web, not some dumbed down version. (Some manufacturers are already doing this, more will follow just to remain competitive.) The best way to look at the problem is from an information architecture point-of-view (specifically in regard to usability.) From that vantage point, it seems that domains like mobile.domain.com and domain.com/mobile make the most sense. It lets the user get to a part of the site where layouts can be larger and less essential content can be filtered out. -ch
    Copy & paste the code below to embed this comment.
  6. Is there a reason to not use relative font sizes? And, by the way, what is the calculated default for font size in Mobile Safari?
    Copy & paste the code below to embed this comment.
  7. One problem I ran into as a developer is that while Mobile Safari supports basic authentication, the media player doesn’t. What this means is that when Safari hands basic auth-protected video off to the media player, you get an error and it doesn’t stream. I’ve filed a bug report with Apple for this, but no news yet!
    Copy & paste the code below to embed this comment.
  8. How about ie.somedomain.com, firefox.somedomain.com, 800x600.somedomain.com, or maybe combined firefox.800x600.16bitcolors.somedomain.com…
    Copy & paste the code below to embed this comment.
  9. Isn’t it the wrong direction to develop pages specific to some devices? I think you should rather try to make your sites flexible and accessible so you can view them from any browser. So now it’s not only the iPhone, but also iTouch and the Samsung F700 and so on…
    Copy & paste the code below to embed this comment.
  10. That you should develop mobile pages for every single device. I think it’s more that you should be aware of mobile devices and that this article shows some examples of things to consider. Of course, as more mobile devices come up, you should have a more abstract approach to that.
    Copy & paste the code below to embed this comment.
  11. First apple has commercials stating the iphone as not having a “watered down version of the internet”, then I hear “making devices that use the real Web, not some dumbed down version”, but here we are as developers trying to figure out how we need to rewrite websites to accommodate this device. If this is really a true browser and not a watered down/dumbed down version then we should not need to change our code. As for the article, it is well written, and will be very useful to developers who need to be concerned with iPhone/iPod users.  My comment is not to detract from the article, only to point out the flaws in apple’s “mobile web”.
    Copy & paste the code below to embed this comment.
  12. While I know this article primarily focuses on the iPhone, my question relates to the mobile web in general, including the iPhone. Have we reached a point in the mobile web where they standardized the protocols used by mobile devices?  Last I heard, each phone for instance, had its own standard and that meant different style sheets etc. for Nokia, Motorola, Samsung, iPhone, and likewise for other mobile devices like PDA’s. Any suggestions on some good resources regarding considerations for developing mobile web applications to work across a wide number of devices?
    Copy & paste the code below to embed this comment.
  13. James Luterek, if you have to rebuild your whole site to accomodate the iPhone, I think you might have built the website in the wrong way in the first place. A well-designed web site that follows the standards and guidelines set down by W3C and web design experts shouldn’t need much more than a new CSS file to accomodate the iPhone. If your site requires heaps of more changes than this, it’s clearly not well designed. Oh and what’s the deal with the fixed font sizes? Can’t a relative font size be used? On a default installation, what will e.g. “1em” correspond to in pixels?
    Copy & paste the code below to embed this comment.
  14. Asbjørn Ulsberg, I was trying to state that we should not need to rewrite our code.  Unfortunately in my experience the iPhone has not been able to correctly handle most websites, with smaller more simple ones it get does get close.  Perhaps I just haven’t seen a website written to well enough to not need iPhone specific code.  If you would be kind enough to point an example I would be very thankful. THank you.
    Copy & paste the code below to embed this comment.
  15. You mentioned that we don’t know what the iPod Touch user agent will be yet but there is a detection script made by the WebKit team themselves. http://webkit.org/blog/119/webkit-detect-script-updated-for-iphone-and-ipod-touch/
    Copy & paste the code below to embed this comment.
  16. bq. Unfortunately in my experience the iPhone has not been able to correctly handle most websites Really? That’s not been my experience. Most sites looks great on my iPhone. (Which is good, because I get lost all the time in my car, and Google maps on my iPhone renders beautifully. I wish my iPhone had a GPS. Then I’d be set.)
    Copy & paste the code below to embed this comment.
  17. 1) I’m writing and app and I want it to be exactly one screenful. (Screenfull? Screen-full?) I found this when I was searching for ‘mobile safari pixels’—I wanted to know exactly how many pixels are presented to the user when they first load a page in Safari. Since you did 90% of the work for me, here’s the punchline: Safari is…
    * 320w x 356h in portrait mode
    * 480w x 208h in landscape mode. Note that that’s approximately 114k pixels vs. 100k pixels—about a 14% difference in real estate. 2) Writing numbers vs. spelling them out: it looks like you’re following the old rule of spelling numbers less than or equal to ten. However, this makes it tough to skim the page for info since numbers jump out at you and words don’t. For example, compare these two lines: * Animated GIF graphics must be less than two MB.
    * Total page content size should be less than 30 MB. or… “JPEG images up to 32 MB will be loaded, but automatically resampled down to the eight MB size.” When skimming the page, the values ‘30 MB’ and ‘32 MB’ jump right out at you but ‘two MB’ and ‘eight MB’ don’t. You also can’t compare numbers to words—the brain automatically determines in an instant that 32>8, but it takes a second to figure out if 32>eight. In a case like this, I’d use numbers throughout. 3) Speaking of mimicking the iPhone’s style: iPhone main screen icons are 57x57px and the corner radius is 10px. (My icons are 52x52 to fit 6 across in portrait mode and 9 across in landscape.) 4) James L—it’s possible to make something _work_ in all environments and still _optimize_ for some environments. I see nothing wrong with a site creator doing that if he wants to. For example, there are some (valid) sites that work better on my Axim than on the iPhone (for reasons I won’t go into here since this post is already rivaling the article’s length.) A few tweaks to enhance the experience on any platform are always welcome if the site designer wants to put in the effort. Furthermore, since writing Web apps is the _only_ (supported) way to get apps onto an iPhone, _of course_ we’re going to optimize for the device when we’re writing something that will only be used on an iPhone. If anyone’s curious what I’m up to, I’m working on a free way to stream an iTunes library to an iPhone or iPod touch via WiFi, either on a local network or over the Internet. Here’s the page for my project: http://pixelcity.com/iphone-streaming-music/
    (iPhone-friendly URL: http://pixelcity.com/iphone/ ) (Not much there at the moment, but you can see the start of a UI. It works but it’s ugly—another day of prettying up and it’ll be ready for release.)
    Copy & paste the code below to embed this comment.
  18. Craig, You say: “You can create a new window using either window.open() or “_new” as a link target attribute.” I don’t get that behavior from target=“_new”. If I have 2 links each with target=“_new”, and I tap one, go back to the page with the links, and tap the second, the second link/page replaces the first. I thought you were saying _new would *always* try to create a brand-new tab, even if it was used twice. It doesn’t seem to be treated different than any other target value. Am I missing a trick here?
    Copy & paste the code below to embed this comment.
  19. bq. “You can create a new window using either window.open() or “?_new”? as a link target attribute.”? It should of course be target=“_blank”. The four keywords are _blank, _top, _parent and _self. Specifying anything else in the target attribute will (i) load the referenced page in that window/frame/tab, if one with that name already exists, or (ii) will open the referenced page in a new window/tab with that name.
    Copy & paste the code below to embed this comment.
  20. MobileSafari keeps replacing the previous page/tab with the next one each time I follow a different link with target=“_blank”.
    Copy & paste the code below to embed this comment.
  21. “As you explore the iPhone, you’ll be happy to learn that the browser works surprisingly well” Of course, I would like to get it correctly.
    Copy & paste the code below to embed this comment.
  22. LOL!  I’m sorry but if you haven’t been sniffying user agents you have not been deliberately sending anything to a phone UNTIL the Iphone!  You’ve just been ignoring the mobile user, and hoping blindly their phone supported flash, javascript, gifs, bitmaps, streamign media, non streaming music and video formats… etc.
    Copy & paste the code below to embed this comment.
  23. Really astounding that images must be less than several megabytes ... I’m assuming that’s what’s being said? To me, it would be an extremely unusual circumstance in which we’d include images of that size. Good analysis, everyone. Very helpful.
    Copy & paste the code below to embed this comment.
  24. As someone who is tech savvy, I do agree with your comments.  However, I think that the typical, non-techie is not hypersensitive about these issues and are fine with it.
    Copy & paste the code below to embed this comment.
  25. Use window.scrollTo (0.1) is a strong plus. Especially when intensive press articles in the information services. This surprised me very much that does not support the well-known formats such as AVI or MPEG? I have a format based on these few pages and can not imagine now change the code into another format. Very good article particular section of styles. My blood is always flooded when checking style look at the iPhone. Amendments, modifications and workarounds. ahh
    Copy & paste the code below to embed this comment.
  26. thank you very much for such an awesome post really worth it i think thts te best posted artile on this particular topic
    Copy & paste the code below to embed this comment.