running words around
design education and visual communication
authored by chris m hughes

Beyond the Fold with iPad2

Tuesday, 29 March 2011

Apple’s iPad is already an iconic gadget that has sold in excess of 15 million units since its launch less than a year ago. With the release of iPad 2, the seminal tablet device is expected to sell even more, and bring the iPad out of the early-adopter slot and into the mainstream.

iPad may well have rescued print by reinventing what can be done with the magazine format, and now iPad2 will demand a new perspective on web design. It's a lot lighter, thinner and faster, and this makes web browsing a far more practical experience than with the original iPad.

In a way web design is like particle physics. The more we learn about it the better it gets, but those improvements require us to continuously reassess the principles and break formerly sacrosanct rules.

For example, just a few years ago no competent web designer would have dreamed of setting text above 18pts on screen in plain html. But these days, with better screens resolutions, anti-aliasing adjustments, and the improved control of css, large html text is commonplace (and can look awesome).

As of now, the iPad has thrown up three key issues that will force a new paradigm for web interaction.


By offering users portrait orientation, websites for tablets will become taller, revealing information which on a standard screen would be 'below the fold', and forcing designers to reign in the ever-increasing pixel width of website visuals.

A knock-on effect will be a reduction in the reliance on whitespace that is currently in vogue, and which produces clean minimal designs. The consequences could be busier content and more restrictive visual elements. This seems like a step backwards and not forwards in terms of interface design.

2. No More Mouse
The use of touchscreen, and the general tactile ethos of the iPad, means that website interaction is completely different to using a computer. The whole canon on usability may need to be re-written. Web designers will have to come up with multi-touch capability and larger, simpler navigation.

Using chunky buttons and large icons seems like a good solution, but for those of us who were around in the early days of web design, this feels like a real anachronism.


And thirdly, the iPad does not support flash, so websites which have previously relied on animation and video content, developed with time-consuming skill, will need to either be rebuild or have alternative versions.

But in a turn-up that most cosmologists would die for in their field, it turns out that the answer to these web design issues are very simple.

The technical trick to accommodate both orientations is in getting the layout to fit both sizes on the fly. This is fairly straightforward using css, and is already in use (with varying degrees of success) with handheld devices. The website requires two stylesheets, one with the 1024px width sizing, and one with the narrower 768px sizing.

In the former, the content is laid out like a standard website, with a main content area and flanked columns, whereas in the portrait orientation, the same flanked content is shunted below the main content using the float property. Everything is triggered by three lines of html - this one to control the scaling of pixels -

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0">

and these two media queries to call the styles on orientation -

<link rel="stylesheet" media="screen and (orientation:portrait)" href="one.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="two.css">

The result is one set of content which displays in two interchangeable layouts - on the left, the 1024 X 768px landscape with a column floated right, and the same page at 768 X 1024px with the column floated left (and hence shunted below due to the narrower width) -

As for larger buttons, the rise of social media has brought them back in vogue, and icon-based navigation makes a lot more sense than it did ten years ago. Icons are far more intuitive to a generation who have grow up with the internet. The iPad by its very nature is a less accessible tool to use than a computer, and so accessibility issues which dog traditional screen-based web design become less relevant.

And finally, the question of Flash has already been answered. Google's Android system has already adopted html5 and css3, and Apple have followed suit. HTML5 can produce much of the dynamic interaction we associate with Flash, with the added magical editable power of css.

I think we are going to see more horizontal scrolling with multi-columned text content, taller vertical layouts, and a lot less pages in websites. We'll also see the standardised adoption of html5 and css3 to produce inventive styling, and touch icons will start to take over from the more cumbersome text navigation. It's only a matter of time before web design as we know enters a new era, beyond the fold.