Web Design for iPad – WTF or FTW?

The iPad. The killer word coming off everyone's lips lately... This is the newest mobile computing device (a.k.a. Apple Tablet) that claims to revolutionize how we consume web content. We must admit that this tablet has huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.

What do they need to do when designing pages to perform on this interesting Apple invention? For general design principles, we've rounded up a few options below that will give a little guidance. Now's the time to keep your eyes open for the iPad-optimized design tips:

Specific Features of iPad Display

iPad has the high-resolution, 9.7-inch (screen resolution of 1024x768 pixels) LED-backlit IPS touch-sensitive screen which is remarkably vivid for web browsing, media consumption, gaming etc. Its tactile and luscious interface invites amazing close-ups putting the objects almost literally in the hands of the gadget user.

• 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.

iPad doesn't Support Flash and Java Content

The iPad runs Safari browser which doesn't support plug-ins to be installed on this particular device. This important point is that it might be a good thing to find other alternatives to use instead of the mentioned technologies. CSS3 and HTML5 will continue to rule over the page layout and will become widely used for iPad development. This is the perfect chance to try out all those new techniques while such web standards can do almost all of the desirable things that Flash performs. HTML5 has the video and audio element, and animation via CSS animations can provide all necessary multimedia embedding options.

* * *

It's simply amazing how rapidly Apple's tablet has impacted the web design sphere. It adds loads of new twists to the complex and evolving design tasks for graphic developers. To finish this off, we wanted to let you know of the iPad Peek tool that will let you see how any website will be rendered on the iPad - too bad it doesn't allow you to see the website you want in a portrait mode. If you know other tools that emulate the iPad browsing experience, or have any other suggestions on how to efficiently design websites for the iPad - please be sure to let us know with your comments!

We have recently published an article exploring the most conspicuous mobile web design trends for 2011. You might be interested in having a look at them and find some graphic approaches to consider for your custom mobile designs.