The
following notes provide advice and guidance on good practice in relation
to website design.
Pages
titled:
Each individual web page should have a meaningful title. The page title
will display in the title bar of the browser window and when someone saves
a bookmark of the page, the title will be what appears in their bookmark
(favourites) list. Clearly there are benefits in choosing a title that
gives a clear indication of the contents or purpose of the page.
Back to top
index.html:
The first page in a website should be named index.htm or index.html and
be located in the root directory of the site. This file will be automatically
sent to the browser if no other file is specified. If the first page is
named incorrectly, the site may not load at all.
Back to top
Navigable at common screen
resolutions:
Consider the screen resolution that the target audience is most likely
to use—this could vary from site to site. Generally content of all
pages should be accessible on a screen displaying 800x600 pixels without
the need for horizontal scrolling. However, this recommendation may change
in the future if more people move to using larger screens. The need to
scroll vertically is less of an issue although viewers should not be forced
to scroll down the page to find important information or navigation buttons.
They may not realise they have to scroll and leave the site without finding
what they were looking for.
Back to top
Keywords and Description
meta tags used:
For a search engine to display a meaningful description of the site, use
of the description meta tag is required. Use of the keywords meta tag
is also important. When someone types something into a search engine,
it returns a list of the sites whose keywords match the words entered
by the person searching.
Back to top
Web safe fonts used:
There are thousands to fonts to choose from when designing with type,
but unfortunately only a very few will usually display on someone else's
browser. For someone to view your typographic masterpiece on their browser,
they will have to have the same fonts installed or their computer as you
have on yours. Fortunately, there are a few fonts that almost all computers
have installed by default. These have become known as web safe fonts.
They are:
Helvetica, Courier New, Times New Roman, Verdana,
.Arial. Arial Black, Comic Sans.
Despite this it is still recommended that alternative fonts are always
provided in case the preferred font is not available, e.g. "Verdana,
Arial, Helvetia, sans serif".
Back to top
Font size:
Part of cross platform and browser testing really — text can display
at different sizes in different browsers. Check that the text is readable.
Back to top
Web safe colours used:
Historically web pages were viewed on monitors that could only display
a maximum of 256 colours. With this in mind, in 1994 Netscape defined
a standard set of 216 web safe colours that could be relied upon to display
appropriately on all platforms. The remaining 40 colours varied on Macs
and PCs so were not included in the web safe palette.
Today the vast majority of computers are able to display millions of different
colours so the need to stick with the web safe colours is greatly reduced.
There are many websites, that can provide the hexadecimal or RGB (red,
green, blue) colour codes for including in HTML code, two examples are:
www.w3schools.com/html/html_colors.asp,
or www.dtp-aus.com/htmlchrt.htm.
Back to top
Alt tags (labels) used:
Alt tags are text labels for graphics. While a page is loading, the alt
labels will display where graphics are going to appear. Alt tags are essential
where the navigation of a site relies on graphics. If for some reason
a graphic fails to load or display, or a user has the display of graphics
turned off, the alt label should give the user enough information to be
able to find their way around the site.
Back to top
Page (file) size:
Add together all the file sizes for the html file and images which make
up a web page. The total should be no more than 60k (approximately 60,000
bytes) for the first page in a site. If the total is more than this, the
page will take too long to load and visitors to the website may move on
to another site.
The total 'page' size for subsequent pages in a site can be larger, but
it's a good idea to warn visitors if there’s anything over 150k.
It depends a little on the target audience of your site, e.g. if it is
aimed at children, it's probably best to keep page totals down to as small
as possible, to minimise the risk of confusion caused by a long loading
time.
Back to top
Information is accessible
without a plugin:
If the site has content which requires a plugin (e.g. Flash), there should
be some alternative way to access information, just in case the visitor
doesn't have the required plugin installed. There should also be a link
to a site where the plugin can be downloaded.
Back to top
File formats appropriate:
Images with areas of flat colour should be .gif files, with as few colours
as possible in the colour palette, whilst retaining an acceptable image
quality. Images which are photographic or contain gradients, should be
saved as jpg files, with compression set to reduce the file as much as
possible, whilst retaining an acceptable image quality.
Back to top
Image quality:
Do the images on the site look OK? If they look fuzzy, blurry, pixelated,
dark, light, or just plain bad, there are a number of things to check.
Most of the problems which occur with images are caused by poor image
capture or manipulation. The original may have been poor quality (garbage
in–garbage out), or scanned at a low resolution and then mercilessly
scaled up in Photoshop. Images should be scanned at around the same size
as they will be published. Enlarging an image in Photoshop is bad.
Other nasties that occur at the manipulation stage can include incorrect
proportions—an image is stretched or squashed so that is looks unnatural
(especially people), or brightness, contrast or colour levels have been
set incorrectly.
Are the images displaying at original size? The IMG tag in HTML has a
couple of values attached to it, which force the browser to display an
image at an exact size. If an image on a web page has been adjusted in
size after the page has been uploaded, the browser may try to display
the image at the size defined by the original values in the IMG tag. This
can result in very distorted or pixelated images displaying in the browser.
Deleting and re-importing the image in an HTML editor can fix this.
Back to top
Appropriate style:
Is the style appropriate for the target audience? A site with a creepy,
gothic style may not be appropriate for a company selling washing machines.
The site on the right has a mysterious, blobby interface design. This
is probably fine if the intended audience is web savvy and doesn't mind
exploring. AltaVista's target audience however, is very broad, and could
include a number of first time web users. The design is clean, simple
and obvious.
Back to top
Consistency of
style:
The style of every page within a website should have some common elements.
These could be colour, imagery, type style, layout, look and feel, or
interface elements. Without a consistency of style viewers may assume
they have left the site when a new page loads.
Back to top
Navigation obvious:
Sites should not be confusing to get around (unless that's the intention).
It can be good to test a site with a few people from the target audience.
If they have trouble finding their way around, or miss important parts
of the site, the navigation needs to be made more obvious. The navigation
should also be consistent throughout the site.
Back to top
Colour scheme doesn't
hinder navigation:
Check that any background colours (or images) used don't conflict with
text and text link colours, making the text hard to read. For example,
visited link colour should be different from the background colour, or
non-linking elements such as body text should not be blue, users might
assume they are links. The example on the right has a disastrous background
image, which makes the text almost impossible to read.
Back to top
How many clicks to the info?
The site should offer an efficient user experience. For example, a visitor
shouldn't have to click through many links, and wait for several pages
to load just to get an email address or phone number. Count the number
of clicks required to get to information the target audience may want
–could it be done more efficiently?
Back to top
Line length:
People find it hard to read text which goes all the way across the screen.
A short line length is much easier to follow with the eye, and is one
of the reasons that magazines and newspapers are set in columns. Ideally,
lines of text on web pages should be a rnaximurn of 10 to 12
words or 500 pixels in length. The Peachpit Press site is a good example
of a site with short line length, and it works well at a screen resolution
of 640x480 pixels too. The example sitting behind it, however, is much
more difficult to read.
http://www.peachpit.com/
Back to top
Spelling and grammar:
Spelling should always be perfect, grammar should be correct and appropriate
for the target audience and use of capitalisation should be consistent
throughout the site.
Back to top
Priority and eyeflow:
When a page loads, what’s the first thing you notice? Is that thing
the most important elements on the page? If not, there may be priority
issues. Your eye should be drawn to the most important thing on a page
first, then be lead through the rest of the page. This is known as eyeflow.
Colour, contrast, size and style are all factors which can contribute
to how much impact an element may have. The ihug site is so busy–many
of the elements are animated too, that it's hard to know where to look.
The example from the Apple site demonstrates much better priority and
eyeflow. The viewer's eye initially focuses on the iBook, then rests on
the text sitting below.
Back to top
Use of white space:
Awkward gaps and pockets of nothing on a page can make a page hard to
read and unappealing. It's important to have areas of space in a layout
to give the reader's eye a rest, but they should be in places that fit.
Back to top |
