|
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.
[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).
  
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.
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.
|
