The Long Canvas — Designed for Scrolling

A City of Cathay_02

Over the past five or six years web designers have worked at devising “fluid” alternatives to “fixed” web page layouts. The increase in the variety of screen sizes has prompted a search for visual layouts that can easily be modified.

However, many of the new layout methods do not make use of visual composition.

Unlike a painter’s canvas, viewers of web pages only see a section of the whole page at any given moment. To move from one section of the page to another, a scroll bar is used.

In contrast, traditional composition is all about meaningfully connecting the different visual sections with the whole. So why bother with composition when the web page as a whole will never be seen, and isn’t composition even less necessary if we’re talking about viewing web pages on a phone?

These questions prompted me to take a closer look at a physical scroll, to find out how people from the past have approached composition for scrolls, and to see how their methods could be used to create compositions for the web.

Figures 1 and 2 show a section of a Chinese scroll1, and a compositional analysis of the same section.

Fig. 1 and 2
cathay scroll 01B

In figures 3 and 4 I’ve placed this section of the Chinese scroll inside of a phone display. These two figures illustrate how, even if the visitor is unable to see the entire Chinese scroll, he or she can still see how smaller areas are meaningfully connected to larger areas.

Fig. 3 and 4
cathay scroll 02B

Figures 5 and 6 show how the same principle can be applied to type on a page. I’ve used a typographic example from a previous post.

Fig. 5 and 6
cathay scroll 03B

The web designer can find it useful to think of compositions within compositions. The result of using this approach is that site visitors will always be looking at mini-compositions. These mini-compositions, in turn, provide visual relationships that will support the concepts that are being presented on the given web page.

All of this requires a willingness to look more carefully at the possibilities that fixed web page layouts bring to web design. There is an essential difference between fluid web page layout approaches and visual composition. Fixed layouts can be adapted to fit a variety of screen sizes, but fluid layouts can’t be adapted to allow the designer to create visual compositions.

As always, these posts are works in progress. If you have ideas for improving on what’s here feel free to share them.

Notes

1 Source: A City of Cathay: An 11 meter long scroll painted for the young Qianlong Emperor in 1736

Leave a Reply

Your email address will not be published. Required fields are marked *