Design for iPhone by snkhan120


More Info
									       Design for iPhone: a device that thinks different
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 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
      Supports CSS media types. ignores handheld media type.
      2"x3" screen can be turned to portrait (vertical) or landscape (horizontal)
      no support for Flash, Java, or Quicktime
      Javascript works, with some limitations
      typing long URIs can be cumbersome, and there is no copy/paste
      text fields in forms bring up letter key display, limiting screen real estate
      no view source function on 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
           o 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) —
           o scroll, slide, tap interface items with your finger tip
           o a light resting of your fingertip on a link works like a hover, while a
                finger-tap works like a mouse click
           o typing is a bit awkward... especially long URIs
           o most navigation signals are given with finger taps
           o drag and drop elements replaced with click to click
      native application integration
           o tap on an embedded Youtube video, and iPhone opens the Youtube
                application in landscape mode, and plays the video
           o 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)
           o addresses can be used to link to the map application

Design with iPhone in Mind

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:

   1. Keep it simple - KISS - to the limit!!!
   2. detect iPhone with CSS, and deliver it optimized styles
   3. 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 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 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: <link media="only
screen and (max-device-width: 480px)" href="small-device.css"
type="text/css" rel="stylesheet"> (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,, 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 and,
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 would be
perfect for the iPhone. I was not disappointed., 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 to be MORE readable on the iPhone than on a
desktop — yet without creating an iPhone-only layout. And, bonus! 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: 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:

   1.   KISS and use good practices for design and coding
   2.   Use viewport meta-tag to focus in on fixed-width layouts narrower than 980px
   3.   use column-and-block layout techniques
   4.   use conditional CSS if necessary to optimize a stylesheet for iPhone
   5.   test Javascript interface elements for touch-screen usability

See also:

       Apple Developer Connection: Safari Web Content Guide for iPhone
       The WebKit Open Source Project
       Peter Paul Koch: Quirksmode: iPhone events

To top