Optimizing HTML web sites for iPad

We did some work recently to determine what it would take to optimize the current site for iPads. Currently iPads are redirected to the mobile version of the site. All that real estate to waste.
Links/articles I found to be useful which might kick start your development into iPad-optimized web sites:

Device detection via CSS: iPad specific styles through CSS: The most useful bit was around recognizing the iPad via the CSS media attribute:

Safari Reference Libray: Straight from the horse’s mouth: Style your web app for iPhone OS. For audio and video, use HTML5.
Safari Reference Library.

On usability: Jakob Nielson not  a fan of the iPad – he likens it to stepping back 15 years or so in web history. An interesting read around the challenges of iPad usability and navigation confusion:
(Don’t miss the 93-page PDF document at the end of the article – well worth the read!)
http://www.useit.com/alertbox/ipad.html.

Other things: The notion of portrait vs. landscape styling – nothing new here (iPhone), but a lot more work to do for two orientations.

After my first couple of hours with optimization for iPad, traditional web sites just don’t seem to suit the iPad. Although the site mostly worked (there was a list of CSS optimizations needed), the design seemed misplaced on the iPad. A lot of the issues are well described in Jakob Neilson’s article above. Its a different paradigm for navigation and interaction. For one thing, context changes are less obvious. Remove the ability to click, to hover, and interaction patterns change. We’ve seen and are probably quite used to these behavioural changes on the iPhone.

My expectations for web browsing on the iPhone are quite low. But my expectations for the iPad are somewhat different. Its resolution is acceptable – 1024 x 768. I can interact with (most) web pages with a lot less snot-like pinching of my fingers. I expect clarity in choice, in navigation, and hopefully in productivity, but its still a bit puzzling. I don’t think this is a failure in the device, but more the idea of trying to use web sites (and iPad apps) based on traditional web design. I’m not a designer – I develop software. My designs are functional – like a plain cheese sandwich, you’ll want some mustard.

So, even my brief time with iPad optimizations, the biggest challenge isn’t technical. Web designers – think differently! The key is not to design iPad apps/iPad-optimized sites in the same paradigm. Use an iPad for a while. Revisit the website you’re looking to optimize for iPad, and hopefully the challenges (and some solutions) will become clear.