Designing for the Apple iPad

With the growth of Apple’s iOS platform on the iPod Touch, iPhone and iPad, as well as the reluctance of Apple CEO Steve Jobs to allow Flash to be run on them, Apple is making a concerted effort to take on the might of Adobe and push the new HTML 5 web standards to the forefront of web technology.  HTML 5 is the next major revision of the HTML web standard that is being developed to replace HTML 4 and XHTML. This new standard will allow video playback and drag and drop without the need for browser plugins like Flash and Silverlight.

In future, not only will designers have to start using HTML5 in place of flash videos, but will also have to consider changing the way they design web pages to fit the iPad. The iPad has a high-resolution, 9.7-inch LED-touch-sensitive screen with a resolution of 1024×768 pixels, which is able to zoom with the squeeze of two fingers and allows for both horizontal and vertical style viewing.

This poses some interesting problems for web designers because the size of the site changes when the orientation of the iPad changes and could lead to the need to design two completely different layouts. Unlike present websites which are designed primarily for widescreen landscape format, the iPad brings an A4 magazine style format of portrait viewing.  In short, you can read the entire page in one go.

When designing web pages for the iPad, it’s advisable to stick on a 960 pixel wide design so that it fits into the vast majority of screen sizes and will work perfectly with the iPad. Future designs will need smart and fluid width layouts that can easily work both ways, adapting the content according to the screen resolution, so that you can view it either in landscape or in the portrait mode. Using a smart combination of CSS and Javascript, the user experience can improve drastically. As for the navigation, it’s better to reduce it to a left side bar in landscape mode and and pop it over in 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.

As the iPad is a touch screen device, users will be using fingers instead of a mouse pointer to interact with the page elements. The mouse pointer is more precise when hovering over and clicking on menu items and buttons.  In comparison, the human fingertip is a lot larger and could also obscure the visibility of elements when touched.  As a result, when designing for the iPad, not only will clickable links and buttons needed be designed bigger and clearer but there will also need to be more space between elements so that large fingers don’t end up clicking the wrong button or link.