Simple Web Sites

Browsing the web, you may have seen many sites which use the capabilities of the web to the full. Or maybe you haven't, because you got fed up waiting for it to download and went somewhere else instead. Web pages do not have to be loaded with graphics and widgets to be useful. In many cases, features are used as toys which actually detract from the usability of the site. It is possible to create an effective and informative site by keeping it simple. This document discusses some of the issues involved.

Bring up the source to this page and take a good look. The most complex feature used to be the Javascript used in a toolbar. It was only an optional extra, and duplicated browser functionality, so in the end, I got rid of it. There also used to be a frames-based interface to this site, which relied on extra documents. This was another added-extra and wasn't essential to the site. It is quite difficult to make such an interface invisible to browsers which don't support frames and in the end, I came up with something else.

The very first line is an XML declaration. Ignore it. The next lines tell us that this is an XHTML document, and the version of XHTML used—XHTML 1.1 in this case. Most of the tags concerned with presentation are not available in this latest version and shouldn't be used. Instead, Cascading Style Sheets are used to determine how the page looks. More on that later.

The next line indicates where the HTML starts, and that it's in English—proper British English. If you go right to the very end of the source, you'll find </HTML>—a closing tag indicating the end of the HTML.

Every HTML document has a head section and a body. The head of this document contains its title, and some linked-in documents. The title is the text which will come up in the title bar of your browser (and in search engine results), so keep it short but informative. The first <link> tag points to a stylesheet. If you are looking at this page with a stylesheets-capable browser, you get coloured text, different backgrounds and other stuff. Without stylesheets it looks plain, but you can still get around and all the information is there.

This site has moved over to using stylesheets to handle all the presentation. Keeping content and presentation separate is a good way of ensuring accessibility. There is other stuff which can go in the header, but you're unlikely to need it for a while. For example, the other <link> tags provide added navigation facilities in some browsers—those which don't support them will just ignore them.

The head should also contain meta-information, a description and keywords, for search engines. I haven't written it for this page yet, but you can see an example in the source of the home page.

The <body> tag indicates the start of the content.

The whole of the page content is in a <div> named "holder". This allows the background texture as a border, but for the text to be on a plain background, and so easier to read. Three paragraphs within another division follow, which show the reader where they are in the site, give the page title, and provide a navigation bar. This is part of the standard 'look' of the site. If you want to keep it really simple, just put your title between <h1> and </h1> tags at the top of the page. The line automatically breaks after a header tags (you can go down to <h6>).

[216-colour table] There are some important points which need to be made about graphics. Different platforms display colours onscreen in their own way. GIF supports up to 256 colours but these colours will appear differently on different machines, and a graphic can contain colours which the designer never intended on some platforms. There is little which can be done to make things better on Unix and Linux machines, but there is a 216-colour cube available which gives good results on both Macintoshes and Windows-based machines, and experience has shown that graphics using this colour table look fine under Linux. A few minutes with a search engine should find a Photoshop CLUT. Using the PNG file format avoids all of this trouble.

Look at the <img>;tag used to insert the graphic—it is similar to a link, the <src> attribute indicating the location of the graphic. I have aligned the image to the left of the page—the text wrap happens automatically. This, and the spacing atrtributes are leftovers from an old version of the page, and should really be done in CSS. The <alt> attribute provides an alternative for people using character-based browsers and special browsers for people with visual disabilities, which read the page out loud. You should always provide this—it makes the site more accessible. The hspace and vspace attributes put some space around the image so the text doesn't come right up to it. The height and width are given so you can read the text even if the graphic hasn't arrived yet, because the browser knew what size space to leave for it.

Another thing to remember is download time. Graphics can dramatically increase the time it takes before someone gets to read what you have to say. Keep them small and reduce the colour table as far as possible.

Browser support is another major issue. Not all the browsers have the same features. This does not mean that you have to avoid features unique to a single browser - tags which are not understood are simply ignored - but they should not be essential to your page. Use the feature to provide a little extra for those who have that particular browser, but ensure that your page still looks good and is usable without it. Related to this is the ability to specify a font - don't bother, you don't know anything about the reader's computer, monitor or the fonts they actually have available to them. Trust the user to have set up their browser to use fonts which they can read easily and, if you're using stylesheets, just stick to specifying serif, sans and the other generic types. Macintosh users should take a look at iCab, a browser produced by a German company. It can be used to check your HTML according to the <!DOCTYPE> declaration, or the version of HTML specified in the preferences. Its error reporting is so useful, I'm now using it to check documents on my web sites.

If you are still following the source, you will have come to the main text. Note that each paragraph is enclosed by <p> and </p>. This leaves a blank line between paragraphs. If you just want to go onto the next line - if you want to publish some poetry, for example, you would use <br> at the end of each line. As angle brackets (greater-than and less-than signs) have a special meaning in HTML - they indicate tags, I have had to replace them in this paragraph with 'character entitites'. These are codes representing the characters and a list of them can be found in any good book on HTML. The ones you will need the most are &#034; - the quote mark (") and &#163; - the pound sign (£). Notice how I had to use entities to represent the ampersand and hash signs here.

Book recommendations:

There are hundreds of books on the market all about creating web sites. Trust me, most of them are more useful shredded and used to make compost. Some of them are genuinely useful. Anything published by O'Reilly and Associates will be sound. HTML: The Definitive Guide by Chuck Musciano and Bill Kennedy is exactly what is says it is and rarely leaves my desk. The latest edition includes a good introductory chapter on Cascading Style Sheets.

My main CSS reference is Cascading Style Sheets: The Definitive Guide by Eric A. Meyer. This is another O'Reilly book. I wish they'd hurry up and give us more than a Pocket Reference for XML!

A final hint: before uploading your files to your server, proof-read them and get rid of the inevitable typos and other mistakes.