Layout is not a dirty word!

by Joe Gillespie — Jun 1, 2001

by Joe Gillespie

Windows browsers fill the screen (maximise) by default.

Mac users generally surf with narrower browser windows that more closely follow printed page sizes.

There is something very reassuring about a page. A printed page that is. Whether it is a page from a book or magazine or a single sheet of paper with a menu of pizzas, it has a definite, fixed size. If you want to say 'Deliveries free within a three mile radius' in five point type and half an inch from the bottom of the page, you can - no problem.

The only part of a Web page that you can be absolutely certain about is the top left-hand corner - well, give or take a few pixels for the 'browser offset'. There is no fixed top right corner or bottom edge because these depend on the size of the browser window. The size of the browser window, in turn, is restricted by the visible monitor size, and the whim of the user. PC owners tend to maximise their browsers regardless of screen size, Mac users are more likely to have a smaller, floating window.

There are quite a few different monitor sizes these days, you can't even depend on them being the same shape because some screens have a wider aspect ratio than usual, especially on laptops.

Current Web usage statistics on sites like TheCounter show that the majority of users have screens that are 800 x 600 pixels or bigger. Instances of the old 640 x 480 standard are now reduced to about 6%.

Unless you suspect that your particular audience is likely to have old machines with small monitors, 800 x 600 is a good size to aim for, bearing in mind that the visible browser area is considerably less. See this month's Top Tip for some typical dimensions.

Then, there are all those people who have larger screens, (1024 x 768 is the next most common size after 800 x 600), with their browsers maximised, what is your Web page design going to look like on those?

When Web pages started to appear in the early '90s, they were little better than word processor pages. For the type of content at that time, academic and scientific papers, this was acceptable. HTML allows a Web page to be structured so that the information is presented in a logical way. It was never intended that it be used for typographic mark-up or 'design'.

Of course, there are those of us who care what a page looks like. Despite what the diehard HTML coders would have us believe, layout does have a place. If the World was run by engineers, it would be a very boring place! Over the years, designers have developed numerous hacks to try to cram some aesthetic into the chaos - some more successfully than others.

Probably the most significant of these bodges was the single pixel, or spacer GIF. Some people went to ridiculous lengths to try to inflict typographic control on a not-too-willing medium by inserting tall, transparent, single pixel GIFs every few words to simulate line-spacing. It seldom worked on anything but the designer's own screen!

There were page editing programs that inserted such GIFs all over the page and claimed 'complete layout control for designers' but at the high costs of poor editability, large download size and screen refresh. Thankfully, such practices are now dead and buried - except for the odd zombie that haunts the nether regions of the Web!

Modern Web page design principles try to keep content and style separate. If the 'structure' is sound, then the content will be presented in a logical manner regardless of the browser or platform. The more 'tricks' introduced into a page, the higher the likelihood that it will fall over in somebody's browser.

The fact that you are reading an article on 'Web Page Design for Designers' means that you are probably not the kind of person prepared to put up with that 'lowest common denominator' kind of Web page, that you want to present a page that has some style and visual appeal. Some will even go totally down the extreme 'eye candy' route at the expense of content and communication but that is self-indulgence, not design.

Layout

That is the single word that separates the purist HTML coding geek from the soo-cool, arty-farty designer. Between the two extremes, there is a lot of fertile ground.

Let's look at layout.

Some Web pages are designed 'hard' and some 'soft'. A hard design is based on tables whose widths have been specified in absolute pixels. My page here, for instance, has a fixed table width of 650 pixels containing a three column 'grid'. My server logs tell me that virtually nobody with a 640 x 480 monitor visits this site.

The narrow leftmost column contains the vertical section headers, the middle column the pictures and captions and the right column, the main body of the text. I don't like grid structures that are too rigid so I break out the grid often by joining columns or inserting contradictory elements. A grid is a foundation for holding a page together visually, it gives it strength. Breaking the grid a little makes it more dynamic.

If line lengths are left uncontrolled, they can become too long to read.

The other popular method is the 'liquid' design where table widths are specified as percentages of the browser window width. The page then adjusts itself to fill the window whatever the screen width. This works reasonably well where there is a lot of text. The text just reflows to any new line length but, on large monitors, can lead to line lengths that exceed the 'ideal' 30 to 40 characters required for optimal readability.

As line lengths increase, and especially when there is little or no line spacing, text becomes more difficult to read. This is partly due the way we scan phrases and not words and partly because of the distance the eye has to cover to find the beginning of the next line.

While text can reflow to fill any table width, graphics usually can't - unless they are used as background images for cells or tables. The navbar below is in a table set to a width of 100%, so it will automatically fit the width of the browser - well, approximately.


HOMEPRODUCTSLICENSING

The scripts for these 'latching' buttons are explained in the Advanced section.

The table has a small, tiled background image. This is more reliable than a cell background image. The table also has a background colour - black - to cater for browsers that don't support table background images. Note that Netscape has problems with table background images if there are multiple rows and columns, that's why I've kept to a single cell here.

Sticking everything in the top left doesn't work on larger monitors.

Whether you use a hard or soft Web page layout is up to you, and the type of design that you want to achieve but a word of caution. Because of this 'top-left' cornerstone that Web pages are built upon, a lot of sites look silly on larger monitors with everything crammed up into the corner and huge blank spaces down the right side. You need to consider what happens on wider screens, not just design for 800 x 600 and leave it at that.

You can use the 'liquid' approach and let the page flow to fit the window width, or you can use deliberate 'white space'. This editorial page has the table centred so that there is an equal amount of white space on the left and right side. Regardless of the screen width, the page looks reasonably balanced, not lopsided as it would be had I stuck everything in the top left corner.

Here, the line lengths are controlled to a fixed-width and the 'dead' space either side acts as a picture frame.

You can also use a combination of 'hard' and 'soft' designs so that, say, a topmost navigational element stretches to fill the available screen width whilst fixed-width tables of content beneath are centred on the browser width. If you use a combination of percentage-width and fixed-width tables, you get the best of both worlds, and a balanced-looking page.

On some occasions, when there is little on a page, you might also want to visually centre the content on the browser height. This is not always as predictable as you might like. Although 'Table Height' can be set in most editors and works in the majority of browsers at the minute, it is not officially a part of HTML specifications and you can't expect it to work in the future.

Next month, we will look at some other aspects of Web page layout including grids, tables and style sheets and examine the pros and cons of using tables and 'absolute positioning' with style sheets.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float