Reach out and touch your web space: site design and the iPhone

In my last post in this series on content development for new generation mobile devices (well, more specifically, the iPhone or iPod touch), I sketched out a profile of an iUser based on my own personal experience. In this post I’d like to start thinking through what this means for you and your current website design.

iDesign tips

While I personally am immensely proud to have been part of the team who built the National Library website, I am sorry to report that my iPhone (which could also be an iPod touch) does not like it.


This one on the other hand (;-)), from the team who brought you Papers Past, is not too bad:


Why is this? Partly it’s because my iPhone and I appreciate modular design – the kind of pages like iGoogle that could just as easily be built out of widgets. We like patchworks (or newspaper-type designs) with clear scrolling lines not brick walls. We don’t like flash, nor heavy graphics - but more of that in an upcoming post detailing what technologies the iPhone does and does not support.

Primarily my iPhone and I appreciate sites that follow the principles of good web design, but with an additional edge. They can be touched, moved, chunked, panned and zoomed, not just pointed at, clicked, and scrolled.

So what else makes a website iPhone (or iPod touch) friendly?

Clear lines of site

• Alignment of page elements: I can easily move vertically and horizontally along the edges of patches or modules – hard to do when information is structured like a brick wall or, worse, is all over the place with centred headings and what not.

• Clear-cut elements. Behind the scenes, when I double tap, Safari on iPhone looks for the closest block to the element I have tapped (such as the DIV), zooms it to fit my magnifying glass and centres it. The little snippets of newspapers from the Papers Past site expand perfectly – though so far I haven’t had much need to find out what time the movies are on in 1914. (note, there is no scroll bar on a real iPhone as in this demo graphic).
  

• Related information and links are clearly grouped – a basic principle of information design, but here the grouping relies more on sound architecture than graphics.

• Next buttons and other navigational elements are not aligned to the right if the dominant scroll direction is vertical and content is left aligned (this is where Papers Past falls down) – and they are consistent. In fact most of the content is left aligned within the patch.

Bi-directional viewing

Works in portrait and landscape view (when I tilt my iPhone 45 degrees, it automatically reorientates your page to the way I am holding it).

Short URIs

Short URI for an entry point, such as http://i.eb.com/. What could be simpler to touch type in (if I have to)?

Essential graphics only

Graphics are optimised as communication devices for a small screen, if there at all. Typically this means they will err on the side of less detail rather than more.

Good to touch

• Touchable content (which means it is probably crawlable by Google bots too) and clear indication of what I’m getting when I do touch (no ‘Click here’s’ - I ain’t clicking. Hopefully we can avoid a ‘tap here’ movement too).

• Good margins around each ‘patch’ of information and the overall page: I can get my thumbs and fingers in there without accidentally clicking off somewhere unexpected.

• Links have good amounts of white space around them so my clunky fingers don’t hit two at once. Again, the search results for Papers Past are a great example of how to use white space. The results for Te Ao Hou, on the other hand, are not.

• Tabs are just made for my fingers. Yes, my fingers! Similarly, rectangular chunks of content are perfect for side viewing. Buttons are also big and clearly invitations to touch (or click, if that is your device of choice).

Interestingly, and I have to say rightly, the Mobile Web Best Practices 1.0 identify navigational and other elements at the top or side of the page as extraneous material (e.g. Menu Bars, Breadcrumb Trails).

When I am out and about with my iPhone, I’m definitely not browsing – not your site, anyway. If I land on your site and the first thing I get is a giant graphic, I’m lost until I scroll down to what I am really looking for: your information.

That aside, most of these points will not be new to you if you practice good web design. There are ways of expressing these things far more technical than mine – and I’ll point to a few of these in upcoming posts.

For now, I’m concentrating on what the iPhone user experiences when they are using your current website, not one that has been optimised specifically for this device. Next time: writing for the iUser (who is really just your average information consumer).

So, out of interest, how do you think your website stacks up?