The proportions of the iPad screen are 768 by 1024 pixels, a 3:4 ratio, usable in both orientations. What does this mean for layout?
Tuhin Kumar suggests fluid layout:
[Y]ou can view [the iPad] 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.
I hate fluid layouts
I hate fluid layouts, if by that we mean fixed left and right columns (for navigation etc.), with the main text stretching across the remaining screen real estate. As in Wikipedia:
britney-spears.png
Bad Wikipedia typography
And Wikipedia isn’t the worst offender. The trouble with fluid layouts is their disregard for basic typography. The readability of text depends on the harmony of text size, font style, line length, and interline spacing. In her book Better Type, Betty Binns explored this topic exhaustively, typesetting a passage from a nineteenth-century novel (two typesetters at work) hundreds of times using different parameters. Good typography, on the web or in print, does not occur by chance. The idea that you just flow the type into whatever space you have left over – is an antipattern.
In fairness, Kumar talks about “smart” fluid layouts, which suggests a more flexible approach. (See this discussion.) But the examples I’ve seen still founder on the problem of line length.
(It’s been argued that the web tolerates longer line lengths than the 75-character maximum that print gurus like Robert Bringhurst advocate. But these critics are suggesting only modestly longer lines of 100 to 115 characters, not the 180 characters that Wikipedia’s fluid layout displays on my desktop monitor.)
Two orientations, two layouts
So, what should a designer do?
Let’s start with something I wouldn’t do. I’m sure you’ve seen the tablet demo Sports Illustrated did (not designed for the iPad, but close enough). Their idea is that the landscape and portrait layouts should be quite different: same general look and feel, but looking almost as if designed for different devices. I
don’t understand this. The changes – whatever they are – between the two orientations should be dictated by user need.
But what do the two orientations mean in terms of user need? Does the choice depend on physical context? I imagine that certain physical situations will favour a vertical or horizontal orientation. Maybe orientation will be the modern-day equivalent of the subway fold – the practice of folding newspaper into quarters or eights to avoid jostling your fellow passengers in a crowded subway car. Sitting in a cramped airline seat, maybe you’ll want to keep it in portrait mode to get the best viewing angle.
If the choice is physically determined, the orientations should present effectively the same experience, just optimized (in terms of typography etc.) for the different screens.
Close view/far view
One approach would be to change the typography to match the screen width. This means type size and line spacing as well as line length. A close view and a far view on the same virtual layout, in other words. Not so different from what any good web browser would do, but presumably more sophisticated than a simple zoom function. The difference in type size seems reasonable: up 33 percent or down 25 percent, within the range a reader might be expected to want.
But I don’t like this approach. Adjusting readability is a task for a normal command, or a gesture. You shouldn’t expect the user to rotate the tablet for something so simple. It’s like having to get out of your car and slam the door in order to adjust the radio volume.
Multiple columns?
Let’s think in terms of a grid. Unlike many so-called grids (really just column guides), this one will divide space both vertically and horizontally. To fit the 3:4 overall aspect, we’ll make it 16 by 12 columns. This offers lots of possibilities for layout, but the most obvious one is 4 columns in landscape and 3 columns in portrait. Let’s assume we carry over the desktop convention of a left-hand navigation bar.
This looks workable: changing the orientation gives you a slightly different view on essentially the same screen. But notice that in landscape model the screen holds slightly more content, because the sidebar occupies less space.
Beyond the obvious
More often, I think, the information itself will determine the choice. Viewing photos, you’ll favour landscape for landscape-formatted photos, portrait for portrait photos. That much is obvious. But what is there beyond the obvious? We’ll see what designs emerge over the next few weeks.
Christopher Burd is a business analyst, writer, and information designer based in Victoria, British Columbia. His website is www.catchword.ca. You can follow him on Twitter.
