More Essays  | [Bill's Home]

Three Generations of WWW Pages

Pocket PC format MS Reader
Pocket PC format Mobipocket
Pocket PC format Acrobat

16 June 2001

think it's amazing the way that WWW pages have changed over such a short period of time. We can all remember the grey background of the page (see the window on the right-hand side), with basic text layout, and pages full of hypertext links. I find it very difficult to keep up with professional WWW developers (as they obviously have more time, and money, to spend on the development of their pages). I've found the only way to keep up with them is to download the HTML code, and analyze how they have implemented it.

I reckon that WWW pages have gone through three generations of development, so I've tried to distill some of the main features of the generations, so that you can spot them when you seen them.

FIRST GENERATION
First generation pages are easy to spot. At one time they all had grey backgrounds, but Microsoft Internet Explorer changed this by setting the default background colour to white. The figure below shows an example first generation page. One of the main design limitations was the limitations in the video screen (which gave a limited number of colours and a limited screen resolution) and the lack on available bandwidth. Thus most designers tended to use text, rather than graphics. There where also no proper WWW page development tools, thus WWW pages were typically created by hand within a text editor (see graphic on the right-hand side).

I reckon the main characteristics are:

Grey background (with Netscape). This became a white background with Microsoft Internet Explorer 3.

Basic graphics. These graphics were typically standard clip-art images, such as icons to illustrate help facilities or e-mail links.

Blue underscored hypertext link, and red underscored hypertext links for visited links.

Default text format. Typically Times Roman.

Graphic rules. These were required as the text layout was so difficult to control, so graphics dividers were used to split text up into sections. Here's an example:


 

SECOND GENERATION

Second generation pages are a bit less easy to spot, but there are a few pointers. The main thing to find are frames, and a typical characteristic is the scrolling bar on one or more of the frames within the page, and graphics buttons. Typical signs are:

 

Frames based. Typically with a scrolling bar on one of the frames.

Client-side includes with JavaScript or VBScript. A good sign of this is the Back hypertext link, which was implemented with: Javascript:history.back().

Animated GIFs, possibly with tacky animated graphics (see above).

Blue underscored hypertext link, and red underscored hypertext links for visited links.

Graphics buttons.

Improved text format (especially if the page has been exported from another package, such as Microsoft Word which tended to preserve the font types).

Graphic background. Initially it seemed a good idea to insert a graphic as the background to the page, such as:

<body background="notepad.gif">

But, unfortunately it can make many pages unreadable. Nowadays this feature has been dropped in most pages, but you can still spot a few around. One of the biggest problems is with repeated background images, which uses one version of the graphic, and then repeats it to fill the complete page.


THIRD GENERATION
Third generation sites have moved more towards proper typographical layout. The usage of CSS files has helped a great deal in improving the layout of pages, and also for making it more consistent. A great advancement has been in the move away from GIF and JPEG images towards the enhanced graphics provided by PNG and Flash/Shockwave. PNG allows for transparent background, and compressed graphics, and Flash/Shockwave supports streamed and compressed animations (and are thus replacing the rather limited GIF file format, which really just created an animation with a series of consecutive images). The underscore on hypertext links seems to be being phased out, and the blue/red colours for hypertext links seems to also be making an exit. Most pages now do not differentiate the colours between the visited link, and one that hasn't been visited. The problem with frames, especially with NetScape, has meant that they are being quickly replaced with a table-based format, which is more logical, but requires a little bit more work, as each page must be developed individually.

Important pointers are:

Hover action for hypertext links (although this doesn't really work with Netscape).

Table based. A table-based approach is more logical in structuring the page as a single entity. Designing pages using frames make it easy for the developer, as pages can be reused within a standard indexing structure, but most users struggle with the sloppy interface that it often produces. A frame-based system also does not allow a proper URL reference for a page.

Dynamic content with with Flash/Shockwave. Too much animation can be confusing for the user, but a little can add a little bit of interest to a site. The Flash plug-in is now fairly standard, but new versions often require to be downloaded.

Smoother graphics. Most professional WWW sites are now designed as a single entity. Today there are no real problems with the time that graphics take to download, thus designers try to create pages as single integrated entities, which use graphics and text to the maximum effect, whereas at one time designers had to choose between replacing graphical content with text-based equivalents.

Style sheets (CSS). These files have been a godsend, as the allow text to be laid out in a proper typographical style. For example the text in this page is defined in a CSS file with:

P
{ font: 10pt Verdana, Arial, Helvetica, sans-serif; color: #000000;
margin-right: 6px; margin-left: 6px; left: auto}

which defines the default text (which is the Paragraph format) with a Verdana or Arial or Helvetica font of size 10 points. The text colour is BLACK (#000000), with 6 points in the left and the right margins. The great thing about CSS styles is that a single change will be reflected throughout all of the pages which use the referenced CSS file. This makes WWW pages more dynamic, and more configurable. It's amazing the difference a little change of fonts or change of colour can do.

One of the main changes has been to implement a hover action, and to be able to properly define the font and characteristics of a hypertext link. For example a link can be defined as:

A:link {color: #006699; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; font-weight: normal}

and the visited link can be made the same with the definition:

A:visited {color: #006699; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal}

The hover event can then be defined with a different colour with:

a:hover { color: #0066FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold}

 

Server-side includes with ASP or PHP. Client-side includes, with JavaScript or VB Script have always had problems with incomparability, thus server-side includes reduce this problem, as the server replaces the server-side code (between<% and %>) with standard HTML.

Possibly database-driven, which allows pages to be generated depending on the contents of the database.

 

FOURTH GENERATION
Well, who knows where WWW pages are likely to go, but I think that MSN Explorer (see below), gives a few clues on the future. The main focus will be on total integration of many forms of content (radio, video, and other WWW material), increased personalisation, friendly interfaces and integrated graphics, and layout-independent content (which uses XML to store the content). MSN Explorer has lots of nice little personalization effects, such as knowing the person's name (of course, you've got to log into MSN, and give your e-mail address), and showing the weather in the city that your are nearest to (you can see below that the weather in Edinburgh, is currently 17 deg C, and is partly cloudy - June 20 at 11:30am). It also greets you with a cheery: Good Morning or a Good Afternoon (both as a graphical message and also with a spoken voice), which, I appreciate, is hardly start-of-the-art data mining, but it's a start of the trend to actually integrate the WWW with the users, and develop user interfaces which have the feel that they have been customised for the user. How far will users allow data mining to go? Who knows? But I bet that users have the biggest say. The minute I see my bank details displayed in my details page on the MSN Explorer, you can bet that I'll delete it from my desktop, and trample all over it.

Two good examples of how well integrated MSN Messenger is are:

Electronic mail integration. MSN Explorer checks the Hotmail server for any e-mail, and then shows the user the number of e-mail messages that are unread (in this case I have seven unread messages - oh dear!)

Messaging service. MSN Messenger is a great way to keep in touch with people. It is especially useful in academic as students can get instant access to their tutor, as it does not matter where the tutor is (of course, the tutor has be on-line, to be contactable).

 

A key to the future will be to break the link between content and its layout. Unfortunately, with HTML, it is difficult to do this, but XML will change things. With this we will be able to define the content in a standard form, then we can detect the type of browser, such as a Pocket PC, or a WAP phone, or even a WWW browser, and lay the content out in the most efficient way.

[1st generation]
This is a very funny tongue-in-cheek site, but has all the great elements of a 1st generation site.

Oh you might have a little difficulty reading the page, if you're not Scottish, so here's a few conversions:
Right, youse - Right, everyone.
Hunners of words - Lots of words.
Hunners of work - Lots of work.
Aboot the place - All of the place.
Total cheek - I can't believe that.
Dead upset - Really upset.
Acting the goat - Playing the fool.
Angles Wi' Manky Coupons - Angels With Dirty Faces.
Wean (pro: wane)- Child.
Sweeties - candy.
Wheech them - Hurry them up.
Naebody knows - No-one knows.
Toap - Top.
[More Scottish words]

[2nd generation]
A typical 2nd generation site. It has: graphics buttons for the menu options; some animated GIF files; and is frame-based. It has lots of good content, but lacks a bit of consistancy. In case it changes, here's the most recent screen-shot that I have taken (if you click on it you should get a larger version).


[3rd generation]
The BBC site is a superb example of a 3rd generation site. They have managed to make it easy to use, but they can also regularly update the content. I particularily like the links to related articles. In case it changes, here's the most recent screen-shot that I have taken (if you click on it you should get a larger version).

Right, youse. This is a furst gen site.A typical 2nd generation site. It has big graphic menu items, lots of animated GIFs, and is based on framesOf course the BBC site duzni need tha wordz cunverted, man.
 

 

Comments on this essay

If you've got any comments on this essay (no matter if you agree or disagree with it), please send them to me using the form below.

Details

Name (Surname, First Name):

[Not required]

E-mail:



Your comment

 

Note your comments may be published to a comments pages, but none of your details will be added to the comment, just the date that it was sent. Thank you.