Colour, texture, imagery and typography garner most of the attention in web design. Layout, not so much—it’s fraught with constraints, and so web designers settle for responsive patterns which are tried and tested: smartphones get stacked layouts, tablets get a more varied layout with small side margins, and larger screens get the varied layout but with larger margins (typically centred at some arbitrary percentage of the viewport width).
Web layouts are slave to the width of the screen they’re being viewed on.
The height of the viewing window, and more importantly its proportions, are largely ignored – the reason being that you’ll be scrolling down to view the remainder of the page in any case (the height of the content can be anything and the layout will still work).
While responsive design techniques allow for an easier to read web, they involve designing multiple variations of any page. This is time-consuming, a pain in the ass and those mobile layouts look nothing like their desktop counterparts. This bugs me, as do the margins we use to position the content within the viewport (too arbitrary).
Wouldn’t it be good if we could rely on a universal layout technique that works across all browser sizes and proportions and respects the viewport dimensions?
A ‘Perfect’ website layout:
- Positions important page elements so that they are discrete—else what’s the point of publishing the page in the first place?.
- Is neither cluttered nor empty—one aims for that ephemeral quality of design when it ‘just feels right’.
- Works well no matter the screen size or proportion—digital devices come in all shapes and sizes.
- Instills harmony via a co-ordinated family of dimensions—the Golden Mean being a likely choice. Tim Brown in More Meaningful Typography and Mark Boulton in A Richer Canvas suggest that we should design in modular scales and “create layouts from the content out”.
The last point is the clincher. The idea is that you select one or two important elements in your content, and then generate a series of modular dimensions from these. This set of master dimensions is then used to orchestrate and synchronise the remainder of content. We’re designing from the content out, rather than from the canvas in.
All good… or is it?
We’re still plagued with poor relationships between our ‘perfectly’ proportioned content and its frame (the edges of the viewport).
Consider the following layouts based on a “content out” paradigm:
As our content is taller than it is wide, a portrait-proportioned window does a good job:
The important subjects are ‘above the fold’ (you don’t need to scroll down to see them). The same can’t be said for landscape proportions:
Short of developing two layouts (one for portrait, one for landscape orientation), the designer has no choice but to compromise and allow side margins, which have the effect of shrinking the height of the content (and bringing our text copy above the fold and into the limelight):
The margins between the content and the edges will always be problematic under some proportions if you design from the content out. These issues are exacerbated when you size the window away from the norm e.g. for wide landscape viewports, the only solution is to centre the content (resulting in wide margins), or develop many variations of the layout to suit the changing conditions = consistency-fail and a lot of work.
While we may want to ignore the canvas in our deliberations, we can’t.
Reconsidering the Canvas
The Canons of Page Construction are a set of principles in the field of book design which define the position of the text box on a page, no matter the page size or proportion. They were intended for double-page spreads, but remain useful in the layout of digital screens.
In essence they impose a 9×9 grid over the page (or viewport in our case) which has some handy properties, particularly when combined with the diagonal lines of the Van de Graaf Canon:
A page layout canon for digital screens
The arrangement works well for a digital display – the primary content area soars in the frame, leaving breathing space below. As most web-pages scroll vertically, this space takes the role of connector (or introducer) between the top and the rest of the page—an ideal location for primary headings and/or leader text copy.
The diagonals define the sweet-spots
The Van de Graaf inspired diagonals follow the ‘tension’ lines of the page. Where they intersect with each other and the grid form ‘loci’ points – areas of the page which have a comfortable relationship with the viewing frame and other loci.
Position your main interface elements on (and straddling between) these points and you’re half way there.
The grid scales with the viewport
While the diagonals help define the layout of the top of the page (i.e. whatever is visible initially in the viewport), the grid is informative for the entire page.
Each grid unit is 11.111% of the width and 11.111% of the height of the viewport, and mirrors it’s proportion; the grid scales proportionally with the window.
Elements on this grid are have a harmonious relationship with the window.
Canvas-in, then Content-out.
Macro-grid, then Micro-grid.
Once we’re happy with the general placement of our primary interface elements on the grid, we’re done with worrying about the canvas. Focus can switch to the content – our typography and imagery.
Text boxes and inline-images can use their own Content-out approach as described in More Meaningful Typography and A Richer Canvas.
Discrete images can pin at least 3 of their edges to the grid (if you want them to maintain their proportions), or be dimensioned in multiples of the grid if you treat them as background-images (they’ll automatically fill the space available).
Heading sizes can use either the macro grid or the micro grid, or both, depending on how discrete you want them to be.
Show me, don’t tell me.
If you’re looking for a working example, see my first attempt at a ‘perfect’ layout. I’ll leave it up to you as to whether I’ve pulled it off or not…
Some comments about all-sorts.biz
- The colour animation that appears on most pages will be identical in proportion to that of your viewing window. Internally it dimensions it’s lava-lamp components via the Golden Mean.
- The heading font-size scales with the window size:
- if you’re viewing in portrait mode, the width of the viewport is used to generate the font-size
- else in landscape mode, the height is used
- Body copy uses an optimal font-size for easy legibility—it does not scale with window size, instead it flows along and down it’s containing box. The Golden Mean is used to proportion indents, padding and margins (micro-grid, content-out).
Earlier I dissed the need to design multiple layouts to suit various viewport sizes. How did it go in the design of all-sorts.biz? Not too badly: I needed to widen the main content column for mobile devices, and futz with the heading font sizes and enquiry form to get it all to hang together at all scales, but on the whole it was relatively painless.
I spent far more time trying to get the layout into something I liked, than coercing it to work at all sizes.