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.
Where is the iPhone Simulator application installed?
As important as the iPhone Simulator is, the actual application is surprisingly hard to track down.
The application is tucked away many folders deep in the newly installer Developer directory:
Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator
Launch the iPhone Simulator app and wait for it to load. 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:
Source: This tip originally inspired by release of the first iPhone SDK. We’ve updated the tip and the links in preparation for a new course on Learning to Build iPhone Web Apps.
