6

Web Design for the iPad: Part 1

Posted by in Apple, Design, iPad, Web Design

In the last 6 months Apple has landed one of the quickest selling products in history. They have recently reported selling 3.27 million iPads across 10 countries during the last quarter which is quite an astounding number given that it’s been less than a year since it was avaliable for purchase.

It is important to note therefore that a new market has arisen for designers to take hold of: websites specifically aimed at the iPad. In this post I have outlined the initial factors to consider before designing webiste optimised for the iPad.

THE BASICS

1. Pixels

The iPad has a 9.7 inch screen, which is smaller than most laptop screens. However the PPI (pixels per inch) is 132 and therefore pixels appear a lot crisper so if a designer is not careful, lower resolution or highly optimised graphics can appear less detailed.

It is important therefore to ensure that your graphics appear smooth and crisp when designing for this new medium.

2. Orientation

This is probably an obvious one, but unlike traditional computers the iPad can be turned portrait or landscape which invariably affects how to design a website. It is important to consider that the two orientations have different physical dimensions and how this effects your design.

3. Links and user interaction

Most websites make use of a hover action for example underlining links once the user hovers over them with the mouse. Obviously with the iPad there is no mouse. User interaction with links is therefore different but performs the same function. Making use of touch based gestures when designing a site is extremely important since it is such a fundamental part of iOS.

4. The Fold

Designing for the ‘fold’ in web design is commonplace. As designers we try to ensure that all the main crucial elements are ‘above the fold’. The fold is the viewable area which the user can see when first loading a site in a browser. There are several variables that contribute to how much a user can see such as screen resolution, browser and now with the iPad orientation also becomes an issue to consider.

As previously mentioned the iPad has two forms of orientation and therefore it effectively has two folds, which a designer must take into account when building a website. However, you could say in some ways the iPad doesn’t have a real fold because the user will simply orientate the device to accommodate for more or less content.

5. No Flash please, HTML5 is the future


This has made many headlines over the last few months in the web design world. Apple has taken a firm stance against the inclusion of Flash on any of its devices, meaning that Flash based websites just won’t work. And even more importantly Flash video won’t work either.
 Whilst a lot of people have complained about this to Apple (believe me I was one of the first to moan being a Flash advocate) many quickly came around to the idea of using HTML5. For a start it’s standards based and also it means the user experience doesn’t suffer because the Flash plugin is too slow to run on the device.

IN PRACTICE

1. Graphic Optimisation


Most websites rely on the use of JPG or GIF, however PNG appears to render better on the iPad and iOS devices in general. The drawback of this is PNG24 may take longer to load so it must be used sparingly. JPG should still be used but mainly for Photography.

2. The Grid


Most modern websites currently use the 960 grid system, and fortunately the iPad will automatically scale your site to fit, however if we are talking about specifically creating a site for the iPad the width of the site should be 768 pixels wide. In terms of the fold i.e. the maximum visible height without scrolling, when orientated in landscape mode the fold is around 660 pixels whereas when it is orientated in portrait mode it is 916 pixels.

3. HTML5 Video rather than Flash Video


Using the new video tag in HTML5 you can embed video into your website without any need for a plugin such as Flash, however be aware that most browsers do not support HTML5 at the moment, so be sure to provide alternate content unless designing a site specifically for iPad.

EXAMPLE

Nike.com iPad website

Nike have created an absolutely fantastic iPad specific website which you can visit here:
http://www.nike.com/nikeos/p/nike_ipad/en_US/

As you can tell there are some major differences in terms of size and scale when compared to browsing the site on a desktop computer. But there are also fundamental differences in terms of user interaction, for example the user can swipe the products at the bottom with their finger and they will scroll along. On a normal computer you would need to click an arrow with a mouse or use a key on the keyboard.

CONCLUSION

While this is by no means an in depth guide to designing for the iPad it covers the basics and provides an excellent example of how an iPad specific website has been implemented. Later articles will include tutorials on how to design an iPad optimised website from scratch and address several of this issues I have raised in this introductory article.

Click here to go to Part 2

Further Reading:

6 Ways to Optimize Your Site for the iPad | Search Engine Journal
On the iPad and Web Design – Soma Design
Will the iPad change the way you design?