The iPad has recently become the word on everyone’s lips. Apple’s latest mobile device has the ambitious goal of revolutionising the way we consume media and web content. A brave undertaking – but if we assume for a moment that this tablet computer has great potential, we can quickly draw the conclusion that many website owners will want to know how to optimise their sites for the iPad as soon as possible.
So, what needs to be done to ensure your website is displayed reliably and correctly on the iPad? We have listed our own general design principles to give you a taste of the changes which need to be made to create an iPad compatible website. If you want more information or a consultation, don’t hesitate to get in touch.
Specific features of the iPad display:
The iPad has a high resolution, 9.7 inch display (resolution 1024x768 pixel) with LED back lighting which is also touch sensitive. This enables incredibly vivid browsing, gaming and media consumption. The haptic interface literally puts viewed objects or websites in the hands of the iPad user.
Landscape and portrait mode styling:
The iPad allows both horizontal and vertical viewing. This gives web designers fresh possibilities for layouts. At the same time, the different stylings also make two completely different layouts of one and the same site or application necessary.
Moreover, the introduction of the iPad with its vertical monitor orientation marks the return of the authentic magazine format in the web. Up to now, computer monitors have largely had a horizontal positioning. Now, web designers are confronted with the vertical mode and the resulting layout challenges. Ultimately this phenomenon will not just have an effect on design but also on the information architecture.
Vertical orientation is designed to allow websites to be viewed in their entirety all at once – half visible pages and excessive scrolling are a thing of the past with the iPad. At the same time, designers must be aware that websites optimised for the iPad will need to be set up smaller. Conventionally designed horizontal websites can be viewed on the iPad as usual, in landscape mode. Resourceful designers will take care in the future to see that their designs work in both horizontal and vertical orientation and that the content can adapt to each mode.
Design for 960 pixel layout:
A website with a greater width than the screen resolution of the iPad will be made smaller and zoomable. If your website is smaller than the screen resolution of the iPad it could lead to unnecessary margins. When this happens, the viewport settings need to be adjusted. The content should be scaled to the corresponding screen width.
People who design sites for the iPad would be well advised to use a 960 pixel layout. This width is favoured as it is suitable for many modern screen resolutions. On the iPad, a website with 960 pixel width display is shown in entirety. Generally, it is good to ensure that a website can switch seamlessly between portrait mode (vertical) and landscape mode (horizontal).
Text-background relation:
Black text on a white background is harder to read on the iPad than on a normal computer screen, because the iPad display has very high contrast. The problem is easily overcome, for example, by using a sepia background with a dark earth colour or a lighter colour for text on a darker background.
More is less on the iPad:
The iPad should inspire web designers to create simpler websites and enable more intuitive navigation. In horizontal formant, navigation is best built on the left side, in vertical format it should be at the top. A clear, organised website construction will also help users to navigate around the site more quickly.
The iPad multi-touch interface:
The iPad is not operated with a mouse, but quite simply by a human finger. This as a further important point for website design, as a finger is much bigger than a cursor. For the designer, this means using fewer classic links and more large, highlighted, touchable buttons. Furthermore, more space needs to be left between the interactive elements, to prevent two separate elements accidentally being touched by a finger. It is likely that key elements will more frequently be placed in the centre of the site.
No Flash and Java content:
The iPad displays websites using the Safari browser, which supports neither Flash nor Java plug-ins on this device. The standard alternatives for web designers are solutions which are only based on CSS3 and HTML5 code. This should not be seen as a problem, rather a challenge. It is an opportunity to explore these new technologies and recognise that they can be used to create almost all the same functions as with Flash. HTML5 for example, allows for audio and video elements, and animations via CSS offer the option to embed multimedia files.