I’ve been designing for websites for 12 years now, and designing for print for even longer. For the last few months, I led the design of website with an incredibly talented group of people, and it was unlike any other experience I’ve had as a designer. Here are a few things I learned.
It’s intimate.
The iPad is an intimate experience for a user. The direct touch input removes a layer of abstraction, and that’s a really big deal. In this way, it was like going back to design for print – when you push it with your finger, it moves! – but it’s utterly unlike print in every other way imaginable. Point is, the direct interface really does mean reevaluating every assumption when it comes to interactive design.
Landscape and Portrait Mode Styling
The iPad allows for both horizontal and vertical style viewing. This will pose some interesting possibilities for web designers to incorporate features that wouldn’t have worked before. The point is that the styling has completely changed when the orientation changes, and for the designers this means two completely different layouts for which to design.
The fact is that the iPad marks the return to magazine formats introducing the web’s first truly vertical screen orientation. While computer monitors have always had a landscape styling, now we can see a lot of web content consumption in a vertical mode which will result in new web designs and web information architecture.
Since the portrait mode encourages vertical scanning and the user can now see the entire page without having to scroll, web pages will no longer be viewed one half at a time and the designers can finally design pages that are meant to be scanned and read all at one time. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its own way makes it very easy to browse sites that display content horizontally. It’s for this specific reason that more of an emphasis is placed on smart and fluid layouts that can easily work both ways adapting the content according to the screen resolution.
Design for 960 Pixels Layout
Any website with a width larger than the iPad screen resolution will be scaled down and zoomable. If your site is narrower than the iPad screen orientations, that could cause unnecessary margins. In this case you’ll need to adjust the viewport settings. Your content should be scaled so that the number of visible pixels matches the screen width. You can also set the width to a specific number to fit content designed for that exact size.
While designing web pages for the iPad, it’s advisable to use the 960 grid system. This most widely used width has become extremely popular due to its ability to fit a large number of modern screen resolutions. If your website is designed to be around 960 pixels wide, it will then show up full scale on the iPad. In general, make your web page work seamlessly in landscape and portrait mode. Note that Safari (the browser that the iPad runs) always calculates device width based on the portrait orientation. If you rotate to landscape mode, the content is not reflowed, but scaled up to fit the wider screen.
Text-Background Relation
The point is that the iPad has high pitched light contrast. Black text on white background is more difficult to scan on the iPad than on a regular screen. The way to get around hard contrast noise is using delicate text-to-background combinations. This means you can deploy like a sepia background with a dark umbra font, or a light font on dark background, etc. This will work quite well to reduce sharpness. Additionally note that designing long text passages for good readability is a tough matter; you better have carefully arranged and simplified content model.
A Better Minimalism for the iPad
Accessible functionality of the iPad could inspire graphic designers to simplify their websites and make them easier to navigate. This suggests creating limited information architecture with linear form use. As for the navigation, it’s better to reduce it to a left side bar in landscape mode and pop it over into portrait mode. Don’t overfill the space since a structurally organized and clean look will enable the users to more easily process the content on the website.
About iPad Multi-Touch Interface
It is important to understand that the iPad is not navigated using a mouse. Its highly precise and responsive touch screen interface is controlled with human fingers which are a lot larger than a typical mouse pointer, plus they may obscure the visibility of the elements. What this means is that there will be less of the traditional hyperlinks, concealed in a text, and bigger, bold and touchable buttons which now have to be accommodated to the size of a fingertip. It requires more space between interactive elements as well. In short, the touch experience with the potential for a richer, more textured interaction will cause traditional navigation bars to give place to contextual and highly visible menus. Key action items and areas will likely gravitate to the middle of the screen.
It is also important to note when designing a website for iPad that the use of hover effects creates a usability problem. Those favorable effects for pointer-based devices will be a hurdle in user experience on the iPad, so keep in mind the tactile nature of the iPad interface.
