Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Tips on Layout

Body Text

Always test your body text in place on the page while designing your layout. Don’t leave this until the layout design is finished, and don’t assume that you can just ignore the actual textual content when designing the page. It doesn’t always lay out as you expect, and you need to test at different sizes, etc. and make sure you have specified a font suitable for the length and nature of the text you are using. If possible, use a draft of the final copy (the text you will actually be using) when testing. However, if this is not available, use some other text as close as possible in length and subject, or Lorem Ipsum fill to the right length. It can be distracting to use text on a quite different subject from your page’s other content and purpose, so if possible avoid this.

Centred Designs

If you are using a centred design for a site you may be surprised to find that the elements on some pages jump sideways with respect to the same elements on other pages. Pages are centred by setting the left and right margins of the body to auto, so that the page displays in the centre no matter how wide the window is. The justifications for using this kind of design include the consideration that the width of a user’s screen cannot be predicted and a centred design offers the most attractive and usable result for all possible widths, and the fact that people in different countries read from different sides of the page, and a centred design is therefore more internationally appealing (though of course the text must still read in the direction of its own language’s conventions). However, any time you compute a dimension that depends on the window width (a percentage or an auto value on the body element) then that dimension will change when the window size changes – and the window size changes every time a scroll bar appears. Therefore, if you have a mixture of short and long pages, the content of the long ones which require a scroll bar on the side will appear to jump sideways with respect to the short pages. So far the only way we have found to deal with this is to make sure that all pages are long enough to require a scroll bar on most screens! (It is almost impossible to ensure that pages are short enough not to need a scroll bar as you cannot predict how short the user may have made the window.) However, this is clearly not entirely satisfactory and we would like to hear of any better solution.

Fixing the Position of Elements that Appear on Several Pages

If there are elements that appear on every page, they should always be in the same position and not appear to jump when you move from page to page. This includes fixed elements, such as logos, but also elements whose content may change, but whose function is always the same, such as the top-level heading. (On this page, examples include the image of the book's cover in the left margin, and the main heading.) If any of the page's contents above such elements is of different height on different pages, the elements will move up and down as a visitor moves around the site. This behaviour is distracting and undesirable. To avoid it, either use absolute positioning to pin such elements in a fixed position, or set the height of any vertically preceding elements to a fixed value. (In either case, make sure that it is not possible for the earlier content to overflow its container and crash into the fixed elements.)

Floats and Internet Explorer 6

On page 579 of the book we mention a bug in IE6 that affects floated elements. It is not the only such bug. A less frequently encountered problem occurs when a floated element is deeper than the element it is floated besides. The actual combinations of circumstances that trigger the problem are complicated and poorly understood, but the effect is clear to see: the bottom of the float is cut off at the level of the bottom of the element it is floated by. The only reliable fix is to add, below the element containing the float, a div element containing nothing but an unbreakable space, whose clear property is set in the stylesheet to both. That is, in the XHTML document, insert

<div id="ie6fix">&nbsp;</div>
and in the stylesheet, add the rule
#ie6fix {
	clear: both;

Graphic Elements

If your pages are to include graphic elements of any kind, test the actual graphics (or something very similar and certainly the correct size if the final artwork is not yet ready) in place while designing your layout. Do not assume that you can just fit the graphics in at a late stage once the layout design is more or less complete. The presentation of multiple images on a page will present particular problems, and you need to ensure that there is sufficient space between them to allow each to be seen properly. Single images, on the other hand, can also be difficult to place, as an image provides an area of much denser colour and tone than text, and can therefore distort the balance of the whole page and affect where the user’s attention is directed. If you are using a coloured background you will need to test that any placed graphic elements look good on that background.

Width of the Page

If you are designing on a large screen it is very easy to forget (or perhaps you never knew) just how many Web users still depend on smaller screens. Although the situation is changing all the time, and survey results are unreliable, it is probable that in 2007 nearly 40% of users will still be looking at a screen no wider than 1024 pixels, and some will be looking at a screen 800 pixels wide. You also have to remember that the browser window may not fill the screen (even when the screen is small) and that the internal width of the window is smaller than the external width. To be sure that all the contents of your page will display well for all users without horizontal scrolling it is therefore necessary either to design a layout with a width of no more than about 800 pixels, or to use a flexible layout (often called a 'fluid layout'). Some designers and accessibility advisors now advocate the latter, that is, dynamic solutions that will adapt to the user’s actual browser window width. Although this might appear to be a good solution to cater for a range of different screen sizes, it can be problematic for both widescreen users and those with very narrow screens.

Once a fluid layout is used it will (in most cases) fill a wide window whether the user likes it or not, forcing them to resize the window if the content is uncomfortably wide. Just because a user has a large screen it does not follow that they will find a wide design more usable or even more pleasing. It is tiring to read wide lines of text as the eye has to move a long way across the screen and back, and can cause unnecessary eye strain. On the other hand, if content is broken up into multiple columns across a wide screen this can look cluttered and confusing, impairing usability rather than improving it.

If a screen is narrow, any width specified as a percentage will be proportionally narrow, and this can break a layout. For example, at the accessibility101 page linked to above, the right-hand column is almost the same length as the left-hand column on a wide window, but very much longer when the window is made narrow, causing the balance between the content in the two columns to change radically. At extremely narrow window widths, the right-hand column actually lays out beneath the left-hand one. Although all the content is there somewhere, a much more usable result would have been obtained with a zooming layout.

Specifying maximum and minimum widths in the stylesheet should prevent the worst problems with flexible layouts, but few browsers presently honour these specifications.

Finally, using a flexible layout gives the designer the least control over the final layout and appearance of their site, and therefore the least control over the visual relationship between the different page elements. This means that it makes it very hard to design a layout for optimal usability. When thinking about this problem it may be worth remembering the old adage that “what will hold a lot will hold a little”. And just because you have a large space it does not follow that you should fill it.