Martin Colebourne

Scrolling has long been the default method of dealing with a difference between the amount of content to be displayed and the available space, with various strategies used to modify content to avoid horizontal scrolling.

However, the status quo has been challenged recently by two developments: First, the rise of mobile devices has meant that it is often possible to design explicitly for the size of the target page, eliminating the need for scrolling and allowing for the design of a ‘perfect’ layout. Second, the creation of smarter rending technologies, such as WPF and HTML 5 has led to new possibilities in responding intelligently to changing window size.

Faced with the need to design a single resizing strategy across desktop, web and mobile devices for a recent project, I decided to analyse the problem to see if it was possible to derive some basic principles. This post outlines my conclusions.

Analysis of the different types of content that typically appear on the web and in applications, suggests that all content can be represented as being made up of just three elemental building blocks. Hierarchical combinations of these three creates the richness of content types that we actually work with.

The first type of building block are ‘Elements’. These are units on the page that are indivisible and have a fixed proportion. Key examples of these are pictures, video, letters and numbers. For most purposes words can also be treated as Elements (assuming that you ignore hyphenation and don’t mess with kerning).

The second building block is the ‘Composite’. This is an area of the screen which is treated as a single element, but is actually made up of a collection of Elements. For example, text block, or blocks of thumbnails. The Elements in a composite may be related to one another in a serial order, but so long as this order is maintained, the sense is unchanged, even if the arrangement is modified. For example, so long as the words in a paragraph remain the same, then it doesn’t matter what the line length is.

The final building block is layout. This can take the form of either a List, a Grid, or a Composite Layout. A List has a series of cells (either in a single row, or a single column), whereas a Grid has cells arranged into both columns and rows, with these rows and columns having strict meanings. A Composite Layout is made up of a number of cells arranged in rows and columns, possibly including spans, but without strict meanings being applied to them – typically the cells at the top left will be the most important, with priority falling away towards the bottom right. In this respect this Layout type is similar to the Composite building block discussed earlier (hence the name). The cells within a List, Grid, or Composite Layout will be populated with either individual Elements, or with Composites.

It should be noted that these building blocks can be combined together into complex hierarchical arrangements, for example, a List, which contains a Grid within one of its cells, which contains Composites within its cells, made up of multiple Elements.

If you are designing for a fixed resolution, then it is possible to design a layout exactly as you wish it to appear. However, this has never been a common situation on the web or desktop. Even though most web sites simplify layout to some degree by creating a fixed width, they are still designed to flow downwards and utilise vertical scrolling.

As more complex layout technologies become available, designers are experimenting with new methods, such as ‘Responsive Design’ where content is dynamically rearranged to fit narrower widths. My analysis suggests that all approaches to dealing with variable screen area are made up of just five behaviours, usually used in combination.

The first is ‘Squishing’. This is where non-content elements of the page are modified in size in order to give the illusion of the page responding intelligently to the change in window size. This is done, for example, by changing the padding between elements, or reducing the width of columns in a data grid (without causing the text inside to wrap). I say ‘illusion’ because with Squishing, the content itself hasn’t changed, only the gaps between content, so the page fails to make productive use of additional space. However, Squishing can be a very useful strategy for dealing with small changes in area, in between applying some of the other more radical approaches.

The second approach is Wrapping/Reflowing of content. This is applied to Composites. changing the layout of the Elements without changing their serial relationship to one another. For example, changing the line length in a text block, or changing from showing three thumbnails per line, to two per line. Wrapping allows for quite substantial changes in the width of a block, but on its own, this will always have the effect of increasing the height of the block. (In rare cases Reflowing my be applied to change the height of a region by extending its width). On its own this doesn’t solve the problem, but Wrapping is typically combined with Vertical Scrolling to deal with the increased height. A form of Wrapping can be applied to Composite Layouts, by changing the position of cells to form a smaller number of columns, whilst maintaining the overall priority level of the cells with relation to each other.

The third approach is Zooming or Scaling content. This is typically applied directly to Elements, for example, changing the size of an image, whilst maintaining its proportions. Less commonly, it can be applied to composites, eg. changing the size of text to fit the available space. Zooming can be a useful strategy in some cases, by it breaks down with large changes in window size, since zoomed Elements rapidly become too small to see properly. On its own, Zooming is also unable to cope intelligently with changes in the aspect ratio of the window.

The fourth approach is Truncation – cutting off content so that it fits within the available space. This is applied to Composites and can also be applied to Lists and Composite Layouts. Pagination is a form of Truncation, although it is not usually done dynamically.

The final approach to dealing with changes in window area is Scrolling. Content may be scrolled vertically, horizontally, or in both directions. It is generally agree that horizontal scrolling creates a greater usability problem than vertical scrolling, and that a combination of vertical and horizontal scrolling is to be avoided wherever possible. However, it should be noted that this is not always the case: panning is a form of scrolling commonly used for interactive maps and it works well. This is because the map itself is an Element (typically of virtually infinite size), which means that other strategies for dealing with it simply don’t apply.