Web Page Design

There are two philosophical points that are important to learning web page design.

The first is that you need to look at a lot of web pages, good and bad, to see what works and why.  The web is a new medium and we don't have a lot of experience building web documents.  In addition, the things that you can do on the web keeps changing.  Often, this gives us new elements to work into our pages.

That may sound like "anything goes."  That's not true.

Behind all this are some basic design principals.  There are also some things that are considered proper design "behavior" relative to the use of the web.  Before you set off on your own, you need to show that you have a good fundamental grasp of the general rules of design and that you know a lot about how the web works.  

Design History

The web as we know it now was started relatively recently, in about 1993.  The original goals were ambitious at the time.

The orientation was to support scientists.  There were no substantial commercial activities on the internet then, except for things like email.

Scientists who were working on large multidisciplinary, international teams needed a way to exchange publications faster.  By letting them format their documents to look like publications (instead of email) and particularly with their inclusion of illustrations, scientists would have what they needed.

One of the main constraints was that some scientists had big expensive computers on which they could see the pages.  Others had very primitive viewing capabilities, by comparison.  So an early decision was that the capabilities of the local viewing computer would be very flexible.  This was a very democratic decisions.

The early web developers also wanted to make it easy for people to join in this system.  They thought that all you should have to get a document ready for the web was to type in a few simple formatting codes.  This was something that all these scientists were used to doing; simple editing of text files.

Original Need: Simple Design

That's where it all started.  Most of the content was text.  A few different type sizes were needed.  There were also a few illustrations.

A feature that I haven't mentioned in the design is something that you all know about.  These are the links between the documents.  They way that these were embedded made it very easy to navigate from document to document.

The scientists had gotten what they needed.

Initial Implications

The people involved in the early building the web had some distinct ideas on how it should develop.

It should be standards based.  This means that no matter who produces a web page, it can be viewed using a single browser.  The problems that were prevalent between word processors, each with its own document formatting information, were to be avoided.  Everyone would follow the same set of rules.

Things were kept simple.  Most people had relatively slow internet connections.  Simple format codes and pages that have mostly text can be moved quite well over such slow communication lines.

Not only was there no commercial use of the web, it was strongly discouraged.  This was to be a system for scientists.

The size of a web page would be determined by the person viewing the page, not the page's author.  This comes from the general use of multiple windows in interactive environments.  It also accommodates people with smaller monitors.

It had to be possible to add new features without causing difficulties to people with old versions of the browsers.  This would all the use of the system even while it was being developed.  As new features are incorporated in a document (such as a table layout), an older browser that doesn't know anything about this formatting will at least show as much as it can.

Poor quality computer monitors were to be tolerated.  Some of these were expected to show only text.  According to the web builders, that would be OK.  The person using a poor display wouldn't get as much information, but they would get something.

These were all good decisions at the time.

New Web Tasks

The basic web infrastructure was soon seen to be much more general than its early developers imagined.  In particular, the new popularity of relatively inexpensive computers with good color graphics displays allowed a massive shift in the direction of web development.

Gone was the idea of mostly text web pages.

With the rich use of graphics, the web quickly shifted to being a commercial marketplace.  (This did require the permission of the National Science Foundation, the primary sponsor of the underlying communications network.)

E-commerce quickly developed.  With this, there was an addition of advertising to web pages.

Attracting people to pages is pushing the development of interactive elements on the page, such as roll-overs (text that changes when the mouse is on it).  Even things like dynamically sorting information on the page without having to return to the server, are seen as advantages and are being developed as additional design capabilities.

Databases not only link to provide information to web pages, but web pages are now custom created on the fly.

The web is undergoing a massive redesign as people discover better ways to deliver and present information.

Some Good Web Pages

Some web sites attempt to monitor the web design trends.  They provide one source of information that is useful to people who want to learn to design good web pages.

Basic Design Criteria

There are a number of important attributes of all web pages.  These design criteria aren't just for web pages, of course.

Look at this list.  Much of this is common sense.

Critical Issues

There are other issues that are critical, too.

Copyright laws are important and must be respected.  Although the people who built the web made it easy to copy information from other web pages, this doesn't mean that you can use this information.  You should assume that anything you find on the web belongs to someone else.  Unless you have their explicit permission, you can't use it on your web page.

There are community standards of good taste and appropriateness.  You shouldn't use the web to create a racial hate page or a page that incites violence, for example.

Institutions who sponsor web servers and communications links have their own prohibitions.  For example, educational institutions don't allow commercial or "adult" pages.

Finally, there is a general respectfulness of not overusing the internet's bandwidth by transmitting unnecessary information.  This goes for servers, too.  You don't want to store lots of unnecessary, large files.

Page Rendering Capabilities

As you design web pages, you need to be aware that not everyone will see your pages in the way that you see them on your system.

There are different browsers and even with the same brand of browser, there are big variations between versions of the software.

The same version of the browser may not look the same on a PC as it does on a Mac.

Also, some people have separate software, such as plug-ins, that provide special capabilities.

Browser Versions

Some sites monitor which browsers are being used to view their pages.  Any serious site should probably do the same.

You can see from this example, from a University of Illinois Engineering Lab, that more people use Internet Explorer than Netscape.  Further, most of the browsers were relatively new.  Version 4 of both browsers was a significant upgrade and provides access to a large number of important design features.

If this lab decided to use version 4 features, they would be missing about 10% of their clients, however.

Whether this is acceptable is an important question for them to answer.

In the same way, you need to know your audience and their capabilities.  This requires on-going monitoring.