Web Design Choices

Website 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. The increasing use of mobile devices makes that even more true.

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 are likely to be wide-screen (16:9) as well as the conventional proportions of desktop monitors (4:3). The resolution may be 800x600 (pixels) - old monitors but also some quite recent Netbooks, 1024x786, 1152x864, 1280x960, or 1600x1200 or the wide-screen equivalents such as 1360x768, and 1600x900. This of course is without considering PDA screens, tablets 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, Flexible Width, or Responsive

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 design and manage and causes fewer problems, and thus has a slightly lower cost (all other things being equal). 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 surplus 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 website does.

Flexible width designs expand to fill the size of the window and were very popular in the days of 640x480 and 800x600 screen resolutions. However as resolutions and screen sizes increased they became 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 75 characters become progressively more 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?

However due to the increased use of mobile phones such as the iPhone and Samsung Galaxy, there has appeared a third option in "responsive design" which is in some ways a development of flexible width approaches. This uses new methods of adapting to screen sizes to adapt not only the width but also the layout of sites depending on what they are being viewed on. So a layout might have three columns on a wide-screen monitor, two columns on a tablet device, and a single column on a phone in portrait mode. This requires a lot more adaptability in the design and decisions on what elements are important to viewers on differeent devices.

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, assuming the user has perfect eyesight, but what about people using 1600x1200? They will barely be able to see it. Make it mid grey, or even worse, light grey, and you are making it really difficult for the user. If you've got something to say to them then 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 have, until very recently, been 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.

New methods now allow some fonts to be installed on the fly via online resources, giving us a wider range of available style, however there are restrictions on what can be used as many of the most popular fonts are commercial and therefore copyrighted, so you can only use those that are made available by companies like Google. You should also be aware that loading external fonts increases page load times and if the online resource is unavailable for any reason then your site may revert to one of the standard defaults - nothing is guaranteed 100% of the time.

The Next Step

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.

If you'd like to find out more Contact us and we'll be happy to discuss your needs.