Design For Iphone A Device That Thinks Different
Posted on 02 Oct 2008
by Erika Meyer (erika)
Rated 4.15 (Ratings: 5)
- More articles in site development
I bought an iPhone last week.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
borrowedcell 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.
now we have to move.
iPhone is differentIn 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
- Supports CSS media types. ignores
- 2"x3" screen can be turned to portrait (vertical) or landscape (horizontal)
- no support for Flash, Java, or Quicktime
- typing long URIs can be cumbersome, and there is no
- text fields in forms bring up letter key display, limiting screen real estate
view source functionon browser here's one solution by Abe Fettig)
- 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
stretchit, to zoom out, use thumb and forefinger to
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
drag and drop elementsreplaced with
- to zoom in on a site, use your thumb and forefinger to
- native application integration
- 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)
- addresses can be used to link to the map application
Design with iPhone in MindFrom 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
2. Detect iPhone with CSS, and deliver it an optimized styleiPhone ignores
handheldCSS 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, stupidis 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
Columns and BlocksAfter 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 developersIf 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 summaryUltimately, this is how I'd focus my website development, with iPhone on the market, and others following behind:
- KISS and use good practices for design and coding
- Use viewport meta-tag to focus in on fixed-width layouts narrower than 980px
- use column-and-block layout techniques
- use conditional CSS if necessary to optimize a stylesheet for iPhone
- Apple Developer Connection: Safari Web Content Guide for iPhone
- The WebKit Open Source Project
- Peter Paul Koch: Quirksmode: iPhone events