|
| This was originally written in several
components, dating 1995 - 1999. Portions of this was when I was working
for Landcare Research. Presumably some ownership,
strictly speaking, belongs to them. It would be very hard to sort out
which bits.Mind you, computing technique isn't
really their focus |
Web Design strategies.
The initial explosion of the world wide web has spread a tool
originally intended for
scientific collaboration in turned it into something that tries to be
all things to all people.
HTML and the Web need to have many uses: Brochures for companies,
internal document
sharing within companies. This has put an ever increasing amount of
stress on a tool that is
ill-designed for the purpose it is being used. New developers have a
tendency to develop
for the platform they are currently using. Also shown is a "coolness"
factor, and new
language features get added simply because they're available.
This document represents my current state of mind on the
design of
web pages.
I view the internet as a communication medium. The web has (I believe)
been stretched to
breaking point by those wanting to duplicate brochures in it. Adobe
Acrobat is more suited to this than the HTML considered vanilla on the
web.
Note: I've just seen many of these points
made in
great
clarity, and better than I had organised them, in Lincoln D. Stein's
book:
How to set up and maintain a Web Site. URL to follow at 11.
Contents
In the period since Tim Berners-Lee invented both Hypertext Markup
Language (HTML)
and Hypertext Transfer Protocol (HTTP) as part of a new system for
first CERN and later
the National Center for Supercomputing Applications (NCSA), the
standard that defines
has been "defined" by many differing sources. While originally the
standards were owned
(as many open Internet standards are) by the Internet Engineering Task
Force (IETF) and
has officially been given to the World Wide Web Consortium (W3C), many
pseudo versions
have been released. Both Netscape and Microsoft have added proprietary
extensions to their
browsers in a misguided attempt to steal a larger market share over the
other, and the W3C
have released several standards in a desperate effort to provide a
formal document of
current practice.
Unfortunately, these developers have attracted their share of
developers. Many sites have
"Best viewed in Browser X" tags. A growing and increasingly vocal group
have since
sprouted "Best viewed in Any Browser" tags as a direct backlash against
this.
Writing your pages to a given standard ensures all browsers
who meet
that standard will
view your content adequately. Using earlier version of the stand
ensures
Netscape aren't the people who make the standard. This belongs
to
another group, the
Internet Engineering Task Force (IETF), a group of volunteers who have
been responsible
for all the major Internet standards. The HTML standard has changed
several times. The
way to ensure that your code meets the required stands the test of
time, by making sure it
adheres to a real standard, and doesn't just look good in a particular
product. Validation
services exist that will point you toward the inconsistencies in your
code. There
are good
technical reasons for this.
HTML is a language for text layout which implies functions for
text
marked up in certain
ways. Just because you want a differing text size between the 1st and
3nd headers doesn't
mean you should use H1 and H3 to do it. Some browsers may
summarize Heading fields
for use as glossaries.
While this is not ideal, it is definitely true that different
browsers will display the same page
differently. Writing code that is correct in both syntax and spirit
will help ensure that
viewers, regardless of environment, will get the meaning of your pages.
For example, if you forget to close a <TABLE> tag,
Netscape
will not attempt to display
anything from that <table> tag onwards. This may leave large
portions of your text
invisible. MSIE will assume a </TABLE> on the end of your
document, but this may not
have been your intent.
Don't be afraid to split up your message between several pages
(especially index pages).
Some people pay for the volumes they download from their provider, and
don't really want
to pay for information they're no interested in.
On the other hand, if you have a reasonable amount of
material, it
is all related, and all parts
will age equally, put them all on one page. WWW pages can
scroll, so feel free to write a fair
amount on one web page.
Web sites are (or should be) designed to be viewed. But to get
viewers, they need to be told
about you! There are several avenues for this.
Search engines. While search engines may or may not eventually
stumble across your site,
some have URL's where you can go to submit your details to them.
Directory services, of which Yahoo!(tm) is the one most people
know
of, are good mechanisms
for getting referrals from surfers who are interested in your specific
topic.
A good way of keeping viewers coming back is to change your
content
(while remaining
within the topic) often. Give people a reason not only to visit once,
but to return on a
regular basis.
| Also, if your writing is for a skilled audience, bear
in
mind that these users want access to information they understand. Don't
make them fight
your design for it. |
Many users have invested considerable time and effort into
learning
how to use their
computers. Forcing them to learn new navigation techniques to work
through your site is
unlikely to make
Images, when used well can add greatly to both the visual
aesthetics
of a page and it's
ability to convey information. However, when images are switched off,
the design impact
can be greatly reduced.
ALT: adding ALT attributes to your IMG tags as a descriptor to
help
users decide whether
they should load your image. Comments like "A Picture of Sales Rep" and
"An Important
navigational tool" encourage the user to load the image, where "Click
here" or nothing do
the opposite. Adding more meaning to a click like "Click here to visit
our Sponsor" is better,
as it helps the user make judgement on the potential content of the
image.
HEIGHT and WIDTH: Images, when scaled are done by the client.
Use
the HEIGHT= field
in the IMG tag to set this, and the width will be scaled
proportionally. If the image is
considerably larger, set it up as a link direct to the full image.
Image maps are fine if you can guarantee that both you and
your
viewer have bandwidth
coming out of your ears. Unfortunately, in Cyberspace, no you can tell
your terminal is a
dog. While I was a tertiary student, I used to surf the Internet. My
tertiary institution was
connected to the net via a 28.8 modem. During peak (8am - 7pm)
bandwidth was scarce.
Sites with huge image maps on their initial page (Check out the White House for a prime
example of this) annoy me. If you're going to use image maps, use them
for things like
Toolbars, and keep the same on every page, so I only have to load them
from the disk cache.
Make your text-only front page the default (index.html) instead of a
choice.
One of the options in one of the newer versions of HTML is
background wallpaper. Ideally,
this should be relevant, and not stand out. Using a graphic tool to
grayscale or emboss your
image is a good idea. The content is important, not the background.
Choosing pastel shades
to match graphics on your page looks good.
You should also bear in mind that the user can configure their
browser to override your
settings. If you choose to write in white text on a black background,
you should consider the
repercussions if the user prefers to view all pages on a white
background, while leaving the
text color to default.
Even if you choose to ignore every single word I've said
otherwise
here's one you shouldn't
miss: Test your pages. Test every single page. Load every
single image. Follow as many of
the links as possible. View your pages using as many different browsers
as possible (at least
Netscape and Internet Explorer). Find the earliest browser you can, and
test with that. Spell
check your pages. Get someone else to proofread them. Ensure every
single external link
works (do this periodically). View your site on an alternative platform
(Mac, or maybe
WebTV).
The Internet is an interactive medium. Invite your users to Leave the author a
note.
If you intend to hand out your URL in non digital media (i.e.,
print), you should include
indexes in every sub-directory to ensure that people who only remember
part of it can get to
what they want.
If your focus is providing data to the world, as opposed to
just
being cool, you should try to
bring together the people who create the data, and the data itself. Why
should the working
data and the presentation data have to be moved to the web site to be
presented ? Just get
the web software to read it as it is used. Simply program pages in
languages like C, Tcl, and
Perl. CGI is great, as it keeps the data you present to the world up to
the minute, by
generating your pages as the need arises.
Putting Click here as the text for your hyper links is not a
good
idea. You can't guarantee
that the remote user is using a mouse. Some browsers (like Microsoft Internet Explorer ) will (an
option) print out
all the links in a document in a table at the end. Using meaningful
labels makes this much
more useful. If, however, you're sure that the target
If you use frames, makes sure that links leaving your site
restore
the window to its original
state. Telecom NZ doesn't, and the
result is really shocking. At least, when I looked, they
didn't.
Darwin's concept of "survival of the fittest" (a.k.a. "Natural
Selection") is a useful technique
to apply to web development. Simply put, if you see a page on the web
that you believe has
good design you can try to apply similar techniques to your site.
Also, reading source code of other sites is a good method of
learning more advanced coding
techniques. I suspect a substantial of web developers learnt by this
method (I know I did).
For the interested, there are numerous sites devoted to the
creation
of web sites (like this
one). I recommend Jakob Nielsen's www.useit.com
, and www.webpagesthatsuck.com .
However, these only hold true if you're writing for users with
unknown technology. If
you're writing for an intranet you can guarantee certain features, and
design in an effort to
leverage these features. Developers on an intranet (especially if it's
within a single location)
can pretty much be assured their users will be running a specific
version of specific browser,
have it configured in a certain fashion, and have a certain amount of
bandwidth (Netscape
4.0 with images, style sheets and Java on a 100Mb/s LAN, for example)
Comments on usability still hold true though.
URLs mentioned:
| Link |
Site title |
Site Comment |
| http://www.useit.com/ |
Jakob Nielsen's Site |
Dr Nielsen, a former Sun Distinguished engineer, writes
about
many topics involving end-user
interactions with computers in general, and the web specifically. A lot
of his opinions are reflected here |
| http://www.webpagesthatsuck.com |
Web Pages that Suck |
The school
of good web design by avoiding obvious mistakes |
| http://espnet.sportszone.com/ |
ESPN Sportszone |
Concise, well designed, friendly sports news. Up to the
minute. |
| http://www.yahoo.com/ |
Yahoo ! |
The original Portal site |
| http://www.whitehouse.gov/ |
The Whitehouse |
The U.S. center of government, originally had an
un-navigable
image map |
| http://www.adobe.com/ |
Adobe, Inc. |
Adobe make Acrobat, a very nice product which renders
documents consistently, using an "as printed" metaphor, where the web
deals more in "layout intent" |
- Banner Advertising
META-keywords - Reciprocal links
- Log Analysis
Dominic J. Thoreau
dominic_thoreau@bigfoot.com
I welcome feedback on this document. Anything that I agree
with
will be folded in a later version.
This is version 2.0
|