Better by design

I’ve had a lot of responses to my recent comments about the paucity of good books on basic web design and development. The majority of big-name books currently available simply aren’t fit for purpose, covering as they do bad practices and out-of-date technologies. Their authors can get away with this only because modern browser software is so tolerant, but by teaching these deprecated techniques they merely perpetuate the poor practices, or at best condemn newcomers to unlearn everything they just learned.

In my last column I showed you how to use WordPress to create websites that adhere well to best practice in terms of technology, if not design. Like similar content management systems, such as Joomla and Drupal, WordPress lets you create websites with minimal knowledge of the underlying technologies. However, it’s only a tool and, unless you simply copy an existing site design, you’ll need to understand the basics of CSS formatting to modify a pre-built theme. To create a new design from scratch, or modify the basic layout of a theme, requires not just CSS skills but also an understanding of how layout, typography and colour work online.

There’s no getting away from the importance of design when it comes to website development

There’s no getting away from the importance of design when it comes to website development. I wish this weren’t true, as I’m much happier coding the back-end of my web applications and I’m rarely more frustrated than when nudging and nurdling with its layout. Having said that, the fact that I do understand the fundamentals of web design means that I won’t waste time at this stage – at least I know the time I spend implementing its look and feel is going to yield a good-looking site.

Layout basics

The aspect of web design that most mystified me when I started out was how to put together a layout – there appeared to be an infinite number of possibilities, so where to start? I was wrong about that, since most websites in fact use one of a small number of basic layouts. The constraints of your browser mean that only a few layouts make practical sense, because they make it easier for new site visitors to find their way around, and they’re easier to create.

CSS layouts are based around blocks, rectangular areas that may contain any HTML marked-up items, including text, pictures and links (or, indeed, nothing at all). Most web pages employ at least these items:

1. Content

   The actual information, which tends to occupy most of the page area.

2. Navigation

   While you might have links embedded within the content, you should also have clearly identifiable and understandable navigation menus

3. Logo

   Commercial or charity websites will almost always start with the organisation’s logo, which more often than not will be in the top-left corner

4. Footer

   Most pages incorporate a footer containing copyright information, and often repeats of the main page links

Usually, the entire page will fit within some kind of container. To see what I mean by this, look at the NlightN Multimedia homepage where the grey area around the edge is the container. Resize the browser window and watch what happens – as you make the browser bigger or smaller, the grey area grows and shrinks so the page content within the white rectangle remains the same size. (Obviously, once the browser window shrinks below a certain minimum size then so must the white area.) This is an example of a “fixed width” layout, in contrast to “liquid” layouts that change size as the user resizes their browser window.