Website Design For The iPhone

Recently I have been taking a course provided by the W3C on mobile best practices designed to give the participant the best ways in which to design for mobile.

Topics covered are things such as graceful enhancement and graceful failure, designing specifically to allow access on various mobile browsers and adding enhancements to the site to improve user experience on the desktop browser or to allow them to fail gracefully so as still accessible on the mobile platform.

Doing this has inspired me to design a mobile specific version of my own website. Now while I would (ideally) like to create a version that is designed for all mobile platforms, I think I will start with just the iPhone.

Step one is already complete! Which is to say I have set up www.craigmdennis.com/iPhone/. Really tricky stuff…

The next step is to set up some kind of automatic detection and redirection to make sure if people using an iPhone access my site, they get taken to the iPhone specific version.

There are several tricks and treats (pardon the Halloween pun) available when designing a site for the iPhone that allows for the use of certain javascript functions to make use of the touch screen and the orientation detection. Something that means you can even show completely different content when the orientation of the iPhone changes. A great tutorial from Engage Interactive shows what is needed to do just that.

So I am designing a basic UI to navigate to the various sections of my site: Portfolio, Blog, Photography & CV. I want to make sure of the iPhone style photo navigation but that will be a little later on. I can’t decide what to do for the blog section and whether to have a list of titles, titles and descriptions or just the most recent post.

I also have to figure out how to turn off the iPhone redirection when linking to the ‘normal’ version of the site.

• Design
• iPhone
• Javascript
• UI