Nav & Search

Designing an iPad Optimized Website

Web Development

I’ve previously written about some of the technical possibilities we have to tailor a website to an iPad (part one and part two), this time I’m going to give some directions on how to design page layout and interactions for iPads and other tablets based on my experience surfing the web, using apps and reading PDF magazines for the last year. I’m using my iPad at least 1.5 hours every day (my commute is around 45 mins using public transportation) so I’ve racked up a number of hours and have had the time to reflect on my usage patterns and the design and interaction choices I believe work and which can use some improvement.

One of the defining differences between apps and websites is that an app works in a single screen with fixed control and information areas and scrolling content areas. A website is a scrolling document made up of distinct pages so unless we want to create a iPad optimized web app instead of a website we should stay away from fixing the header, navigation and similar elements to the screen and dynamically loading new content and instead focus on creating a snappy scrolling page-based website that uses the available screen space in an efficient way.

Text and Control Element Size

Event though the pixel density on the iPad is much higher than a normal computer screen which provides greater clarity for text it doesn’t compensate the size reduction on a website compressed to fit the 9.7″ screen. For a website designed for a maximum width of 980 pixels the difference is around 29% (132 pixels per inch for the iPad versus 94 for a 24″ 1920×1200 monitor) which equals going from ten to seven pixel characters, and that’s just too small to read comfortably. A good baseline for the text size is 12-13 pixels.

In iOS the smallest icons and bars containing buttons are 29×29 pixels, most are larger than that, and that’s for a reason. Our fingers have a certain imprint when tapping the screen and a user has to be able to easily target the desired element. Of equal importance to the area is the separation between buttons, links and similar. Large adjacent buttons might get by without any spacing at all but smaller elements need a certain margin to avoid missclicks and spillover.

Don’t Clutter the Screen

Since the screen of most tablets are small, often less than 10″ in diameter, and the pixel density is high it’s easy to be tempted to cram too much information, links and controls onto the screen to give direct access to everything to the visitor. This might seem like a good way of using the available resources in an efficient way. In reality it just makes everything confusing and hard to find.

The problem is the same as trying to get too many things stand out on a page, the result is that none will. The easiest way is just to keep everything large and clear, use sufficient whitespace to separate areas and streamline navigation and other secondary content. Think about the purpose for the particular page and focus on that, let everything else come second even if it limits the available options for continuing to other sections on the site for the visitor.

Fill the Content Area with Content

The iPads form factor is actually a bit awkward for text, it’s too wide both in landscape and in portrait mode which means that text lines spanning the entire width gets too long when using a normal body copy font size. The obvious solution is to limit the width of the main content area by using thick margins, which Apple does in the iBooks application for example, but that does leave some unused screen real estate. It might be tempting to use this vertical space for a side- or navigation bar but this space is usually too narrow and will make the page look cramped instead.

Since the content is usually the primary goal for a visitor to a page it should be prominent and high in the document, few things are more irritating than having to start the interaction by scrolling to see a sizeable portion of the content to evaluate if it’s interesting enough to invest in reading. This means that the top header and navigation should be minimized in height and other navigational elements and sidebars should be placed below the content. This shifts the focus to providing value for the visitor (the content) first and then provide options for finding other content on the site.

Adapt to the Screen Orientation

It’s very easy to flip a tablet, and by flipping it a totally new page layout is created. The theory is still the same though; focus on the content but now we have additional horizontal screen real estate to include sidebars and navigation. That’s the positive part, the negative is that vertical screen real estate is even more precious. Find the new possibilities as well as limitations and adapt.

Do you want to read more posts like this? I now blog about Web Development at cleanwebdevelopment.com.


Leave a comment

Your email will not be published.

*