The idea behind this design was to create an interface within an interface and confine myself to a certain size to see how one could tackle designing with limited screen real estate.

The main problem that I faced with this confined UI is how to scroll text and images down the screen of the iphone. Over came this by using a span within the main_window span and giving it a property of overflow: auto; also had to assign a fixed height, otherwise it just kept scrolling down the page like a weed out of control.

Next was to create the headers from a non-standard font but maintain alpha transparency in IE by using PNG's. PNG? But IE 5.5 and 6.0 do not like to render alpha transparency. So what I used was a small Java Script hack I found, you can see the script if you view the source of this page. I edited the script to add a 20px margin, as doing so in the CSS code by itself only caused the images to be scaled 20 pixels larger in IE. I checked the script code out, saw that it was hammering out styles, added the 20 pixel margin in the script itself and it fixed the issue.

The end result is this, on retrospect it kinda looks like a Zune theme inside an iPhone. Best of both worlds? Hah!