The iPhone and Web Design

Mar 27, 2008 by Matt | Posted in Design 3 Comments

Apple’s iPhone and iPod Touch now account for over 70% of US mobile browser traffic. What does this mean for webmasters, and just as importantly, those who design as a business? With the increasing popularity of the iPhone, it’s becoming more important to make sure sites are compatible. Have you been wondering lately whether your site looks and functions fine on Apple’s mobile browser?

For those in the design business, this is a big issue. Do the designs you make work on the iPhone, and how long until your customers start asking if it will be iPhone-compatible?

I’ve been thinking about this for the past few weeks, as well as wondering how my own sites function on the iPhone and iPod Touch.

A few days ago, I discovered a post about Apple’s iPhone Simulator.

Designing websites that take advantage of the iPhone web environment requires more than simply designing for a smaller screen size. The iPhone automatically scales websites when needed. iPhone readers use multi-touch gestures to zoom or move around the page. Flash isn’t supported, and neither are larger animated GIFs (a surprise to me).

Tucked away in Apple’s free iPhone Software Development Kit is a terrific iPhone Simulator you can use to test and preview your websites. In the full version of this tip we’ll show you where that iPhone Simulator application is hidden, and include a few tips on how to test various iPhone features.

The Simulator allows you to see how the page will be rendered on the iPhone/Touch platform, and try-out Pinch and Double-Tap functionality. Basically, it’s the entire iPhone browser on your desktop.

The catch? The Simulator only works on the Mac OS. What about those of us who don’t have Macs (yet)? So, great, you don’t need to buy an iPod Touch to test sites…as long as you have a Mac. Otherwise, you’ll be stuck spending $300. I think a lot of us, especially professional designers, will need to do this in the future, as the iPhone gains market share. If Apple really wants to increase the number of iPhone Web Apps, and sites fully compatible with the device, they should probably release a Windows version of the Simulator.

  • g-bot

    I think, given that your article opens with the market conditions, that you’ll have to buy a Mac or iPod before Apple has to develop a simulator for Windows.

    It would be nice of them to make a Windows simulator for the iPhone/iPod. But there is no significant incentive for them to do so. Windows never made an IE5 or IE6 simulator for the Mac for much the same reason.

    On the upside, you finally have a great reason to get that iPod you’ve been wanting. And besides, once you have one you’ll be able to make better apps for it because the simulator doesn’t give you the haptic experience of using an iPod/iPhone.

  • http://www.webmaster-source.com Matt

    I would like to get a Mac in the near future anyway. :D

    I think there is incentive for them to make a simulator for the Mac. It would help the iPhone platform grow better. There’s no way they would port their entire SDK though, since it’s very dependent on the Mac OS’s core features (that’s core with and without a capital “c”).

    You’re half right about Microsoft not making a “IE5 or IE6 simulator for the Mac.” There wasn’t any real incentive for them to do so, because they already had a huge market share. But don’t forget that there was a version of IE5 for the Mac…before Microsoft decided to pull it.

  • http://johnkendrick.wordpress.com John B. Kendrick

    If you want to see how some great webapps look on an iphone, check out my blog post at http://johnkendrick.wordpress......he-iphone  I’ve detailed many of the apps I use everyday there, as well as other recent posts at http://johnkendrick.wordpress.com