Web Design Choices

Layout Decisions

Background knowledge and design considerations that you should think about before deciding on your web site layout

Business people are usually experts on their business subject rather than on web design or even on IT in general. Because of that they, indeed you, may not have the background knowledge to make the right decisions for your site design. This page should help you to understand some of the problems your designer has to grapple with and the implications of what you may ask them to do.

The first thing to do is to throw away any ideas of the web as merely an electronic version of an existing catalogue or brochure. A website is a much more fluid experience and the design ideas that work on a glossy pamphlet may not work on a website, because it is viewed and read in a very different way.

Viewing and Resolution

Think about the way a Windows computer is used normally. Depending on the age and type of the display, a viewer may be looking at and working on a screen that is totally different from the person at the next desk or from their other family members at home. They may also have various visual considerations which mean that they need different viewing conditions - higher contrast, bigger text, colour adjustment, etc.

A normal Windows PC may have a screen size of 12", 14", 15", 17", 19", 20" or 21", and increasingly they may be wide-screen as well as the conventional proportions. The resolution may be 800x600 (pixels), 1024x786, 1152x864, 1280x960, or 1600x1200 or the wide-screen equivalents. This of course is without considering PDA screens or mobile phones. And we haven't even mentioned Apple Macs.

A user with a small screen will often only be able to use a low resolution, or the text will be too small to read easily. They are more likely to maximise the windows on their programs in order to see as much as possible of their documents. The bigger the screen the more possibilities there are for switching to higher resolutions - depending also on their eyesite and viewing conditions. These people rarely maximise their windows but instead may have multiple programs and windows open on the screen at once.

Toolbars and sidebars can make a further difference

It's hard to avoid toolbars these days - sign up to Yahoo or Google and you'll get one, visit Digg and you'll be offered one. These toolbars take up screen space and thus reduce the viewing size of the window. As a designer you have no way of knowing whether your users are likely to be using one or more of these toolbars. Depending on their preferences, users may also have sidebars for History or Favourites and these can be varied in width. Again you have no way of knowing this.

So taking all these variables into account it's clear that there is no such thing as a standard screen size, yet many clients ask their designers to design to a specific screen resolution (usually the client's own!) with the browser window maximised. Sometimes they specify that sizes should be exact to that space or alternatively they may insist that the contents should expand to fill that size. Such approaches are fraught with problems, the latter especially when later in the design they expect things to line up in a fixed manner. Unlike one of those brochures we mentioned at the top of this page, a web page is a series of compromises that try to provide a good viewing experience for all these users at all those resolutions and sizes.

Fixed Width or Flexible

A fundamental decision that needs to be made at the beginning of the project is whether the design should be a fixed width or should be flexible. A fixed width design is generally easier to manage and causes fewer problems, and to some extent elements of the design can be set to align with each other (though you should be aware that the user can change the text size in their browser if they wish and this can move alignments). There are often more options in terms of how the page can be laid out in terms of headers and columns without running into cross-browser incompatibilities. A fixed width design can either hug the left edge with suplus space appearing on the right,or it can float in the middle of the screen on a background colour or tiled image - in the way that this current design does.

Flexible designs expand to fill the size of the window and were very popular in the days of 640x480 and 800x600 screen resolutions. However in recent times they have become less popular - mainly because on higher resolutions (and wide screens) if the windows are allowed to be a substantial proportion of the screen then the line lengths become very long. Basic typography tells us that, even in printed material which is generally easier to read than on-screen, line lengths of much more than about 70 characters are tiring to read and harder to understand. If you make your lines too long on websites then many people simply will not bother reading them. Ok, they can reduce the window width to get a shorter line, but in that case why not just make it fixed width with a sensible line-length in the first place?

Text Size and Colour

For some reason there has been a fashion in business sites to have very small text. I have no idea why this should be, but I've seen far too many of them during phone call enquiries about SEO. Often these same sites use text in various shades of grey. One wonders what spec of monitor these site owners are viewing their sites on. Small text (anything below 12 pixels really is very small for body text) is one thing at 1024x786, assumming the user has perfect eyesight, but what about people using 1600x1200? They will barely be able to see it. Make it mid grey or worse, light grey and you are making it really difficult for the user. If you've got something to say to them you want to make is as easy for them to read it as possible.

Font Styles - what can we use

Unlike Desktop Publishing where you can throw in any font that you have on the designer's machine, the fonts that we can use on the web are limited by what is installed on the computers of the users who are viewing the site. If they don't have the font you specifiy then they can't see it. On PCs that means that you pretty much have to stick to what Microsoft install by default. That means if you use anything for body text other than Verdana, Trebuchet, Arial, Georgia, Times New Roman, Tahoma, or (heaven forbid) Comic Sans, then you have already dropped 20% of your potential audience. Century Gothic is about 79%, if you want Garamond then it's down to 75%, and it drops pretty quickly after that. The other thing to remember is that while some of the most commonly available fonts listed above have been designed to be read on-screen, most of the rest were designed to be printed and don't always render well on screen.

If you've read this far you will already have more awareness than most people who want a site designed. If you've understood it or been encouraged to go and test some of it out then pat yourself on the back. While there is a lot more involved in good design, you should be well on the way to having a friendly and productive relationship with your web designer.