Alucard Inchoate Ltd Alucard Inchoate Ltd

The Making of Style

Colour.

There should be a good contrast between the background colour and the text colour. This is quite easy to achieve with a white or black background, using black or white text, but this becomes a problem if you have chosen a mid contrast background colour. The best way to check is to experiment. Vary the text colour against your chosen background colour until you have something you can read easily at a good viewing distance from the screen.

Height.

If you have bad eyesight, there is nothing worse than small writing. On the other hand, it is not very pleasant to come across a text height so great that only about three or four words fit on a line. It’s like reading an entire article written as a newspaper headline. Somewhere there is a happy medium, and this is between 10 and 12 point. Most short-sighted people will have their screens set to accommodate their eyesight, so there is no point going any larger than this for body text, reserve the larger text for headlines and titles.

Face.

Font face is a different issue altogether. You may have hundreds of different fonts loaded on your machine, or you may only have a few. In the case of the world wide web, less is more. If you specify a font that you have on your machine, and it is not a standard font, the chances are it will not be loaded on the machines of your target audience. Worse yet, the browser will substitute what it believes to be the best font for the job, which can be nothing at all like you intended.

So you go for a font that you know came with your operating system, Arial. Unfortunately, Arial came with your PC operating system, but not with a Mac, or a Unix platform, or all the other platforms that can link to the web. What was a simple choice has now become a nightmare!

The best way to get round this is to specify multiple fonts. Your main choice font would be listed first, followed by a second choice font, which you know is available on all computers of one operating system, and then possible a third choice font from another operating system. This page is meant to be in ‘Trebuchet MS’, but the operating system has a second choice of ‘Verdana’, both of which are good screen fonts. There is a third choice of ‘Arial’ which should cover all windows based PC’s, and a fourth choice of ‘Helvetica’ which covers Mac and some Unix platforms. A final choice of ‘sans-serif’ is used for anything that might be missing, this is a browser instruction, asking the browser to use the systems default sans-serif font. It’s a bit long winded, but it gets the page displayed something like the way it was intended.

The main worry with face is can you read it. Don’t choose a font which is difficult to read at your chosen height and colour. Try to use screen fonts for body text, as these have been designed for easy reading on a screen, where as most traditional fonts have been designed to be printed. If you want something simpler, try to use sans-serif fonts (such as Arial or Helvetica) instead of serif fonts (Times, Times New Roman) as they are also easier to read on the screen.

Think about navigation when you define your style. If you feel like using buttons or icons for navigation, you need to make sure that there is a text alternative. This is because people still choose to browse with images turned off, and because images don’t by default give away the fact that they are links. Images are fine, only if a user can decipher what you meant by your icons. Very few users will press things, just to see where it takes them. Bad, or confusing navigation is just one more reason to look for the information somewhere else.

With these decisions made, you should be almost there in terms of style. One last thing to worry about, file size. As mentioned in lesson 1, designers should pay attention to the size of the individual, with a theoretical maximum page size being 25kb. This is fine for pages lower down in the site, but the home page should be displayed as quickly as possible. Think about this when you do design the home page. Don’t lose a good style to get the page to appear in seconds, but make sure loading is not so slow that the user will be bored before anything appears.

Think about reusing graphics, as browsers will cache the files on the local computer. This means the files will be downloaded once, and reused whenever they are called again. A consistent style actually helps with this, as any graphics loaded for the style will be reused on subsequent pages.

Test the download speed by copying the site onto a floppy disk and running it from there. This will not fully mimic the slow connection of a modem, but will give you some idea of bottlenecks that may not be obvious through a fast hard disk. If your chosen style is slow to load, take this opportunity to revise it as best you can, before its too late.

The last consideration is the browser on the users machine. Some HTML tags work in different machines in different ways. Later browsers support later and more advanced versions of HTML. These problems need to be considered during the design process. A minimum design specification should call for Netscape Navigator 3 and Internet Explorer 3 as the minimum design standard. Any features not supported by these browsers need not be ignored, but users should be given an alternative if they are using an older browser. Differences between browsers will be covered in a later lesson.

With your information map and your style defined its is just a case of getting on with it. Speed up the build process by making a template of your style outline. With this you only need to worry about filling in the blanks with the information your target audience is looking for.

   
Previous - The Design Process Next - Web Design
   
   
You may contact us by telephone on +44 (0)1942 723111 or by post to
Alucard House, Willowfield Grove, Ashton, Wigan, WN4 9NN, England.

Home | Software | Products & Services | Hosting Plans | Hosted Sites | Design Help | Lessons
Alucard Inchoate Ltd, developers of PC Solutions since 1979.