Web design for the iPhone

As the number of iPhones sold around the world continues to explode despite “the worst economic recession since World War II,” it’s probably about time that companies, webmasters and web designers take that extra step to design websites specifically for the iPhone and other mobile devices such as the Blackberry and Google’s T-Mobile G1.

Mobile devices outsell PCs

Indeed, in the next few months (if it hasn’t happened already), the number of people accessing the web via mobile devices will outnumber the number of people accessing the web via their laptop or desktop computer. So, if you want your website to look great on a mobile device, the first thing you need to do is look at your website from a mobile device.

Testing your page on an iPhone is easy if you have one. But if you don’t have one, the next best thing is to use Apple’s iPhone simulator. The Mobile Safari browser in the iPhone simulator comes very close to matching the feature set of a real iPhone.

Websites for iPhones

So, does this mean that you have to redesign your entire website for mobile devices?

No.

And, does this mean that I have to design my website either for the iPhone or for the deskop or laptop market?

No.

Your iPhone website and your regular website can coexist. In fact, if you do it right, your website will be able to detect how your web visitors are viewing your web pages and your website should be smart enough to deliver the right user interface for that client.

How to build iPhone friendly design

Building a user interface for the iPhone (or other mobile apps) means that you need to:

  • Build a new CSS (cascading style sheet) for mobile devices
  • Detect when a user visits your site using a mobile device
  • Deliver a streamlined, scaled down version of your web site

Flash chokes iPhones

Certain things need to be adjusted for mobile visitors. For one, as of this writing, the iPhone stumbles on Flash. So, if your website relies on Flash to deliver important visuals or information, you should note that the 100 million iPhone visitors will be blind to this content – as will Google, most search engines and many people with visual or hearing disabilities.

Reduce your content and increase your font size

In addition, since the mobile device is so small, you may want to consider increasing the size of your font. Obviously, you will need to reduce the amount of textual content on the iPhone interface and probably reduce the number of links and options. Since iPhones and Blackberry mobile devices have slower Internet connections than normal desktop or laptop computers, you should also lighten your mobile interface and do everything you can to speed up your load time and make it a thinner web application.

Think about why people visit you via mobile devices

You should also think about why somebody is visiting your site with a mobile device. If you operate a retail business then, most likely, your mobile website visitors will want to get directions to your store – because they are probably on their way to find you right now.

If your company is a bank, for example, your mobile visitors are probably trying to transfer money or check the balance on an account.  Or, in the case of retail, your mobile web visitors are probably on the road trying to find your nearest location.  I

f you are smart, you will build an iPhone application that pinpoints where the web visitor is based on the GPS feature of the iPhone and calculates the route, time and directions to the nearest bank branch location.

So, it is very important that you put yourself into the shoes of your web visitor and deliver to them the most important functionality that they would most likely want to access when they come into your site via a mobile device.

Website designed for a desktop web browser

Website designed for an iPhone (seen from a desktop)

This was designed by my friend Marc Duverneuil who is an iPhone applications developer.  You can see this iPhone interface at his website: www.got-apps.com and you can find Marc on Linkedin at  and on Twitter.  He charges about $500 to create an iPhone interface for your website.

User interface designed for an iPhone as seen on an iPhone

Did you Know 4.0