Designing for the iPhone was a refreshing experience. If you don’t follow my twitter than you don’t know that I released an iPhone version of my site. I rolled it out in only 2 days worth of development time. When you don’t have to worry about cross browser compatibility, and you don’t have to spend most of your time living within the constraints of CSS2.
Development becomes extremely refreshing. Half of what we do on the web is problem solving anyway; no matter what medium we are on. On the desktop we think past CSS2 constraints; on the iPhone we solve real estate constraints.
With the success of the iPhone, competitors are bound to catch up sooner or later – everyone will have a full fledge web browser in their pocket. So, with my experience designing for the iPhone, here are some things I have picked up along the way.
One size does not fit all.
No matter what the books say, no matter what Zen Garden demonstrates, one document does not fit all mediums. In the real world you are going to want to supply separate markup to the iPhone. The interface is drastically different that most features will have their own page, for example on a blog you will want one page with the post and a separat
Another example is if you have non-presentational images in your markup, you are going to want to strip those out – they are optimized for the web, not the iPhone anyway.
Technically the books are correct; a simple display: none; will solve a lot of problems. But, using the same markup across all mediums is just not ideal for real world practice.
Use bigger target areas.
When on the iPhone we are using a completely different input device, our finger. Because our finger is obviously a lot larger than our cursor, targets need to be big with a lot of padding. One of the toughest things to do is click a small link on the screen so we need to design our links to have a big enough target area. Be brave, add as much padding as your design allows.
I am a big believer in bigger target areas even on the desktop; it takes an extreme amount of less effort. To top it off, it’s one of those small details that no one ever notices until they have to tap the link three times before it registers it. (I love that kind of detail).
Leave CSS2 behind.
One of the most refreshing things about the iPhone is that there is one browser; one device. We know everything…we even know that this one browser supports CSS3! No more having to use #last and #first; isn't that bliss? So why bother using CSS2? It’s inevitable, iPhone competitors will rise sooner or later, but I really don’t seeing them not supporting CSS3.
Keep it simple.
iPhone design is all about getting creative; strip features and keep it simple. I think that is why I love iPhone design so much. Keeping things simple is what I love to do…hell that’s what Framefront and PureEdit are modeled after. You can only fit so much in the small real estate that the iPhone provides, and scrolling is a huge issue if it gets out of control.
Two features are better than three; three is better than four.
This goes with what I said before by using separate markup for your iPhone specific versions. To keep it simple you are going to have to supply your iPhone version with separate markup.
The point is: it’s on-the-go.
The whole point of internet access on the iPhone is because it’s on-the-go; you need quick and easy access. More than likely your user is not going to want to delete stuff, reorganize their inbox, or edit their profile on the iPhone.
The future worries me.
Try to imagine 5 or so years ago when CMS’s started to pick up the pace; clients began to request them with assumption that it would be included. Now, think present time again; full fledge web browsing with full functionality is here. Clients will soon be requesting mobile alternative websites with much of the same assumption as they did with CMS’s. Hearing “We want to update it ourselves” will soon become “We want a mobile alternative.”
With the iPhone revolutionizing the market, iPhone competitors will show up supporting mobile browsers other than safari. We will begin a new age of browser wars. So how long do we have until the mobile web becomes saturated with competitor incompatibilities, and this refreshing experience becomes like the desktop troubles of today?
Until next time, follow me on twitter, @michaeldick