WS - How to Design a Website For the iPhone

While most of us working in technology companies are aware of the mobile Internet tsunami, many businesses have yet to embrace the technology by publishing a mobile version of their own website.

Here's how to design a website for the Apple iPhone.

1. Planning

Get out the scrapbook or a new Google Doc and jot down why you are building a mobile app, who is it for and what you want the app to do.

2. Content Creation

Then jot which pages are needed and flesh out the content by copying the text from your main website into the Google Doc. To start, consider the following pages:

• Mobile Home
• Products
• Services
• Blog Feed
• Podcast Feed
• About Us
• Contact Us

3. Setting Up the Subdomain

The standard convention for mobile sites is having a subdomain called "m", which is short for mobile. Ask your server administrator to do this for you. I accomplished this in less than three clicks in Plesk.

4. Wireframing

There are plenty of web kits out there such as iWebKit that will provide the basic framework, requiring you to merely edit the HTML by replacing the dummy text with your own company information.

5. Adding Functionality

Now that you've got a barebones mobile website up, you can explore other functionality like having a click-to-dial feature by using the tel: hyperlink (works on mobile browsers, but not standard web browsers). Additionally you can integrate with Google Maps making it easy for prospective clients to find your office.

6. Alpha Testing

After creating the basic structure and adding the content, publish your pages to the web using any FTP program. I found loading "http://m.yourdomain.com" in Apple's Safari a good way to test the mobile app rather than waiting for the pages to reload on my iPhone. Once you're happy with how it looks in the desktop browser, boot up the iPhone, iPod Touch or BlackBerry and see how it looks on those devices.

7. Beta Testing

When you're confident all the pages load and there are no broken links, ask a few of your friends or colleagues to view the site on their smartphones. If your friends are willing, have them answer a few questions such as:

- What device and network did you access the mobile website on?
- Did the mobile website load? Was it slow or fast?
- What was your first impression?
- Did we articulate the purpose of the mobile site clearly?
- Did you find any broken links or elements that were confusing?
- What features would you like in a future version of the mobile website?

8. Answer Your Beta Testers

If you've had the privilege of having other people take time out of their day to provide you with feedback, be sure reply to each of their comments, suggestions and recommendations with class. This is valuable feedback and should be acknowledged as such.

9. Mobile Sitemap

For the mobile version of Voices.com, I've created both a simply HTML sitemap located in the footer of the site, but also a mobile XML sitemap which was then submitted directly to Google using Google Webmaster Tools. Doing this will help Google, as well as other search engines, discover your mobile website a lot faster, and be aware of changes in site structure, updates to content or the addition of new pages.

10. Going Live

When you're ready, announce your mobile website on your blog, podcast, Facebook Fan page and as a Twitter status update. Take your publicity efforts one step further by writing and distributing a press release.

Final Remarks

The marketing of your mobile website is definitely an ongoing effort, but now you can move forward in this fast-changing technological landscape with the confidence of having a mobile website and remaining relevant to your most advance customers - and you accomplished all of this in just ten steps.