Styling for the iPhone (and Other Portable Devices)
Testing and Emulation
Unless you’re lucky enough to have your own handheld-internet-enabled-kitten-loving device then here’s a brief rundown of three options which came top of the Google search for ‘iPhone simulators’.
Quick n’ cheerful, TestiPhone.com will give a good rough approximation of an iPhone ‘though does have drawbacks amongst which: “Flash, Java and a slew of other plugins that work in PC based browsers” will work for this simulator but won’t for the iPhone. This leaves one making their best educated guess which, although no the end of the world, is mildly annoying. Like getting a piece of popcorn stuck in your teeth.
Another offering comes in the form of Genuitec’s MobiOne. It supports multi touch with the iPhone and also simulates the Palm Pre. The downsides include it’s Windows only credentials and is still in development stage therefore no zooming.
Probably the most useful would be Apple’s iPhone Dev Center ‘though it’s a hefty 2.7gig download and you need to have a Mac. Having downloaded and obtaining a Mac I then found I’ve not sufficient privileges to update to the latest version of Leopard. Good old office working.
Styling for your mobile device
Three main tips to keep in mind:
- Every pixel’s precious. Resize the viewport to the width of your site:
<meta name="viewport" content="width=960, initial-scale=0.3, minimum-scale=0.3" />
- Text gets bigger when zoomed. Resize (or stop a resize of) your text accordingly using
-webkit-text-size-adjust: none;however it’s better to try and up-size your text to limit users having to zoom. Of course it depends on your project so this is just a basic guideline.
- Specify your mobile stylesheet.
<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />. Test in MobiOne by using max-width.
- Faviconify. Create a 57*57px icon (eg. iPhoneIcon.png) & add this:
<link rel="apple-touch-icon" href="/iPhoneIcon.png" />to your
<head>. Apparently the iPhone takes care of the ‘gloss’. I personally have no idea.
Which is about it if you’re only covering your bases. Obviously it helps to add things to your mobile-only CSS (eg. hide take out flash/java/etc.) rather than just linking to a blank stylesheet but I’m sure you get the idea.
Sources & Further Reading:
- A List Apart: Put Your Content in My Pocket
- A List Apart: Put Your Content in My Pocket II
- Building iPhone Apps (O’Reilly): Chapter 2
- Boutell: How do I design web pages for the iPhone?’ FAQ
- Pixel Spread: iPhone Favicons
- Apple: Designing Content
- Evotech: Web Development for the iPhone
- Apple: Safari Suppoted CSS