The Architxt's Journal


RSS | Atom

the Architxt's Journal

16 Jun '10 | New Media Thoughts

Designing iPad-ready websites

A few tips for web designers wanting their layouts to fit an iPad too.

Back in 2008 I re-launched Tablet PC Italia, my Italian-language website dedicated to Tablet PCs, making sure that it would work for users reading my articles in slate mode.

It was an interesting project and at times a bit tricky (as I’m no CSS god) but I did manage to achieve the 3 goals I set myself:

  1. A layout that would work in both landscape and portrait mode
  2. Give left-handed users option to switch the navigation menu from right to left
  3. Design navigation so that things could be easily clickable using a stylus

Now, this was the era when tablet computing was predominantly pen based and touching a computer screen limited to the particularly perverted.

For my next iteration of the design (which should happen before the end of the year) I will have to cater for both styluses and much larger finger tips.

Is Tablet PC Italia an iPad-ready website?

So far it hasn’t been included in Apple’s list of iPad ready websites, so obviously Steve Jobs doesn’t think so.

But my own testing tells a different story:

Tablet PC Italia on an iPad

The iPad’s resolution is 1024 × 768 pixels on a 9.7-inch screen. This also means that the maximum width in portrait mode is 768, which will not even fit those websites designed back in 2005 for 800 pixel widths.

But this is a non issue. All you need to do is to rotate the iPad in landscape mode and your problem is solved.

However, offering the option to view a site in the two orientations is not a bad thing. One advantage portrait has over landscape, and this is my own personal observation and preference, is that the tablet device is lighter to hold. Something to do with physics, I think. And there must be a reason why most mags are printed in this orientation…

Tips for designing for iPads

First of all you need to do what Apple say: support the latest web standards. What this really means is… don’t use Flash. Apple sure don’t like it. Now that I think of it, this must be one of the reasons why Tablet PC Italia will never be included in the aforementioned list. I’ve embedded far too many Google videos in it.

Think about using a liquid (or is it elastic?) layout that presents content neatly when stretched and pushed together. I ended up setting both a min and max width on my site after spending hours figuring out sizes of elements so that articles would still be neat and readable when squashed together.

Don’t forget that you will need to make navigational elements big enough for fingers of different sizes. Have that giant Chinese basketball player test your interface if you can. Position your navigation elements so that clicking things is not a) awkward and b) obstructs the user’s view.

Keep navigation simple so that the user doesn’t have to prod on the screen 100 times to find something. You wouldn’t want to have too many greasy fingerprint marks on your iPad’s screen. I predict that the state of one’s tablet device’s screen will become a more significant indicator of a person’s cleanliness than their hair, clothes, fingernails, etc…

Safari supports gestures and swipes too so think about how users can make the most of these. Perhaps they should be flicking through your pages rather than clicking links?

You can’t use a stylus on an iPad but you have the option to use a sausage instead. Will your interface work in Germany?

Can’t think of anything else at the moment but one I’ll start work on the re-design on my Tablet PC site I should have more tips to share. I hope to have an iPad to test the site with too, but I don’t think I can make a strong enough case to my CFO (wife) for one. Sigh.