Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.
Quick overview of the Guidelines…
The guidelines are split into several sections:
- Understand User-iPhone Interaction
- Use Standards and Tried-and-True Design Practices
- Integrate with Phone, Mail, and Maps
- Optimize for Page Readability
- Ensure a Great Audio and Video Experience
- Know What Safari Supports on iPhone
- Connect With Web Developers
Understand User-iPhone Interaction
This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.
Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.
Use Standards and Tried-and-True Design Practices
This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.
It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.
Apple published Guidelines for developing web content for the iPhone over at http://developer.apple.com/iphone/. It’s good to see a focus on standards based development being encouraged there, it makes sense given that the Safari browser on the iPhone has great support for XHTML and CSS, particularly CSS 3 properties – of which the iPhone makes particular use of, more of that in a moment.
Quick overview of the Guidelines…
The guidelines are split into several sections:
- Understand User-iPhone Interaction
- Use Standards and Tried-and-True Design Practices
- Integrate with Phone, Mail, and Maps
- Optimize for Page Readability
- Ensure a Great Audio and Video Experience
- Know What Safari Supports on iPhone
- Connect With Web Developers
Understand User-iPhone Interaction
This section introduces you to the whole concept of interacting with the iPhone, mainly that the input device is not a mouse but your hand so it’s not as precise as a mouse so web interfaces for the iPhone need larger click targets to interact with. As has been pointed out on various blogs there is no copy and paste, but there is also no drag and drop or text selection either so this is another factor to keep in mind.
Safari on iPhone doesn’t have windows that can be moved around or have scroll bars like a conventional browser, content is resized intelligently to fit the viewing area, it is recommended to avoid wide blocks of text. Double-tapping is used to zoom in to content.
Use Standards and Tried-and-True Design Practices
This section really reinforces the use of web standards for designing pages for the iPhone. Makes the point that Safari on iPhone uses a ‘real’ browser in that it doesn’t use stylesheets targeted towards handheld devices, it’s intended to give a rich browsing experience by supporting HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3.xx, JavaScript 1.4, DOM support, AJAX, XMLHTTPRequest.
It encourages the use of separate HTML, CSS and Javascript as well as using valid HTML, and also optimised images and script content to keep sites running smoothly.
Integrate with Phone, Mail, and Maps
This section starts to get to more of the iPhone specific code examples that hook into the dedicated apps on the iPhone. You can click on Telephone numbers in Safari and the number will be automatically dialled, Safari will automatically convert numbers that look like phone numbers into telephone links. However you can format a telephone link on purpose:
<a href="tel:1-408-555-5555">1-408-555-5555</a>
Email links are in the standard format and open up Mail in order to send an email., links to Google maps take the standard link format also but these are opened up into the dedicated Google Maps application on the phone. I believe that links to YouTube movies do something similar but there is no mention of this in this section.
Optimize for Page Readability
This section gets more interesting and links back to my initial mention of CSS 3 properties. If you want to provide a particular window size for a page to be viewed on the iPhone you can set an iPhone specific stylesheet by using a CSS 3 media query like so:
<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />
There are more guidelines for laying content out for the iPhone viewport such as a recommended width of 320px so that the layout doesn’t change between portrait and landscape modes. It also details some webkit specific CSS properties to help control text sizing. Image formats supported are JPG, PNG, GIF and TIFF.
Ensure a Great Audio and Video Experience
Formats and bitrate advice is provided here to help optimise video for WIFI and EDGE network capacities. Maximum video dimensions of 480 x 360px are recommended. Formats supported are H.264, MPEG-4, AAC-LC, .mov, .mp4, .m4v, .3gp file format, video or audio that can play on an iPod.
There is advice for the server side of providing audio and video for use on the iPhone too, interestingly the RTSP protocol is not supported but apparently only video via HTTP streaming.
Know What Safari Supports on iPhone
This set of guidelines covers the resource capacity of Safari on the iPhone. Downloaded resources such as CSS, HTML, Javascript, images or other non-streamed media must be less than 10Mb. Javascript execution is limited to 5 seconds before it times out, this will really mean people having to review their use of the various javascript libraries available and make sure that only the bare essentials are present. Interesting to see how Adobe’s Spry library stands up on the iPhone.
Other information covers support for files including the various mime types, PDF is supported but not (as has been widely covered on various blogs!) Flash or Java. I think various browser testing scripts for detecting Flash will need to be updated to factor in the iPhone’s lack of flash support. I wonder how long it will be before we see Flash on the iPhone? It surely must be coming, seems like a missing piece of a puzzle to me? It also covers the Security support of Safari such as SSL and RSA.
Connect With Web Developers
It ends with some useful web development links including W3C, WHAT-WG and Web Kit project site.
There’s a real push throughout about the fact that web standards and associated best practices are an integral part of creating successful sites that work well on the iPhone safari browser.
When I’ve got a moment I’ll try out a the iPhone specific code, especially now that my friend Alyn seems to have successfully gotten his iPhone activated, more about that on his blog I’m sure.
~Rick