Relative (proportional) dimensioning

There is no way to guarantee that a user will see the exact size of font or layout that we might want. In the World-Wide-Web the user has much more control over the look of the page than any other medium. So accept the inevitable and allow for the fact that your carefully designed pages are going to be shrunk or stretched by your visitors.

Many people will need to enlarge your font size. Others, such as those with dyslexia, may want to change your colour contrasts . People who have older video screens will have larger pixel sizes than your modern monitor. People using small devices such as mobile phones may have very small pixels and need to fit your page into a tiny screen.

The solution is to use relative (proportional) sizes for dimensions (including font sizes) so that the page can be adapted to the user's method of viewing. This is often referred to as creating a "liquid layout" because it allows the content to flow gracefully into the available space.

PROPORTIONAL DIMENSIONING FOR LAYOUT

We do not know what size, or type of screen the visitor is using, so we need to provide “liquid” dimensions to the layout that allows it to stretch and shrink gracefully. The two most common “liquid” measurement schemes are percentage ( % ) and ems ( em ).

Percentage (%) dimensioning is the most flexible as it allows the page to shrink and stretch to completely fill a user’s browsing window. This means, however, that you have no control over line endings within a sentence, though paragraphs will still end where they should.

em dimensioning uses (roughly) the width or height of the letter “M” using the current font size. If you set your base font to be “small” this would set “em” to be (roughly) equivalent to 10 pixels. Medium font size is (roughly) 12 pixels. By using “em”s for layout you can be sure that all your line endings remain the same, although people with very small screens will need to scroll across the screen horizontally, and people with large screens may have empty space at the side of the screen unless they enlarge the font size.

Which system you use will depend upon circumstances as each design is different. It is quite possible to use both systems on the same page. For example we are using a page width of 100% for these lesson notes because we want to use the full screen and are not worried about line endings. But when we include samples of code we us a <div> layer with a width specified in ems so that the code always looks right (doesn't wrap if the screen is too small). For our sample design with a left-hand vertical navigation panel we specified the width of the "menu" div to be 2 ems wider than the longest link text so that all our navigation buttons fitted within the menu area without wrapping on to a new line.

Setting out the page layout using proportional dimensions is not an exact science so you will need to experiment a little in order to get the best compromise. (Hint to commercial designers: Check out what screen size and resolution your client uses so that you can test the site with the same settings before you demonstrate it, this can save considerable discussion with the client)

FIXED DIMENSIONS FOR PICTURES

The exception to the rule of using proportional (liquid) dimensioning is when you import images. If you have a beautifully posed photograph of your CEO on your "About Us" page you really do not want it to stretch out of proportion. For image you should use pixels to specify width and height. This is discussed more fully in the lesson on media (Lesson 7)

Allowing for border thickness

When working on the layout of a page it is important to remember that any defined area has three attributes that different web-browsers can treat in different ways. The external margin, the border, and the internal padding can all be given values for width or height. See diagram below.

Diagram showing parts of a layer
Diagram showing parts of a layer

The only part of the layer that is not specified exactly is the content area where you want to place your information! This can be a real problem with CSS which requires careful mathematical control - so be warned. It is a good idea to work out dimensions with pencil and paper first and then test it in a variety of ways. We discuss this issue a little more when we look at using tables to control layout, but it doesn't make any difference if you use absolute or relative dimensioning, so for accessibility reasons, always use relative measurements for page layout.