Web page design tips

All dreams spin out from the same web ... old Indian saying

    Home    
    Logbook    
    Patterns    
    Truths    
    Tales    
    General    
    What's new    
    Site index    


1982 or 83, my first computer - the Commodore VIC 20. That's the tape drive on the floor in front of the box. I had a computer but no chair to sit on.

2013
I have been involved in the creation of five personal web sites over the past twelve years and my own site has gone through numerous redesigns. The following is what I have learnt from books and from my own experience...

1. Should support commonly used browsers such as Internet Explorer, Firefox, and Chrome, etc.

2. A web page should include:
   a) An informative title
   b) The creator's identity
   c) When it was created (could be included in the copyright information)
   d) Where it was created
   e) At least one link to a local home page
   f) The 'Home Page' URL

3. Users want to get information in the fewest possible steps. This means you must design an efficient hierarchy of information to minimize steps through menu pages.

4. Most information on the web is intended to be read nonsequentially. Readers appreciate short 'chunks' of information that can be located and scanned quickly.

5. Be consistent and predictable. This includes the page layout, type, size and colour of text, location of menu, location of links, etc.

6. Minimize graphics. Your average user will not be patient enough to wait for a large volume of graphics to download.

7. a) Use gif images for page design elements, diagrams and images that must not dither. Use jpegs for photographs and types of images that are not severely compromised by compression.
   b) Reduce the file size of gifs by reducing the number of colours. Reduce jpegs by increasing the compression.
   c) Reduce the image size to the actual size that will be seen on the page. Do this in ever decreasing steps so that the image still retains its sharpness and clarity. This will save load time and file space.
   d) Web graphics need to be low resolution, 72 pixels per inch (ppi or dpi).
8. a) Black text on a white (or very light grey) background yields the best overall type contrast and legibility. Black backgrounds are significantly less legible, even when white type is used. Coloured backgrounds can work if the colours are kept to very muted tones (light greys and light earth tones).
   b) Suitable background patterns should be small gifs of a homogeneous texture.

9. a) Common fonts from Microsoft include Arial, Courier New, Georgia, Times New Roman, Verdana. These fonts have generous character spacing, large x-heights and open, rounded features that make them better for online reading. Because not everyone has the same fonts it is recommended that more than one font type be included in the html code by using the following method ... <font face="verdana,arial"> If Verdana is not available Arial will be used in its place, and vice-versa.
   b) For ease of reading there should be no more than 14 words per line (a rule which I frequently break).

10. HTML editors, like Front Page and Claris, tend to put in a lot of unnecessary, repetitive code. As an example, the file size on one page I worked on was 2.7Mb (yes, 2.7Megabytes!) big. By removing the unnecessary code (it seemed like every line of text contained the 'font' information) I was able to reduce the file size down to 270kb. This exercise requires a basic knowledge of html code but is well worth the time.

11. Use tables wherever possible. Avoid using frames unless it is absolutely necessary (for those that turn their graphics off it requires clicking on each frame in order to view relevant graphics).

12. A growing number of designers declare 800x600 to be the 'standard' screen resolution. However, there are still millions of 640x480 users (schools etc).
Mind you, todays computers use a 1024 resolution monitor.
To avoid having to use the horizontal slider at the bottom of the page I limit my page width to 760 for 800 resolution and 960 for 1024 resolution.

13. A knowledge of CSS is handy but not totally necessary (these web pages were designed before CSS existed).

Web etiquette.
There is an unspoken rule that information contained on other web sites should NOT be copied and included on your own site or any other site. The correct approach is simply to add a link to the relevant site.
Web page layout is copyable (there are only so many ways to lay out a page). However it is obviously better if you can come up with an original idea for your page.

References (I wish these books had been around when I designed my first page)...
Web Style Guide by Patrick J. Lynch and Sarah Horton
Web Design in a Nutshell by Jennifer Niederst
Creating Killer Web Sites by David Siegel

General Sayings I Books and videos I Suggested equipt. I Ice cream I Wild flowers I Silver screen
Flyfishing Links I Web page tips I Thoughts I I remember I Crossword

Pat Donoghue, Canada, ©1997