If you don't want to read a long and perhaps boring article, but would like merely to find, on the Web and for free, all the tutorials and software you need to become a Web guru (the current Net-cliché for a design expert), then check out this page:

• Essential free software for the Web

Telling you this upfront will save me the bother of giving links in the rest of this guide, to the various tools and resources I recommend. But if you want the beginnings of an explanation, keep reading.

Writing for the Web

This guide is NOT about the most important thing on your sites - the content of the teaching resources. You are perhaps more expert than me in teaching your subject areas. I have taken it as read that you can plan good lessons. This guide is about design ideas and how to achieve them. Many writers and many more readers will never even notice most of the things I recommend here. And many of you will have strong ideas of your own, which you are not going to change because of my views.

Computer technology may be the biggest source of innovation in language and culture since the printing press. But behind all the hype, the Web is just another medium for publishing text. It has novel features: some may be cosmetic and trivial while others have more radical potential. As an immature or emerging technology it has not yet settled into clear forms, though it allows individuals to publish their work, without the traditional editorial filtering of print publishers.

In a way, the merit of any Web site or resource lies in what it does for the visitor - to provide information, entertainment or opinion, perhaps. The value of the whole World Wide Web in its vast entirety is first that it probably contains somewhere the thing you seek, second that there are portals and search engines which can deliver this thing to your desktop, and third that this process is quick, if not instantaneous.

What are you trying to do?

Amid the riot of Web sites that are little more than fashion statements (often anti-fashion statements) about their authors, teachers really have something to say. We should have real-world subject knowledge, and understanding of how to communicate this to particular audiences. Although the independent Web author is not necessarily answerable to an editor, he or she may still need an internal editor, to create a resource or collection of resources with a clear subject focus and sensitivity to the potential audience.

Who is the audience?

We may start with a sense of the people for whom we think that we are writing, but discover later that we have quite other audiences. For example, I have found that many visitors to my site are student teachers, although I set out to create resources for students primarily, and to a less degree their teachers. I hadn't thought of teachers in training, but now I see them as among the most valuable of visitors - they are very receptive to ideas for teaching and for use of the new technology. Thinking about the audience may lead to certain choices about style - do you address visitors directly, using second-person pronoun forms or use an impersonal style?

As teachers we are fortunate in having a ready-made audience of young people, who have a lot of trust - they probably won't expect to be entertained, not by me, anyway. (If they want fun, they will use quite different sites.) But they will expect to get help with their schoolwork.

Nevertheless, it makes sense for your site to let visitors know at once whether they have come to the right page or not. If you go to, say, the Spartacus history teaching site at www.spartacus.schoolnet.co.uk, it should not take you long (even if you are unfamiliar with the revolting slave) to work out that this is a site for teaching history. As well as splashing words like teaching and school or learning all over the page, you might want to put an explicit statement on the home page (or every page) - what this is, for whom it is intended, and so on. Although a logo from the Association of Teacher Websites or the Virtual Teacher Centre should be some kind of guarantee, you may also want somewhere to let people know your credentials. As a qualified teacher in the UK, you have already fulfilled certain basic criteria:

• you know a subject,
• you can teach it, and
• you are a safe person to be in contact with children.

This may seem like the lowest common denominator, but it is reassuring to children and parents. If possible, give conventional or real world contact information - perhaps a school or business address.

Assuming, therefore, that you have a sense of purpose, that you have ideas for teaching, and some kind of editorial focus, how can you turn this into the best Web site ever for teaching drama, citizenship or biology? Let's start with some of the most basic techniques and tools.

Learning how HTML works

