« The Magic Right-Indent Tab. | Main | Proofreading Marks Cheat Sheet. »

Test Your Website on Apple's iPhone Simulator.

iPhoneSimulator.jpg

If you are a web designer, your clients may soon start worrying how their websites work on an iPhone. That's because after only eight months, iPhones now account for a remarkable 71% of all US Mobile Browser web traffic.

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.

Download Apple's Free iPhone SDK

Note: You'll have to register for a free developer account and agree to Apple's terms. Read on and we'll show you where the iPhone Simulator application is hidden, and include a few tips on how to test various iPhone features.

Like This Tip? Make sure you don't miss the new tips coming next week:

Weekly Email Tips — or — RSS Feed (What's RSS?)

Where is the iPhone Simulator application installed?

iPhoneSimulator-iconsmall.pngAs prominently as the iPhone Simulator was featured in Apple's iPhone software roadmap presentation, the actual application is surprisingly hard to track down.

The application is not actually named iPhone Simulator — it is named Aspen Simulator. This application is tucked away many folders deep in the newly installer Developer directory:

Developer/Platforms/AspenSimulator.platform/Developer/Applications

Launch the Aspen Simulator app. It takes some time to load, and once it is running you have a genuine iPhone simulator on your Mac. The only applications installed on this simulated iPhone are Photos, Contacts, and Safari. Launch the iPhone Safari web browser and start checking out websites.

How to Use the iPhone Simulator.

Rotate your simulated iPhone: To rotate your iPhone, choose Hardware > Rotate Left, or Hardware > Rotate Right from the menu. iPhone's Safari web browser will automatically rotate the website you are viewing.

Pinch-to-zoom Gestures: You can simulate the iPhones 'pinch to zoom' gesture by holding down the Option key while clicking and dragging with your mouse. This brings up a pair of dots that represent your fingertips.

Double-Tap Gestures: Users can double-tap any part of a webpage to zoom in on that section. Simply double-click in the simulator to replicate this zoom. From testing, the iPhone's zoom feature appears to be impacted by the DIV structure of your web layout. A useful detail to watch for if iPhone users are an important audience.

If you have not played with an iPhone yet, make sure to check out Apple's excellent iPhone Guided Tour videos. Pay particular attention to the web browsing multi-touch gestures about half-way through the tour video:

Apple: iPhone. A guided tour.

Source: This tip inspired by the last hold-out consultant at CreativeTechs who finally switched over to the iPhone this week. For a glimpse at what's ahead for Apple's iPhone, make sure to watch the remarkable March 6th presentation by Steve Jobs and company.

Categories

Recent Tips

Powered by
Movable Type 3.2