It was a new experience designing for a mobile device, but quite simple with the approach that I took.
Basically, for the iPhone, the ideal width of the page is 320 pixels. For my design, I arranged the content in 320 pixel wide columns that flow to the left.
So on a computer screen they line up side by side, and on the iPhone, they stack up vertically, and there is no need to pinch the screen to expand the content.
Also, I made the header and footer 100% of the browser window width with a minimum width of 320 pixels. Any content in these divs will wrap around to expand the height of the div in the mobile device.
Special meta-tags for use with the iPhone:
The "apple-touch-icon" is needed for when someone wants to add an icon link to your site along with their app. icons. This icon is a .png image (114x114 pixels in size). But there are various sizes of app. icon needed to cover all the various devices.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name = "viewport" content = "width = device-width">
The viewport meta tag is useful to ensure that the website width is set to the maximum available on the device.
To test the design on a mobile device, you can use a simulator of some kind, but I chose to do it on my actual phone.
Over the wifi, I can connect to my localhost web server with, in my case, the ip address of the server and a path to the web site root.
So now that I have the mechanics of the web template sorted, it's time to plan the content areas of the site more.
One key area is the user profile. This needs to include things to keep the user interested to update their status, and view their own page. For example, it needs: their latest updates like a Twitter feed, friend requests, friend's activity notifications, their data displayed in a chart, an avatar, likes, star ratings, badges etc.
And this data needs to be formatted for display to people browsing the site to generate a community buzz.
So it's mostly a case of design and development at the moment.
Apple Touch icon for websites - Stack Overflow
Add Web Site Bookmarks to Your iPhone's Homescreen