I was forced by a cruel but high-minded tutor to write raw HTML in Notepad. Should you do likewise? Not necessarily. Knowing how HTML works is very useful for some things - like making pages display in the way you want them to in different browsers. But the HTML specification changes constantly, and perhaps already contains more detail than any mortal being can learn in a lifetime. Moreover, much of this relates to features like the disgusting blink tag, which should never appear on any civilized Web document. (It will display only in Netscape Navigator.) If you want to know more, you will find lots of free tutorials online, or in the Help files of various applications. You can also learn a lot, by using the view menu on your browser, and selecting source (in Netscape Navigator, it's Page Source). What this will show will either be helpful or intimidating according to what you know, and what software tools the writer used to create the page.

Text editors

If you like the idea of writing straight into HTML (I do, but I'm in a minority here), then you need a text editor. There are plenty available as freeware or shareware, which have most of the tags, attributes and other elements of HTML built in, so that you can add them with a mouse-click or keystroke. How do you know what your Web page looks like? Easy - check it out in your browser. In fact, if you are serious about design, check it out in as many different versions of the most popular browsers as possible. If you can also check your pages as they appear at different screen resolutions, this is even more helpful - the easy way is to own more than one monitor, though if you have only the one, you can normally resize it to a lower resolution. (Warning - do NOT try to set your monitor to a higher resolution than it has currently, unless you are 100% sure that your system has the video memory to support it. Otherwise the screen will dissolve into something vaguely suggestive of a Channel 4 experimental broadcast or a stroboscope, and you will curse me loudly.)

WYSIWYG HTML editors

More common, and perhaps more popular are HTML editors which have a WYSIWYG (what you see is what you get) interface - like the free FrontPage Express, and the expensive FrontPage, like HotMetal Pro or Dreamweaver. These show you more or less how your pages appear in a "design view". For most people doing most tasks, most of the time, they will make things easier. But they will also do things you don't quite understand. Some of them may offer to take over the design of your whole site. This requires a lot of faith from you. If you use FrontPage you will soon have vast numbers of files, and no idea what they are or what they do.

HTML editors will usually come with lots of design templates that can make your site seem well organized and elegant. The pages they create will normally require much larger files than the equivalent page created in a text editor. Perhaps the best approach is to have BOTH kinds of editor, and to be able to choose which is appropriate for a given task - using a text editor for basic text entry, but calling on the HTML editor for daunting tasks like designing tables.

What equipment is your audience using?

Designing Web sites on your PC or local area network can be misleading, as you don't have to wait for pages to load. Opening the same pages over a connection to the Internet will be a lot more painful. The most common connection will use a V90 or 56Kps modem, and many visitors may still be using older, slower connections. If a page contains lots of images, this will slow the load time measurably. If the images are shown at a large pixel size, this will slow it further still. If the images move, or if you add sound, you will slow things down to a crawl, or worse.

Many of your visitors will use a screen with a resolution of 640 by 480 pixels. (The most common resolution is 800 by 600.) Should you design pages so that they will look acceptable at the lower resolution? You can allow pages to resize to fit the screen - though this can make a column of text unreadable on a wide monitor - or can fix the width of a page or text column to a given pixel size. You will find many commercial sites, especially portals, which use this approach - and you will find it on some of the ATW Web sites, including mine.

Text and images

The purpose, focus and style of your site should determine the balance between text and images. In designing pages, you should think of a kind of narrative or sequence and structure for documents. What is the function of images in this? Are they crucial to understanding, helpful as interpretation, or merely there as embellishment?

This will vary massively with different subjects - in some cases (you should judge for yourself) a pictorial representation is essential. But you need not let this slow your load times down. Use an image editor to create, for every large or animated image file, a small thumbnail that indicates the larger original. Place the thumbnail image on the page, as a hyperlink to the larger file, with an alert to the user that opening or downloading the image or animation may take some time. While this is happening, the parent page can still be visible, if you use the TARGET="_blank" attribute and value for the HREF tag.

You can, though, do a lot to make text more accessible - by using colour and enlarged or reduced size, as well as bullet points (unordered lists), blockquotes and tables. Unlike images, these elements add almost nothing to the size of the HTML file.

You will probably need at some point to use image-editing software to create your own images for hyperlinks, logos and banners. There are lots of excellent programs available as freeware or shareware.

Structure and hyperlinks

Unless you are a genius and/or very lucky, you will eventually decide that you don't like some things about the way you have designed your first Web site. You may keep doing other things to work around the problems, but there will come a time when you take more radical action and start again. I cannot save you from this, but I may be able to lessen the pain with some hints here.

If you can create a site that, from the first, uses different folders for different kinds of file or different themes or subjects, then you will find it easier later to keep track of things. It is particularly helpful to have separate folders for different kinds of resource like images, or, say, PDFs. Of course, you need to be aware of this structure when you create hyperlinks - and this can at first be hard for writers using text-editors.

Hyperlinks are arguably the most powerful and useful feature of HTML. But they are also much abused. The worst abuse is to have links that take you to other links and yet other links before you arrive at real content (or leave the site in disgust). If you have explored the online version of the National Literacy Strategy at www.standards.dfee.gov.uk/literacy, you will know what I mean. This site has some good content, but refuses to show you it without your exhausting your mouse fingers.

Redundancy and the three-click rule

Two excellent principles to guide your use of hyperlinks are redundancy and the three-click rule.

• Redundancy means that you have more than one way to get from A to B (so at least one is redundant when the other is chosen). You don't know where users will look for a link, so it's as well to have the links in two or three places - across the top, down the side; as text, as icons with ALT text and so on. (This is alternative text which displays when you move the mouse pointer over the image, or when the browser is set not to display images; the alternative text is important for visually-impaired users, who have software which reads the text aloud).
• The three-click rule means that from your home page, your visitors should be able to navigate to the final frontier of your site, in three mouse clicks. It might not be fair to apply this, say, to the BBC's site. But there are plenty of sites (some from the UK government) that could have kept the rule, yet fail miserably. To keep the three-click rule is fairly easy, if you build it into your design. (And yes, you can get to any page on this site in three clicks, starting from the home page, or any other page.)

Lumping and splitting

Are you a lumper or a splitter? Some designers (not me) believe that no page should contain very much text for the visitor to look at, as this can be intimidating. But this may mean that to give the visitor lots of information, the designer makes him or her use lots of mouse clicks, and perhaps not find what he or she is looking for. A page with lots of information may take longer to load, and be challenging to visitors to the site where it appear. But once it is loaded in the browser, the visitor can move around the page more quickly. And if you save to your PC (on a hard drive, floppy disk or other media) a long document that is on one page, you do not need to locate lots of files, and perhaps cause links not to work.

So, how can you avoid frightening your visitors with masses of text? The answer is to put lots of navigation on the page - hyperlinks to anchors on each section of the HTML document. You can also make sure you have quick links back to the top of a page, and clear space between sections of text. And don't forget to fix the width of text columns, so the users does not have to swivel their heads from side to side, or see long strings of text.

There is no right or wrong here. It is a matter of writing in a structure that is suitable to your audience. If your site is aimed at casual viewers, you may need shorter passages of text, than if it is written for people who are prepared for detailed content. In general I prefer to lump - and this page is a good example of lumping.

Use of colour and background images

It is possible to display your text on a fake marble or zebra-hide background, but learn from the history of paper production - for any extended text, black print on a white background is easiest for the reader. Colour can be used for emphasis, or to show different levels of heading (the browser defaults use size only for this). If you use Arial as your preferred font, then you may use a given colour instead of italic style, which does not display clearly on screen in Arial. (It looks like this.) If you really want to use an italic style, you need to keep to a Times font, such as Times New Roman.

You can also use colour to mark or highlight blocks of text - a very good way is to create a table with a singe data cell, set the border to “0” and have a light background colour.

Where you want to use colour to signal some critical detail, you should avoid contrasting use of red or green, which many people (mostly men) cannot readily distinguish. (This is, I think, why Microsoft uses blue, grey and white for its default interface colours.)

Coordinating colour in image editing software can be haphazard - even if it looks all right on your screen, it may look different in another browser or on another monitor. There are programs that can help you match colours in pairs or even triplets. It is also worth using simple number sequencing, if you understand hexadecimal colour codes. These use the number base of 16, which is why, after 9, there are letter characters (A=10, C=12, F=15). The code gives the number value for red, green and blue, in succession. So, #FFFFFF (maximum for all three colours) is white, while #000000 is black. #FF0000 is bright red, and #0000FF is bright blue. Any code where the characters are the same for all three colours will be some shade of grey - such as #555555 (dark) or #BBBBBB (light). So if you are creating colour effects, and using these number codes, then experiment by increasing the values incrementally, or by changing the value for one colour only.

Frames and tables

There are some good reasons for using frames and they almost certainly don't apply to your site or mine. If you have a captive audience already, and want to control navigation, frames can be useful. But they are hard to manage well - you may end up opening a frame in a frame window in an infinite sequence, with smaller and smaller versions of the whole page down to the last pixel - it's worth seeing once in your life, perhaps, but scary. More to the point, search engines dislike frames - and you want to befriend the search engine, as it is the source of much of your traffic.

Tables, on the other hand, are, after hyperlinks, the next best thing about HTML - for page layout and design, they are your best source of control. Want to break text up into blocks? Use tables. Want to keep image files in position? Use tables. Want to fix the width of text on a page to 630 pixels, so it looks the same on a 640 or 1,024 pixel wide screen? Use tables. By creating tables and setting various background colours, having the border set at 0 (so no border appears) or by altering text size or alignment, you can achieve striking design effects, without increasing the size of the file.

Style sheets

Browsers have default styles for various elements in the HTML specification - like headers of different levels, or blockquotes or emphasis.

But you can override these by setting your own style descriptions. These can appear inline (at the point in a page where they are to apply) but this is laborious, and doesn't promote consistency. They can appear in the head section of each HTML document - but this means you need to make sure that the same style sheet is in each. Or they can be kept in a separate file, to which each HTML document refers. I use style sheets on all my sites. If I change an element in the style definition, such as making H5 headers green, not red, then all H5 headers in all documents on the site will change.

Style sheets can be tricky to manage, but they are very powerful. For ensuring that a site has consistent design, they are hard to beat. But to make them work for you, you need already to have a sense of a hierarchy of headers and other elements. (This site uses style sheets. But it took me a long time to make them behave. If not well-managed, they are especially likely to exaggerate differences between browsers and platforms.)

Imitation is the best form of flattery

One very good way to design pages is to find sites with design that you like, save the HTML file, and then replace the original text with your own text, or some holding content, until you are ready to put in the text you need. The point here, is to retain table structures and perhaps some colour coding, while replacing entirely the text and images in the original.

A few simple rules

Finally, a few simple rules can save you bother later. Try these out:

• White is the best background colour.
• Avoid background images, especially textured backgrounds.
• Animations are annoying.
• Use common fonts only.
• Tables are good.
• Frames are rarely good.
• Don't solicit traffic until your site is ready for it - be patient. If you can't be patient, work quickly. If you can't work quickly you have to be patient, after all.
• Avoid "under construction" signs. All Web sites are always under construction.
• If you must show an uncompleted page, tell visitors in plain English what will be there and when it will appear.
• Less is more.
  

Download this guide

You may also like to download this guide as a PDF (portable document file). You can open the document in your browser window, or save it (download) to a local drive in your computer. If you are using Microsoft Internet Explorer, then a left mouse-click will open the file in its associated program, and a right mouse-click will give you a menu, from which you can choose to save the file. In this case, you can use the save as and browse options to specify where to save. If you are using Netscape Navigator, a left mouse-click will give you a menu, from which you can choose to open or save the file.

To read portable document files, you need reader software, such as Adobe Acrobat Reader ™. This is available as a free download from Adobe Systems Inc. at www.adobe.com.

• Download this guide as a PDF

Please acknowledge my authorship by giving the URL of any pages you use, and/or include the © copyright symbol. Suggestions for improvement are welcome. Thank you.

© Andrew Moore, 2002; contact me

Search Now:	Use the search box on the left or the link below to go to Amazon.com for books, video tapes, DVDs and much more. Go to Amazon.com Home Page
Search Now:	Purchase in the UK: use the search box on the left or the link below to go to Amazon.co.uk for books, video tapes, DVDs and much more. Go to Amazon.co.uk Home Page