Apple is currently soaring on the sales success of the iPad, and the consumer technology giant has smashed Wall Street expectations after profits surged on strong demand for new products – including the iPad.
The company, which sold almost as many of its new iPad tablets as Mac computers, said revenues jumped 61 per cent to $15.7 billion (£10.3bn) in its second quarter. Profits rose 78 per cent to $3.25bn. So far, it has sold about 3.3 million iPads during its first three months on the market.
While it remains to be seen if the iPad’s initial success can be maintained, it is possible that this nifty device has the potential to be a game changer in computing, and the way in which we browse and design for the web.
The launch of the iPad can be seen as a significant step towards the advancement of consumer computing, locking away the complexities of a powerful operating system beneath a streamlined, polished user interface. Although the iPad is a fully portable device, it’s totally different from a laptop, and boasts a large touch screen and 10 hour battery life. This makes it the ultimate tool for enjoying the web. So, with the iPad being different from everything that has come before, how should you approach designing for it?
Should conventional design for desktops apply? Or should designers draw on insight provided by mobile projects? We predict that from the launch of the iPad will emerge a new design hybrid, one which combines aspects of desktop and mobile design.
However, whether the iPad is able to change the world or not, is not the issue of this article. The fact of the matter is that the iPad is here and that, with 3.3 million of them already sold, we must design for the web whilst keeping it in mind. So, what do we need to consider?
Bright screen
The iPad is so bright that long term use can fatigue users. Therefore designers should consider colour contrast. Perhaps use light greys instead of white and dark greys instead of full on black. The backlit iPad screen is not ideal for long term textual consumption, so do your users a favour and mix up photos and video to make for a less strenuous experience.
Pixel density
The device’s pixel density, combined with screen dimensions that lie somewhere between a desktop and mobile phone, mean that neither downscaling desktop sites nor upscaling mobile sites is ideal.
Links and Hover Effects
Most important is the fact that the iPad is a large touch screen device. This is a fundamental long term difference and a move from mouse to finger. Just think, there are a number of complexities in rendering an interface that defines hover and mouse in/mouse out features on a device that has no pointing mechanism!
As the primary method of user interaction with the iPad are the fingers, all those hover effects that were favourable for pointer-based devices will be a hurdle in user experience on the iPad. As, when using a finger and touching the screen, you loose the hover state.
Also the links can no longer be concealed in a text and left for the user to dexterously click upon. Therefore you might want to resize the links so that the user experience does not suffer. Also consider the concept of mousing (and Fitts’ Law). Will users be as accurate with their finger as a mouse cursor?
The Fold
The iPad changes the nature of the fold. The ability to change orientation makes the fold exist twice – and in two different places. Hopefully, this will stop people worrying about whether users will scroll because, if there ever was a device that makes people want to scroll, the iPad is it.
Device orientation and fluid width design
As some iPad apps lack consistency between modes (sometimes only some features are available in landscape mode) it would not be advisable to have different designs for different orientations. Two designs may also confuse users when they switch modes. It’s also worth thinking about how a user might hold the device and the fingers they may use to navigate a site.
As the iPad has no right way of viewing websites, you can view pages either in landscape or in the portrait mode. But for the designer that means two completely different layouts for which to design. It is for this specific reason that the iPad highlights the need for smart fluid width design. Using a smart combination of CSS and Javascript the User Experience can be made to improve drastically.
HTML5
Every new Apple mobile device and every new Mac (along with the latest version of Apple’s Safari web browser) supports web standards including HTML5, CSS3, and JavaScript. The iPads strong support for web standards may also benefit designers in another way, especially with the release of the OS4. Apple’s iAd platform is based around HTML5, which offers opportunities to anyone well versed in the technology. Revealed by Jobs last April, iAd aims to provide media rich in-app mobile advertising that (according to Apple) will provide the emotion of TV with the interactivity of the web. With Google openly adopting HTML5 for Youtube, it is only a beginning of the things to come with HTML5.
Additional benefits
Although unconventional in interface terms, the iPad is a good citizen when it comes to webs standards. Safari for iPad is one of the most advanced, standard compliant browsers around. Also, WebKit (an open source web browser engine and also the name of the Mac OS X system framework version of the engine that’s used by Safari) is the only browser engine. WebKit is appealing to designers because they know exactly what they are designing for and don’t have to worry about how a design may appear on a range of different browsers. This allows for more focus when creating an iPad specific site.
Two sides of the argument
Designers are not united regarding optimisation for the iPad. Some say that there is no need unless iPad users are your core audience. However, if you can make something look good on the iPad, it is likely that it will look good on a desktop too.
Others say that designing specifically for the iPad will mean that users are not left in the lap of the Gods. Removing the need to zoom to read text, or ensuring that text links are large enough to be easily ‘clicked’ by a finger will remove a barrier between the users and your content. You don’t want uses to have to constantly adjust viewing behaviour because your content does not arrive formatted for easy consumption.
Nevertheless, it would be bad practice to develop a website specifically for the iPad platform – just as we no longer create sites specifically for the Mac or PC. Think of the iPad as another step in the evolution of the way in which we design for the web. As with every new device that comes out, we must take into account the subtle differences and play to its strengths and weaknesses.
