Pattern 60: Magic margins
AKA: Proportional margins, Liquid pages

You have organized our content into SHORT TEXTS (44) and decided that WHITE SPACE SEPARATES CONTENT (58) but our users may have TWO-YEAR-OLD BROWSERS (10). We must now lay out our web pages. On the one hand, our clients want to be able to specify and control the layout down to the smallest detail. But on the other, users are using multiple browsers, browser versions, screen sizes, and screen resolutions.

How can we reconcile the competing forces that arise from the need to display rich content and to fit everything into the browser window?

Therefore

Design margins that are appropriate for many window sizes, resolutions, etc. Try 5% instead of 30 pixels for margins using tables to segregate content and other objects. Use a 1 pixel invisible graphic to enforce minimum column sizes and avoid BROKEN BUTTONS (59), also using non-breaking spaces. Draw attention to scrolling that depends on window size.

This pattern is terminal within this language.

Contributors and sources
Gareth Sylvester-Bradley, Veen (2001)

The traditional approach is to use pixel-based layout, which balances these forces – but leaves the user frustrated, either by

• wasted white space and less content on the screen; or
• cropped and/or horizontal scrolling.

It is no longer acceptable to advise visitors that they must use a particular browser of screen resolution. Instead we must make our pages adapt to the environment in which they find themselves. To achieve this. the key is to use relative instead of absolute values for all positioning statements.

For example, we could use a table to implement part of our THREE-REGION LAYOUT (26) as follows.

<P>
<TABLE BORDER="0" WIDTH="100%">
<TR> <TD WIDTH="10%"></TD>
<TD WIDTH="20%">Service navigation
goes here</TD>
<TD WIDTH="70%">Content goes here</TD>
</TR>
</TABLE>

The first column represents a margin and it might be better set to a fixed small number of pixels: WIDTH="15". To see the kind of thing that can be done consider what happens when we shrink the window display for the kvetch site shown above.

Figure 60.1 www.kvetch.com on a small screen.[refer to book]

Notice how the graphics that render the corners of the 3-D background remain unscaled while the text in the right hand column is scaled and wrapped. The scroll bar that now appears is prominent because of its positioning and colour relationship to the background. The user can be in no doubt that there is something below the line now. What a nice design! Veen (2001) gives further analysis of how this site is constructed. He also discusses the use of Cascading Style Sheets and Javascript to implement this pattern – a topic beyond the scope of this text – and allow you to have variable fount sizes. The most obvious and useful application of this is to shrink or stretch headlines to fit above the content they introduce as the column width changes.

Another problem that this approach avoids is the aesthetic problem of masses of blank space appearing when the window is large. The user has to scroll to see content that could have been on the screen for her greater convenience if the designer had worked only slightly harder.

Figure 60.2 A page designed for 600 × 480 resolution on a 1920 × 1280 display.[refer to book]

Browse the language	What is Wu?	Look at an example pattern sequence	Structure of the patterns
Comment on Wu	Contributors	Return to TriReme home page	Links to related sites