My daughter pulled me into it, as usual. I mean, for the longest time, I didn't even have a cell phone. So for years daughter borrowed cell phones from every adult she could find, asking first do you have any games? and then proceeding to explore every function the cell phone could offer. When I finally broke down and got my own cell phone (cheapest plan I could find, with a bare minimum of features), daughter managed to make the most of it. And all was well — until recently, when iPhone buzz leaked into our home. It started slowly — a drip-drip of possibility — quickly morphing into flash-flood of desire. Apparently the daughter (now 12) had seen the iPhone on T.V., and did a google search on it. (This is the real reason why you should not allow televisions and computers in your child's bedroom.) Soon she was watching Youtube iPhone demo videos — over and over. And then she began to show them to me. Over and over. She told me about all the apps she'd heard about. At one point, watching an unrelated Steven Colbert rerun on TV, daughter said That guy should talk about the iPhone. (Apparently there were a few videos she missed.) So one Saturday afternoon, I agreed to take my daughter to the AT&T store, just to LOOK at an iPhone... touch one... explore a little. MISTAKE. I should have duct-taped myself to the mast — and my wallet to my ass — because next thing I knew (after daughter demoed it as expertly as if she'd been using it all her life) we were walking out of the store with a brand new iPhone 3G. You'll love our coverage, the AT&T salesman assured as he packed the phone into a bag, only for us to discover upon arriving home that we had no reception within a quarter mile of our house. Dang! I thought, now we have to move.
iPhone is different
In the meantime, we brought our iPhone into the streets, where I explored its possibilities (during the moments I was able to wrest it from my daughter). For me, one of the most interesting things about the iPhone (outside of beating my high score at Tap Tap) was exploring the web — and I'm not alone. 2008 studies show that between 85 and 95% of iPhone owners regularly use the web (as opposed to 13% of mobile phone owners and 58% of total smart-phone owners) (1, 2). So iPhone's browser is definitely worth keeping in mind when building websites.
Some Characteristics of iPhone browsing
uses a special version of the WebKit-driven Apple Safari browser
sites render relatively slowly on the phone network, but quickly over a wireless network
when you first land on a site, the viewport assumes a 980px wide resolution, unless told otherwise via the viewport meta tag
you can create an icon called a web clip, which a user could keep on his or her home screen for quick access to your site or application
fingertip navigation
to zoom in on a site, use your thumb and forefinger to stretch it, to zoom out, use thumb and forefinger to pinch it (aka multitouch navigation) — awesome!
scroll, slide, tap interface items with your finger tip
a light resting of your fingertip on a link works like a hover, while a finger-tap works like a mouse click
typing is a bit awkward... especially long URIs
most navigation signals are given with finger taps
tap on an embedded Youtube video, and iPhone opens the Youtube application in landscape mode, and plays the video
iPhone Safari auto-detects phone numbers on a web page, turns them into links — tap the link and it will offer to dial the number. tap again to dial. (this can be disabled)
From what I have gathered by reading the Apple iPhone Safari web developer docs, visiting different sites, and coding my own simple site with an iPhone in hand, there are three basic approaches to optimizing your site for the iPhone:
Keep it simple - KISS - to the limit!!!
detect iPhone with CSS, and deliver it optimized styles
detect iPhone with a script, and send it to an optimized HTML page/site
So, working backwards, starting from most resource-intensive solution and moving toward the simplest:
3. Detect iPhone, and send it to an optimized HTML site
The third method, detecting iPhone (specifically) with Javascript and sending it to a different HTML file, flies in the face of browser-independent coding and probably does not need to be employed by any site with a truly well-constructed front-end. However, for certain high-traffic sites accessed regularly by folks on the go, especially those wit confusing administrative interfaces loaded with widgets, feeds, and negligibly useful applications, it makes sense to put some resources toward developing a clean, simple intuitive front-end for iPhone users. Hello Facebook! Facebook's iPhone interface is accessible from any browser at iphone.facebook.com. The special iPhone login page, maximizes iPhone screen real estate by setting the viewport meta tag to 320 pixels wide (the actual design is liquid). From there, it is clear what your next step is, as a Facebook user (Log in — or secondarily register, or view the regular Facebook site) Once you are logged into Facebook on iPhone, you come to another iPhone-optimized page, with friend updates front and center, and four basic navigation tabs. HTML, CSS, and Javascript are all optimized for the iPhone. For me personally, Facebook is better on the iPhone, because that interface does the best job keeping the most dynamic (and presumably, most used) features front-and-center. Twitter has employed a similar strategy, which you can read about on, and visit from http://twitterforiphone.com/ and on Laughing Squid. Twitter also offers a SSL login for mobile users. Other than that, I'm not certain whether a site as simple as Twitter truly needs a special iPhone interface.
2. Detect iPhone with CSS, and deliver it an optimized style
iPhone ignores handheld CSS media-type, but if you need to serve iPhone a special stylesheet, Apple explains how to do so, using conditional CSS: (3). This seems to be a relatively elegant solution that I imagine would come in for example, if your CSS design is image-heavy and you want to serve iPhone users a more streamlined CSS, or if you want to make iPhone-friendly adjustments to your layout.
1. KISS it - to the limit!
Keep it simple, stupid is the alpha, and the omega of website design. Simple sites tend to be faster, more usable, and more degradable (backwards, forwards, and sideways). KISS is the technique I employed in my efforts to design an iPhone friendly site. The site, 10volt.org, is a simple WordPress blog set up for evolt's 10 year anniversary. I started building the site using iPhone viewer, and by the time I finished, I was viewing it on the iPhone. I wanted to build a content-focused site, and I wanted to be done in a weekend, so it needed to be simple and easy for me, my users, and user-agents. The first thing I did in hopes of accommodating an iPhone was to change my blog theme (darknight2.0, a standard WordPress theme) to a fully liquid layout. I later realized that iPhone does fine even with fixed-width sites (again, defaulting to 980px view, unless instructed otherwise), especially CSS layouts that constrain and divide content areas reasonably. But since I've always loved liquid layouts, I kept it fluid. I was able to use most of the viewport by keeping body margins small, while horizontally restraining the wrapper div on large monitors with the max-width property.
Columns and Blocks
After some exploration I found that my favorite sites on iPhone are those that offer narrow columns for large quantities of text, and small boxes for small chunks of content. I totally loved perusing the front page of sites like alistapart.com and mandatemedia.com, where the iPhone could explore every box on the page, almost like using a magnifying glass to zoom into rooms in a dollhouse. I later learned that not only are column and block layouts much easier to read on iPhone, they support iPhone navigation, too! When a user double taps on a CSS block-level element, Safari will zoom to fit the element in the screen, and center it.(3) For more in-depth reading (text-heavy content), it's important to me not to have to shift text back and forth from the beginning to end of text lines. Columns need to be sufficiently narrow for text to be magnified to a readable level, while still fitting fully in the iPhone screen.
viva suck!
At some point it occurred to me that the the circa 1995 design of suck.com would be perfect for the iPhone. I was not disappointed. suck.com, currently being archived at its original location, is totally readable on iPhone! You don't even have to turn it sideways! In fact, like Facebook, I found suck.com to be MORE readable on the iPhone than on a desktop — yet without creating an iPhone-only layout. And, bonus! suck.com is also the easiest URI to type into an iPhone. Thanks to iPhone, I've finally made it through an entire suck essay!
iPhoney: iPhone viewer for Mac developers
If you have OS 10.5 (I don't) you can download iPhone SDK for free: http://developer.apple.com/iphone/. For Mac developers without iPhones or 10.5, there is the iPhone viewer: iPhoney. It is a slick open-source app and worth trying out, but the iPhone touch-screen is revolutionary in ways that a desktop app would be hard-pressed to really emulate.
In summary
Ultimately, this is how I'd focus my website development, with iPhone on the market, and others following behind:
Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.
