New iPhone website

As you can see by the previous posts that I have been focusing on the iPhone, which due to a little free time has allowed me to try somethings I have always wanted to do. I decided to make an iPhone version of the 2009 Alex Mills Design preview page. In my research for a script to tell the iPhone to use a different CSS file, I came across this tutorial. Unknown to me was the fact that the Safari browser on the phone runs a little script every time it gets rotated, with a result of either 0 (vertical), -90 (left) or 90 (right). The tutorial covers writing the javascript that intercepts the angle result from the browser, which then tells the CSS to display a certain div. So I built a vertical, left side and right side 'view' in Keynote, imaged them using skitch and built them into a neat little site using Coda.

The image below is was is displayed when the iPhone is held vertically, with instructions on how to see the other views.

Rotate the phone left and the view will change to one with links to Donald's blog and to mine. Plus another little instruction on how to return to the normal view.
Rotate the phone to the left and the view will once again change to one almost identical to the previous, except with only one link to the current website and a different rotate instruction.
Yeah I could have just put the links on one view and while this setup wont be suitable for every page, it gives you complete control over how the page works in the browser. Also the fact that it's designed for one browser on one phone* makes testing simple, though you will need an iPhone or iPod touch due to the way the CSS hides everything, making desktop testing impossible.

Check it out and let me know what you think, its just a little weekend project but I'm happy with how it turned out. Just head to www.alexmillsdesign.com with your iPhone or iPod touch and it automatically send you to the iPhone version.

*Though the webkit browser is used in a number of other mobiles including android, the detection script is only looking for iPhone and iPod in the UserAgent.