August 29, 2007 C77 Studios on the iPhone 
I don’t yet have an iPhone, but Put Your Content in My Pocket on A List Apart, and today’s release of Cameron Moll‘s Mobile Web Design got me eager to play with structuring a site for one.
You can essentially view an iPhone-optimized site in any browser, including Safari and Firefox. To better simulate the experience, I downloaded the iPhoney emulator. Here’s what things look like in iPhoney:
The emulator’s bigger than the device in your hand. It’s designed that way so the resolution of what’s rendered matches the higher resolution of the actual iPhone. I find the Digg iPhone interface really appealing, and used that as a basis. What I haven’t picked apart yet is the nifty JavaScript Digg uses to slide from the list of topics to the actually posts, which are contained in the same page.
The page is managed by my ExpressionEngine install, and uses the Magpie plugin I previously covered to pull in del.icio.us links.
There’s a few steps I took to make the page iPhone-friendly. The following meta tag in your page keeps the iPhone from scaling the page as it typically would. We’re formatting the page specifically for the iPhone.
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
The HTML is a straightforward series of <p> and <a> tags, with the <a> tags set to display: block with dimensions making the entire shape “clickable” by a finger of any size.
In the CSS, I set the body to turn off scrollbars, even though I did code to the anticipated width:
body { overflow: hidden; }
Then I defined all my shapes to fit 100% of the screen, so that they fill it nicely when turned sideways or vertical:
width: 80%; height: 25px; line-height: 25px; padding: 10px 15% 10px 5%; font-size: 15px;
Finally, all the <a> tags have a background image (the right-pointing arrow) positioned as:
background-position: right center;
That’s the gist of the coding. And if you’re really, really into the content that I post to del.icio.us and share on C77, you can now access it from your iPhone. Enjoy!
For more posts about mobile web development, visit http://www.c77studios.com/archives/category/mobile.
