Teaching
History Online
Number
5: April, 2001
Designing for the Web
Andrew
Moore
If you don't want to read a long and perhaps boring
article, but would like merely to find, on the Web and for free, all
the tutorials and software you need to become a Web guru (the current
Net-cliché for a design expert), then check out this URL: http://www.shunsley.eril.net/armoore/resource/basics.htm
Telling you this
upfront will save me the bother of giving links in the rest of this
guide, to the various tools and resources I recommend. But if you
want the beginnings of an explanation, keep reading.
This guide is
NOT about the most important thing on your sites - the content of
the teaching resources. You are all more expert than me in teaching
your subject areas. I have taken it as read that you can write good
lessons. This guide is about design ideas and how to achieve them.
Many writers and many more readers will never even notice most of
the things I recommend here. And many of you will have strong ideas
of your own, which you are not going to change because of my views.
Computer technology
may be the biggest source of innovation in language and culture since
the printing press. But behind all the hype, the Web is just another
medium for publishing text. It has novel features: some may be cosmetic
and trivial while others have more radical potential. As an immature
or emerging technology it has not yet settled into clear forms, though
it allows individuals to publish their work, without the traditional
editorial filtering of print publishers.
In a way, the
merit of any Web site or resource lies in what it does for the visitor
- to provide information, entertainment or opinion, perhaps. The value
of the whole World Wide Web in its vast entirety is first that it
probably contains somewhere the thing you seek, second that there
are portals and search engines which can deliver this thing to your
desktop, and third that this process is quick, if not instantaneous.
What
are you trying to do?
Amid the riot
of Web sites that are little more than fashion statements (often anti-fashion
statements) about their authors, teachers really have something to
say. We should have real-world subject knowledge, and understanding
of how to communicate this to particular audiences. Although the independent
Web author is not necessarily answerable to an editor, he or she may
still need an internal editor, to create a resource or collection
of resources with a clear subject focus and sensitivity to the potential
audience.
Who
is the audience?
We may start with
a sense of the people for whom we think that we are writing, but discover
later that we have quite other audiences. For example, I have found
that many visitors to my site are student teachers, although I set
out to create resources for students primarily, and to a less degree
their teachers. I hadn't thought of teachers in training, but now
I see them as among the most valuable of visitors - they are very
receptive to ideas for teaching and for use of the new technology.
Thinking about the audience may lead to certain choices about style
- do you address visitors directly, using second-person pronoun forms
or use an impersonal style?
As teachers we
are fortunate in having a ready-made audience of young people, who
have a lot of trust - they probably won't expect to be entertained,
not by me, anyway. (If they want fun, they will use quite different
sites.) But they will expect to get help with their schoolwork.
Nevertheless,
it makes sense for your site to let visitors know at once whether
they have come to the right page or not. If you go to Spartacus, it
should not take you long (if you are unfamiliar with the revolting
slave) to work out that this is a site for teaching history. As well
as splashing words like "teaching" and "school"
or "learning" all over the page, you might want to put an
explicit statement on the home page (or every page) - what this is,
for whom it is intended, and so on. Although the ATW logo should be
some kind of guarantee, you may also want somewhere to let people
know your credentials. As a qualified teacher in the UK, you have
already fulfilled certain basic criteria - you know a subject, you
can teach, and you are a safe person to be in contact with children.
This may seem like the lowest common denominator, but it is reassuring
to children and parents. If possible, give conventional or real world
contact information - perhaps a school or business address.
Assuming, therefore,
that you have a sense of purpose, that you have ideas for teaching,
and some kind of editorial focus, how can you turn this into the best
Web site ever for teaching drama, citizenship or biology? Let's start
with some of the most basic techniques and tools.
Learning
how HTML works
I was forced by
a cruel but high-minded tutor to write raw HTML in Notepad. Should
you do likewise? Not necessarily. Knowing how HTML works is very useful
for some things - like making pages display in the way you want them
to in different browsers. But the HTML specification changes constantly,
and perhaps already contains more detail than any mortal being can
learn in a lifetime. Moreover, much of this relates to features like
the disgusting <blink> tag, which should never appear on any
civilized Web document. If you want to know more, you will find lots
of free tutorials online, or in the Help files of various applications.
You can also learn a lot, by using the "view" menu on your
browser, and selecting "source" (in Netscape Navigator,
it's "Page Source"). What this will show will either be
helpful or intimidating according to what you know, and what software
tools the writer used to create the page.
Text
editors and WYSIWYG HTML editors
If you like the
idea of writing straight into HTML (I do, but I'm in a minority here),
then you need a text editor. There are plenty available as freeware
or shareware, which have most of the tags, attributes and other elements
of HTML built in, so that you can add them with a mouse-click or keystroke.
How do you know what your Web page looks like? Easy - check it out
in your browser. In fact, if you are serious about design, check it
out in as many different versions of the most popular browsers as
possible. If you can also check your pages as they appear at different
screen resolutions, this is even more helpful - the easy way is to
own more than one monitor, though if you have only the one, you can
normally resize it to a lower resolution. (Warning - do NOT try to
set your monitor to a higher resolution than it has currently, unless
you are 100% sure that your system has the video memory to support
it. Otherwise the screen will dissolve into something vaguely suggestive
of a Channel 4 experimental broadcast or a stroboscope, and you will
curse me loudly.)
More common, and
perhaps more popular are HTML editors which have a WYSIWYG (what you
see is what you get) interface - like the free FrontPage Express,
and the expensive FrontPage, like HotMetal Pro or Dreamweaver. These
show you more or less how your pages appear in a "design view".
For most people doing most tasks, most of the time, they will make
things easier. But they will also do things you don't quite understand.
Some of them may offer to take over the design of your whole site.
This requires a lot of faith from you. If you use FrontPage you will
soon have vast numbers of files, and no idea what they are or what
they do.
HTML editors will
usually come with lots of design templates that can make your site
seem well organized and elegant. The pages they create will normally
require much larger files than the equivalent page created in a text
editor. Perhaps the best approach is to have BOTH kinds of editor,
and to be able to choose which is appropriate for a given task - using
a text editor for basic text entry, but calling on the HTML editor
for daunting tasks like designing tables.
What
equipment is your audience using?
Designing Web
sites on your PC can be misleading, as you don't have to wait for
pages to load. Opening the same pages over a connection to the Internet
will be a lot more painful. The most common connection will use a
V90 or 56Kps modem, and many visitors may still be using older, slower
connections. If a page contains lots of images, this will slow the
load time measurably. If the images are shown at a large pixel size,
this will slow it further still. If the images move, or if you add
sound, you will slow things down to a crawl, or worse.
Many of your visitors
will use a screen with a resolution of 640 by 480 pixels. (The most
common resolution is 800 by 600.) Should you design pages so that
they will look acceptable at the lower resolution? You can allow pages
to resize to fit the screen - though this can make a column of text
unreadable on a wide monitor - or can fix the width of a page or text
column to a given pixel size. You will find many commercial sites,
especially portals, which use this approach - and you will find it
on some of the ATW Web sites, including mine.
Text
and images
The purpose, focus
and style of your site should determine the balance between text and
images. In designing pages, you should think of a kind of narrative
or sequence and structure for documents. What is the function of images
in this? Are they crucial to understanding, helpful as interpretation,
or merely there as embellishment?
This will vary
massively with different subjects - in some cases (you should judge
for yourself) a pictorial representation is essential. But you need
not let this slow your load times down. Use an image editor to create,
for every large or animated image file, a small thumbnail that indicates
the larger original. Place the thumbnail image on the page, as a hyperlink
to the larger file, with an alert to the user that opening or downloading
the image or animation may take some time. While this is happening,
the parent page can still be visible, if you use the TARGET="_blank"
attribute and value for the HREF tag.
You can, though,
do a lot to make text more accessible - by using colour and enlarged
or reduced size, as well as bullet points (unordered lists), blockquotes
and tables. Unlike images, these elements add almost nothing to the
size of the HTML file.
You will probably
need at some point to use image-editing software to create your own
images for hyperlinks, logos and banners. There are lots of excellent
programs available as freeware or shareware.
Site
structure, hyperlinks, redundancy and the three-clicks rule
Unless you are
a genius and/or very lucky, you will eventually decide that you don't
like some things about the way you have designed your first Web site.
You may keep doing other things to work around the problems, but there
will come a time when you take more radical action and start again.
I cannot save you from this, but I may be able to lessen the pain
with some hints here.
If you can create
a site that, from the first, uses different folders for different
kinds of file or different themes or subjects, then you will find
it easier later to keep track of things. It is particularly helpful
to have separate folders for different kinds of resource like images,
or, say, PDFs. Of course, you need to be aware of this structure when
you create hyperlinks - and this can at first be hard for writers
using text-editors.
Hyperlinks are
arguably the most powerful and useful feature of HTML. But they are
also much abused. The worst abuse is to have links that take you to
other links and yet other links before you arrive at real content
(or leave the site in disgust). If you have explored the online version
of the National Literacy Strategy at http://www.standards.dfee.gov.uk/literacy/,
you will know what I mean. This site has some good content, but refuses
to show you it without your exhausting your mouse fingers.
Two excellent
principles to guide your use of hyperlinks are redundancy and the
three-click rule.
· Redundancy
means that you have more than one way to get from A to B (so at least
one is redundant when the other is chosen). You don't know where users
will look for a link, so it's as well to have the links in two or
three places - across the top, down the side; as text, as icons with
ALT text and so on.
· The three-click
rule means that from your home page, your visitors should be able
to navigate to the final frontier of your site, in three mouse clicks.
It might not be fair to apply this, say, to the BBC's site. But there
are plenty of sites (some from the UK government) that could have
kept the rule, yet fail miserably. To keep the three-click rule is
fairly easy, if you build it into your design.
Use
of colour and background images
It is possible
to display your text on a fake marble or zebra-hide background, but
learn from the history of paper production - for any extended text,
black print on a white background is easiest for the reader. Colour
can be used for emphasis, or to show different levels of heading (the
browser defaults use size only for this). If you use Arial as your
preferred font, then you may use a given colour instead of italic
style, which does not display clearly on screen in Arial. If you really
want to use an italic style, you need to keep to a Times font, such
as Times New Roman. You can also use colour to mark or highlight blocks
of text - a very good way is to create a table with a singe data cell,
set the border to 0 and have a light background colour.
Where you want
to use colour to signal some critical detail, you should avoid contrasting
use of red or green, which many people (mostly men) cannot readily
distinguish. (This is, I think, why Microsoft uses blue, grey and
white for its default interface colours.)
Coordinating colour
in image editing software can be haphazard - even if it looks all
right on your screen, it may look different in another browser or
on another monitor. There are programs that can help you match colours
in pairs or even triplets. It is also worth using simple number sequencing,
if you understand hexadecimal colour codes. These use the number base
of 16, which is why, after 9, there are letter characters (A=10, C=12,
F=15). The code gives the number value for red, green and blue, in
succession. So, #FFFFFF (maximum for all three colours) is white,
while #000000 is black. #FF0000 is bright red, and #0000FF is bright
blue. Any code where the characters are the same for all three colours
will be some shade of grey - such as #555555 (dark) or #DDDDDD (light).
So if you are creating colour effects, and using these number codes,
then experiment by increasing the values incrementally, or by changing
the value for one colour only.
Frames
and tables
There are some
good reasons for using frames and they almost certainly don't apply
to your site or mine. If you have a captive audience already, and
want to control navigation, frames can be useful. But they are hard
to manage well - you may end up opening a frame in a frame window
in an infinite sequence, with smaller and smaller versions of the
whole page down to the last pixel - it's worth seeing once in your
life, perhaps, but scary. More to the point, search engines dislike
frames - and you want to befriend the search engine, as it is the
source of much of your traffic.
Tables, on the
other hand, are, after hyperlinks, the next best thing about HTML
- for page layout and design, they are your best source of control.
Want to break text up into blocks? Use tables. Want to keep image
files in position? Use tables. Want to fix the width of text on a
page to 630 pixels, so it looks the same on a 640 or 1,024 pixel wide
screen? Use tables. By creating tables and setting various background
colours, having the border set at 0 (so no border appears) or by altering
text size or alignment, you can achieve striking design effects, without
increasing the size of the file.
Style
sheets
Browsers have
default styles for various elements in the HTML specification - like
headers of different levels, or blockquotes or emphasis. But you can
override these by setting your own style descriptions. These can appear
inline (at the point in a page where they are to apply) but this is
laborious, and doesn't promote consistency. They can appear in the
head section of each HTML document - but this means you need to make
sure that the same style sheet is in each. Or they can be kept in
a separate file, to which each HTML document refers. I use style sheets
on all my sites. If I change an element in the style definition, such
as making H5 headers green, not red, then all H5 headers in all documents
on the site will change.
Style sheets can
be tricky to manage, but they are very powerful. For ensuring that
a site has consistent design, they are hard to beat. But to make them
work for you, you need already to have a sense of a hierarchy of headers
and other elements.
Imitation
is the best form of flattery
One very good
way to design pages is to find sites with design that you like, save
the HTML file, and then replace the original text with your own text,
or some holding content, until you are ready to put in the text you
need. The point here, is to retain table structures and perhaps some
colour coding, while replacing entirely the text and images in the
original.
Finally
A few simple rules
can save you bother later. Try these out:
· White
is the best background colour.
· Avoid
background images, especially textured backgrounds.
· Animations
are annoying.
· Use common
fonts only.
· Tables
are good.
· Frames
are not always good.
· Don't
solicit traffic until your site is ready for it - be patient. If you
can't be patient, work quickly. If you can't work quickly you have
to be patient, after all.
· Avoid
"under construction" signs. All Web sites are always under
construction.
· If you
must show an uncompleted page, tell visitors in plain English what
will be there and when it will appear.
· Less
is more.
Andrew
Moore
armoore1955@bigfoot.com
