Webpage Creation

Tips, methods, guides, suggestions, advice, instructions, etc, for a user-friendly website (and to please a computer science student).

What is a webpage?

A webpage is textual data rendered as a visual element with layout and graphics. Webpages are retrieved from web servers using a web browser.

Webpage data is represented in a complex tree called HTML. It may contain Cascading Stylesheets for layout and JavaScript for interactivity.

What’s the problem?

HTML is intended to be human readable. The problem is that humans tend to write it and web browsers compensate for that. This leads to sloppy webpages and bad practices.

Okay, why does that affect me?

It probably doesn’t, but it does affect others in some scenarios. See the following table for examples.

How do I fix this?

Separate content and layout

Pretend that you do not have stylesheets, JavaScript, Flash, or images. See if you can answer yes to these questions:

1. Can you navigate to each page?
2. Are headings clear?
3. Can you get to what you want quickly?

HTML by hand

Avoid writing pure HTML by hand. Although it may look right on your browser, it may not so on more strict browsers. You can easily forget things like escaping the ampersand symbol for example. At least run your HTML through an HTML validator such as the W3C HTML validator.

Make it simple and make it fast

It has to load fast. Things such as advertisements and JavaScript can significantly slow down the loading of a webpage. Large blocks of ‘div’s can make it computationally intensive. If you see any sign of CPU usage greater than a few percents by your browser, you are doing it wrong.

Stylesheets

Never specify an absolute text size.

I’m not comfortable reading your small text. Reading size 8pt text on a mobile device, with a 3.5 inch 800x480 screen, is impossible. Reading 10pt text on a large display is impossible for those who cannot see well. (I’m aware that this is in 10pt, but you can blame Google Sites for that.)

Never assume that Arial, MS Comic Sans, Times New Roman, Courier New, etc. is installed on the reader's computer.

I don’t have these fonts because they arn’t free. Use the generic names ‘sans-serif’, ‘serif’, and ‘monospace’ as appropriate.

When specifying a background colour, do not leave the text colour undefined.

Let’s say you have defined the background to be pure white and that is your stylesheet. The problem is that you assumed that the text colour is black. I previously tried to use a dark theme on my computer, but I had to give that up. The theme uses a dark background with a light coloured text. As a result, viewing webpages became if as everything is covered in snow.

The same goes for vice versa: when specifying a text colour, do not leave the background colour undefined.

Avoid specifying content absolute widths.

It makes it difficult to read on small mobile screens and difficult to print out on a printer. If you are going to use absolute width sizes, define it under the media selector of ‘screen’.

JavaScript

Don’t use JavaScript unless you can seamlessly integrate it as if you hated JavaScript.

- Never use ‘javascript:popup('pageLocation');’ for ‘a’ tag ‘href’s.
  - That is not a URL. It does not go anywhere.
- Never use ‘#’ for ‘a’ tag ‘href’s and then an ‘onclick="goToPage('pageLocation');"’.
  - I do not have JavaScript. I will go nowhere.

Don’t use AJAX unless you use the ‘hash’ variable.

You store data in the hash variable to keep a URL during page navigation. It will show up in the URL after the #.

Don’t use popups.

Your readers will never see them, even if they don’t have popup blocking enabled.

DHTML is dynamic but it’s too late-1990s.

Example: A DHTML drop-down menu mimics the behaviour of the common GUI drop-down menu. They are used to hide and group tools and operations. They are not for site navigation because they are not consistent. You can already think of operations when you see ‘File’, but things like ‘Art’ has too much of a broad meaning.

Use JavaScript libraries.

There are many free libraries that do it right and do it fast. (An example is JQuery.) It helps make sure they your code works on all JavaScript browsers.

Flash

Provide a text version or reasonable alternative.

We're sorry, but you do not have the latest Flash plugin to view this paragraph.