Guides‎ > ‎

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.
 Scenario Problem
 Blind person Webpage uses Flash only
 Clicking on a link doesn’t do anything Webpage links uses only JavaScript
 Using Flash plugin on a browser that does not implement layered rendering Drop-down menus are covered up by Flash
 Webpage uses JavaScript Browser does not have JavaScript
 Webpage uses lots of elements Browser hangs on mobile device (CPU speed is only  200MHz or less)
 Webpage uses Flash only User refuses to use the Flash plugin
 Can’t read anything Misuse of stylesheets
 Best viewed in MS Internet Explorer or Netscape Navigator with 800x600 screen resolution Webpage creator living in the 1990s
 Uses popups Computer's graphical interface does not have a concept of "popups"
 Document parsing errorHuman forgot to close tags, escape entities such as & with &, did not specify document encoding, did not use a HTML validator

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.

Advertisements

The worst thing is slapping a Flash video advertisement right in the middle of your page so that text flows right around it. Or putting a banner ad so that readers think they visited the wrong site.

Comments