Does Your Website Look Good on an Apple iPhone or iPad?

Standard
Mobile Friendly Website

Make your website compatible with ipad and iphone

If you are a website designer, you may start to worry how your designs work on iPhones and iPads.  That’s because iPhones now make up an incredible 71% of all Mobile Browser traffic.

Designing sites that fully take advantage of the iPhone web environment will require more than just designing for a small resolution screen.  You must remember that the iPhone automatically resizes, flash is not available, nor are animated .Gif images.

But fear not!

Apple offers a iPhone Software Development kit you can acquire through the $99/year Developer program that includes a fantastic iPhone Simulator you can use to test and preview your websites.

Download Apple’s Free iPhone SDK

WHERE!!!

Even though Apple has featured the simulator in its iPhone software roadmap presentation presentation, the application itself is actually semi-hard to find.  First off, it is not named “iPhone Simulator”.  It is called “Aspen Simulator”, and is tucked away many folders deep in the newly installed 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, orHardware > 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.