back

     HAPPYMOUSE Basic Web design course      

 This course is for anyone involved in planning, writing or maintaining a web site, whether from a management, publishing or technical viewpoint. It covers suggested standards as well as good practice that can enhance your web pages.

 

  

The web: Understanding the Medium

 

Books have been around for a long time as a medium. We all understand them. We are not necessarily able to explain this understanding; It is like walking; we just do it. It is important to apply this hard-won knowledge to web design, recognising what is appropriate for this new communication channel and what is not.

 

The Bookshop

A bookshop is a colourful place. It has both order and disorder. Books are stacked on the shelves in order of author or subjects. Topical books and leaflets are on display with eye-catching covers. Just the size of a book gives some clue. If you want a Spanish phrase book for a holiday you will ignore the huge dictionaries.

The Web - One page at a Time

The web is different: there are no colours, no sizes, no order. Indeed, there are no visible books. There is just a hatchway with an assistant. If you can name a particular page in a particular book it will be brought to you immediately.

If the page is well designed you can also get a list of some of the pages in all of the books that contain a particular set of words or phrases.

Ask for the "French Revolution" and you will get references to 'A Tale of Two Cities', histories of France and books about architectural revolutions and the use of French windows.

What sort of books?

The web is not a very good medium for novels. It's very good for non-fiction, active catalogues (www.amazon.co.uk), newspapers and pen-pal type information. In youth  organisations, most if not all of our work will be non-fictional. A Youth Services web site will rarely be first choice for world news, scandal, gossip or entertainment, but there is no reason why it should not provide lively and interesting material. It will always be like the reference section in a library.

One page at a time

The 'One page at a time' way that the web operates significantly different and for us as web designers that has many implications:-

Speed
Ideally the page should appear with sub-second response: two or three seconds is acceptable, twenty or thirty seconds is not. Why? Because otherwise your audience will get bored with waiting and go elsewhere. Many factors influence speed but the size of the page (taking account of graphics etc) is always important.

HAPPYMOUSE HINT:               Large is slow, small is fast.

Contents list
Since you can only see one page at a time, a contents list is particularly important. It starts on the home page and this is what allows your audience to navigate your pages.

Links
The page selected may have onward links to other pages. It should always have 'backward' links so that someone arriving at this page can at least discover the homepage (contents list) for the site. It should always have an active e-mail address of a contact for the page. If there are search facilities available these should be evident as well

Clues
It helps to give clues. Think of Victorian novels:

Chapter XI - In Which Our Hero Meets Persons Of Dubious Repute And Finds Himself In A Perilous Situation

in our case, though:


Members – a list of all associate member organisations and links to their web pages.

 

Campsites – information about all our facilities and on line booking

 

 Give some clues about what is at the next level so that people realise that it is worth going on to that level.

 

HAPPYMOUSE HINT:               Leave clues (tease to please)

 

Content
The most successful websites are ones where people come back again and again. They are about content rather than flash gimmicks. Make sure that every page has good content that changes frequently.

Don’t have pages that just say;

 

'Welcome to Bloggs Plumbers. Click here to enter'.

 

 You might as well say;

 

'Here is a home page designed by Numpties. Don't bother to enter because the rest will be just as bad'.


Navigation pages need to have several selections available, sometimes perhaps a list of, say, twenty or thirty. They should not have thousands since that would make the page too big and, hence, slow.

 

HAPPYMOUSE HINT:               Content is King


Colour
Books have colourful, interesting covers, but inside they do NOT have the text displayed in yellow print on a purple background dotted with astrological signs.

They DEFINITELY DO NOT have each page in a different colour scheme. If they did, you would not think 'This looks interesting. I will settle down and read this'. Taken to its logical conclusion this argument would suggest that web sites should all be black text on a white background but this is going too far.

Some use of colour and texture can give a more finished look but it should be used sparingly and consistently. It may be tempting to use different font colours to signal different topics on your web pages. However, you will not be getting the advantage that might be present for a book where you can see the edges of the pages and recognise the pink section or the green section. It will reduce the brand impact. Not normally a good idea (the web doesn't have coffee tables).
You also need to consider accessibility for your audience. Those with visual impairments can see Black on white or white on black more easily.

 

HAPPYMOUSE HINT:               This is web design, not an art class!


Recycling
It is a very good idea to re-use backgrounds icons and graphics as much as possible on different pages. If a page containing icons and graphics has already been viewed and a subsequent page contains the same icons or graphics, they will already have been downloaded and will therefore appear quicker.

This can make a substantial difference to the speed of response while navigating your website.


Branding
In commerce a brand is extremely valuable and can fetch a very high price. If you are proud of your site you will want to establish a consistent brand image. You will want people to realise when they are on your site and when they have left it (remember, one page at a time). However your site will NOT usually attract people to your pages. Your pages MAY attract people to your site. There are not many sites with a brand image strong enough to attract visitors at a site level.

Navigation
Remember that you are training visitors to use your site and to feel at home there. This means that your navigation and your icons need to be consistent.

An encyclopædia or a dictionary may have pictures or diagrams but the navigation (alphabetic, start on the left, bold type) is ALWAYS the same. With each page accessed you are aiming to build up a standard set of navigation instructions for your visitor ('this is how you navigate this site and it will be the same on subsequent pages').

Modularity
On your website you can re-use pages. A picture and some text about, say ‘The Big One’ at Blackpool Pleasure Beach could be linked from an amusement park section, a local attraction section, a historical section or a roller coaster section. If the detail was tightly bound into a page with other roller coasters you would not be able to use it so flexibly.

The same information may be viewed in many different ways. Always look for modularity.


Infrequently used information
It can be tempting to delete information that is not frequently used. This can be sensible. Mostly, though, it is as sensible as deleting from the telephone directory numbers that you haven't used.

Hyperlinks
The web has both advantages and disadvantages with respect to books. A prime advantage is the ability to use hyperlinks, for example 'The film "A kind of Loving" was filmed in Bolton with the ability to click on Bolton and get more information.

The use of hyperlinks within text is good but it should not usually replace the ability to navigate in the conventional manner.

Maintaining integrity
There will often be many links pointing to the same object, both inside your site and from other sites as well. If the object is moved all these links will fail. Trawling for these links can be very time-consuming.

Do NOT move objects around. If for some obscure reason they have to be moved, think twice and think hard. The very least that can be done is to leave a trail.

 

Use of a web site management program like Microsoft’s FrontPage will help to avoid this pitfall

User control
The interactive nature of the web means that the user has more explicit and powerful control of a web site than a reader has of a book. The user can invent his or her own navigation paths. This is what users expect and this is how it should be.

Tricks such as making people go through long chains to raise the number of hits, don't fool anyone but they certainly infuriate.

The web has built up its own Netiquette over many years and experienced users have definite expectations and awareness of good and bad practice.


 

Thinking about creating web pages

 

This part of the course is intended to help you plan and prepare for creating intranet web pages. It covers questions of purpose and scope and practical matters such as the resources required to produce effective content.

 

Why have web pages? - think about why you are doing it and what you hope to achieve.
What equipment will you need? - an explanation of the tools needed to maintain a web.
How long will it take? - factors that will affect timescales.
How do you maintain pages? - how you should approach the maintenance of your web pages.
Quality Control - making sure you get the appropriate review and approval.

 

Why have web pages?

You are likely to be keen about the idea of the web, and sold on the benefits. Before going further, though, it is worth examining exactly why you want to develop web pages, and why they are different from other media. Understanding exactly what you want to achieve from your web pages at this stage will make it more likely that you succeed.

We are familiar with the printed page and the conventions that surround it, but the web is different. The Web: Understanding the Medium gives you an introduction.

Checklist for your web pages - some points to ponder

1. Who is your audience?
2. What are their information needs?
3. What language and style will they relate to?
4. How will web pages fit with other elements in your communication strategy?
5. How can you link your web information with other information you produce?
6. Web pages are more dynamic than brochures and press releases and can be kept up to date more effectively.
7. Improving two way communication through e-mail or forms.


Creating web pages yourself

The creation and maintenance of web pages is fairly straightforward. Publishing with Microsoft FrontPage can done using pre defined templates or you can design your own.


 

What equipment will you need?

You will need:

 

 

How long will it take?

There are many elements that need to be considered when creating web pages, which will reflect in the timescale for the work. Precise timescales are difficult to predict but the following factors will influence project overheads:


Timescales are dictated by the size and complexity of the work you wish to publish. You will need to allow time for revisions and quality control. Don't underestimate the amount of time involved - it could be days, weeks or even months for major projects. (Famously however, one person here is very proud of having designed a site in 6 minutes!)

 

Maintenance of web pages

Once your web pages have been published, the work really begins!

The initial launch is only the first part of the project you are considering undertaking. Adequate planning must be made for ongoing maintenance, revising existing content; deleting old material; adding new features, photographs, etc.

your web site will need a contact for your web pages (a web master) who:


If the pages you are creating have a limited shelf life they should be removed when they become out of date.

You are responsible for keeping your pages up to date and for the process and resources involved.

Web pages that are not maintained on an ongoing basis become outdated very quickly and the initial investment is wasted.

Quality Control

There are two phases for ensuring the quality of your web pages. The first is during the intensive activity to get your pages launched and the second is the ongoing maintenance and development of your web pages to ensure they stay relevant and up to date.

 

Working towards launch

Part of your information planning should be a review with other people in your organisation and you may also wish to road test your pages with users prior to launch.

 

If you are working to a specific deadline, sufficient time for this review process must be built into your project schedule.


Suggested Web Site Standards

 

These are the suggested requirements to achieve a user-friendly web site.

 

Accessibility - so that all web users can access your information.
Accountability for Information - making sure the information on your web pages is accurate.
Acknowledgement - acknowledging external sources of information.
Advertising, Banners and Sponsorship - what is and is not acceptable.
Appropriate Content Policy - keeping to acceptable community standards.
Copyright - keeping within the law.
Corporate Template - achieving a consistent look and feel for all your pages.
Date Format - how to avoid confusion.
Document Downloads - what format to use for downloading.
Domain Name and URL - naming your web pages.
Fonts - size and type.
Frames – why the use of frames is not a good idea.
Graphics and moving text - making effective use of graphics and moving text.
Home Pages - what should your home page include?
Interactivity - allowing two way exchange with web users.
Links - setting up and maintaining connections between pages.
Navigational Icons - guidance on appropriate navigation.
Page Titles - think about your audience.
Photographs of Children - important considerations when using photographs of children.
Plug-ins - what they are.
Portable Document Format (PDF) - how it can be used

 

Creating Accessible Web Pages


"The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect." --Tim Berners-Lee, Director, Web Accessibility Initiative



All web pages must be accessible to as wide an audience as possible and this means taking special care for disabled people. If pages are ultimately published in HTML all web users will be able to access them.


The information revolution has meant that blind and partially sighted people can access the Internet in a variety of ways. Some use 'access technology' such as speech output, hand held Braille display or screen magnification, whilst others require the words on the screen to be easy to read and to contrast well with the background colour. For the first time, people with sight problems or other cognitive disabilities can access enormous amounts of information. Access to web sites is often made difficult or impossible by design which fails to make text easily legible or which employs coding (such as JavaScript) that is inaccessible to access technology.

The commitment by the World Wide Web Consortium (W3C) to lead the web to its full potential includes promoting a high degree of usability for people with disabilities. The Web Accessibility Initiative (WAI), in conjunction with organisations around the world (the RNIB in the UK) is pursuing accessibility of the web through five primary areas of work: technology, guidelines, tools, education and outreach, research and development.

You should be aware that some users will have limitations in viewing your pages because of the browser software they are using. Pages appear differently according to which software the user has and how it has been set up. Our standards make it more likely that EVERYONE will be able to see our information properly.


Accountability for Information

You own your website. You are responsible for ensuring:

Acknowledgements

Always acknowledge external sources of information and in particular the use of registered trademarks in your documents.

This course acknowledges the use of a number of sources of information in the compiling of the these Standards:

Advertisements, Banners and Sponsorship

Advertising and/or banners promoting products or services of a third party organisation can be useful but take care – your audience will quickly get fed up of lots of distractions and they can slow down your site

Appropriate Content Policy

You must provide good clear information which meets with accepted community standards and is in line with the aims and purpose of your organisation.

Unacceptable content includes, (but is not limited to), that which:



Copyright

Authors of literary, dramatic, musical works and computer programs (software) are permitted to charge a fee for the publication or performance of the work in question, although normally copyright is assigned to the company which employs the author(s). It is therefore an offence to copy, publish, adapt or use without the specific authority of the copyright holders other peoples words, images etc.

Please note that any breach of copyright could result in legal action.

There are specific rules on the publication of photographs of children that must be adhered to and are addressed later in this course.

The “Corporate” Template

You should have a single style for web pages that ensures a consistent image throughout the whole of your site. This your audience in navigating the site and lends credibility to the origin and reliability of the information published. The template could consists of several elements.


All of these requirements can be achieved very simply.

 

Date formats

Web sites are inherently international, so different date formats can become confusing. For example in the United states 10.4.2000 can be interpreted either as 10 April 2000 or 4 October 2000. When putting dates on your web pages, all dates must be in text format. Dates should not include st, nd, th or rd, for example 1st October. The date should be in a format that includes the month in alphabetic form - for example 10 April 2000 or 10 Apr 2000.

Document Downloads

It can sometimes be useful to provide a downloadable version as a supplement to your web pages. For example a long document may be broken into several web pages, but it may be useful to provide a downloadable version that can be printed in one go.

Where documents are to be made available to download they can be provided in all sorts of formats. Most people will have access to:

Domain name and URL

All Web pages are allocated a URL (Uniform Resource Locator) under the http://www. domain style. For example the web pages owned by LCVYS are registered as http://www.lcvys.org.uk/


Fonts

Try and be consistent with the font you use and keep it simple. Not all users have “bigfancyfont” and they may not see the pages as you intended. Newspapers use times new roman for a reason and the one that didn’t went bust (Today)!

Do not specify typefaces or font sizes which override the user's default setting - instead accept that they will have chosen whatever font best suits their individual needs. This will also ensure that your pages meet the text clarity requirements of the Disability Discrimination Act 1995 and remain fully accessible.

No frames please, we're British!

The use of frames on web pages is not usually a good idea;

Many people are keen to employ frames in the presentation of their web pages. Opinion is divided on the correct application of a frames environment. The principal reasons why I suggest not using them are as follows:

Browser Incompatibility

Some users have graphical and text based browsers. These find it difficult and sometimes impossible to cope with frames, so you would have to maintain two versions of your site!.

Framed sites are awkward for visually-impaired users to interpret which can compromise compliance with the Disability Discrimination Act 1995.

Speed

A framed page consists of several documents. This often impedes the speedy downloading of a web page and may well alienate the user.

Alienating Users

Users attempting to print out a specific page on a framed site may find this will end in failure.

Bookmarking pages is difficult within framed sites, as they will only be able to bookmark the URL of the home page.

If a framed site has links to other sites (unless the HTML parameter target='window' is used) links will load within the current frame. This will mask the URL of the destination site and confuse the users, also disallowing the linked-to site to be bookmarked.

Design, Navigation and Operational Issues

Framed sites are difficult to implement well.

A web page is small to begin with. Carving it up with unnecessary frames can reduce the usable area to a tiny fraction.

Building a site around frames makes it difficult to navigate and limits you to having a very simple site. The cursor keys do not work unless you click in the frame you want to scroll, and the browser's BACK button may produce unexpected results.

If there is a problem with a framed page, it will be difficult to report since only the URL of the main page will be displayed.

Framed pages cause problems when the browser is called from another application.

There may be copyright issues involved if another site shows up within the framed site. In any case if is unfair to the other site.

Search Engine Problems

Unexpected results can occur when a search engine indexes a framed site. Visitors who arrive on a page in a framed site from a search engine will not be entering through the site's portal and therefore will not see the frame that would normally be holding the page and associated navigational information.

If you think you need to use frames, please, think again!

Graphics and moving text

Graphics and images are effective at making the web interesting, but caution must be exercised.

Large or complex graphics can overwhelm the text and may cause pages to download very slowly. Some graphics can be useful for visual impact but they should be kept to a minimum and have useful information content. The alternative text option within the graphic tag must always be used to provide users with information on the content of the graphic and what size it is so they can decide whether to display it or not.

Using a thumbnail image gives the user the option to view large graphics without affecting the opening download time for the web page.

The use of animated graphics on your site could put you in direct contravention of the Disability Discrimination Act but can add a little spice to a plain page.

Moving text - such as a scrolling "news service" feature – looks good but again,  think about your users.

Home Pages

Your home page is the gateway to your collection of web pages and should explain what the user will find if they enter your site. You should think of it as a 'shop window' telling the user what you have on offer, what will be interesting, informative and useful to them.

The home page should be presented in a way that is user friendly. Before publishing your web pages I suggest you test your pages with people who may use your site and act on the feedback that is provided.

When you are thinking about creating your home page you should consider the following elements:

Interactivity

A major benefit of the web is in providing opportunities for interaction and communication between youyou’re your users. This might be to enable users simply to comment on the information (relevance, ease of finding, presentation, etc.) or, more usefully, to request further information or complete a questionnaire or application from.

Your pages should have a feedback button and contact as part of your corporate template.

Links

Links to Master or Home Pages

As part of your Template you should have a link back to your homepage.

This can be achieved using a page link . You could use a logo or banner as the link icon (you could design your own for this purpose or use many of the free to use stuff found on the web)

This will provide the user with a consistent and predictable way of navigating your site.

Links to Other Pages

Don't duplicate information that exists elsewhere - link to it instead. Researching related information and creating a link from your site will make your site more valuable to the user. Links to other providers' information must be continuously reviewed to ensure that they are still accurate, valid and relevant. Publishing effective and useful pages relies on encouraging the user to find out more. Provide links to other relevant pages in your own collection and to other information collections elsewhere on the web. Web site management programs like Microsoft’s FrontPage will do this for you

Hyperlinks

When creating hyperlinks, do not say 'information about X is available by clicking here' where here is the hyperlink. Instead you should write 'information about X is available' with X being the hyperlink.

Routes Out

All pages must provide a route out - there should be no dead ends. This helps the user move around the information on your site in a logical and structured way preventing them getting 'lost'. This can be achieved by using a 'next' or 'previous' icon for moving around your web pages. This can be achieved using a page link or again you could use a logo or banner as the link icon

Browser Windows

Some web sites use hyperlinks that cause a new browser window to be opened when a specific hyperlink is accessed. This can be useful where you don’t want the user to lose their page but be careful – it can be confusing. If you do use this method, put button or link on it which will close it down and return the user to the original page after use.

Multiple browser windows often confuse inexperienced users, and cause problems to users using access technology to read web pages, and the "Back" button will not work when new browser windows are opened.

Listed and External Links

When you have a list of links you should always include a short explanation of what users will find if they follow the link. This means that the user can make a decision about whether to follow the link.

Broken Links

A broken link occurs when the site you are pointing to either changes address or no longer exists. Links have to be kept up to date and must be reviewed regularly. Also, be aware, if you are deleting a page, that there may be many links pointing to your web page from other parts of the web.

Again, Web site management programs like Microsoft’s FrontPage will help you with this.

Navigational Icons

Effective navigation helps users to find their way around a web site. Navigation includes all graphics associated with links. New users will quickly learn the navigational conventions and because of this it is important to maintain a consistent and recognisable way for users to find their way around.

Page titles

Every page should have a unique title that is meaningful to the user. Because people can visit your page out of context, for example from a search engine, the page title must be meaningful even when viewed in isolation.

The title also influences how search engines list your pages and what a user will see when a match is made to their search. Meaningless or blank titles may result in users not finding your pages.

Photographs of children on web pages

Special considerations apply when you plan to use photographs of children and young people on your web pages. This applies to all children and young people.

If:


then you must:


These considerations do not apply if, for example, a group of children were viewed from behind, or in the distance, and it would not be possible to identify individuals. If you are in doubt, it is best to err on the side of caution.

Plug-ins

A plug-in is a program which is installed as part of a user's web browser. A plug-in application is recognised by the browser and is used to display information in a particular way. Plug-ins require the user to download and install specialist software, or install from a CD. To some users this is impractical, to others impossible and to others undesirable.

In the context of information provision, plug-ins must not be the only means of providing core information. That is to say, all information contained in sections requiring plug-ins must also be available in HTML.

Any information that is provided using plug-ins must also be available in an alternative, standards format. For example if speech is provided using RealAudio then the transcript must be provided in standard HTML. It is advised that, where plug-ins are needed, the more commonly used technologies are deployed. These include:

Portable Document Format - PDF

There are resources available to Youth Groups via LCVYS to have documents converted into Portable Document Format (PDF) but its usage must be considered carefully.

It is recommended that PDF documents should only provide an adjunct, or an additional feature, for standard HTML web pages.

PDF is a file format that preserves the fonts, formatting, colours, and graphics of a source document, regardless of the application and platform used to create it. You can think of it as an electronic photocopy. Users need the Adobe Acrobat® Reader to view a PDF document.

Although there are advantages with PDF (the ability to print out faithful copies of paper documents for reading off-line; graphic design tools are able to output PDF), it also has many disadvantages. Major disadvantages are:

 




Good Practice

 

 

It is not possible to legislate for all aspects of the design and content of the web. The following advice on good practice can be used in addition to the suggested standards to improve the overall effectiveness of your web pages.

These good practice guidelines have been put together from experience and from other people's ideas published on the internet.

 

·         Content - further considerations for the content of your web pages.

·         Design - the design of your pages is important.

·         Structure - how to structure your pages for easier navigation..

·         Language - helping your readers to understand your message.

Content

The information contained in your web pages is one of the most important considerations. In the Standards already covered it was said that  the content should be appropriate for the audience. Here are some further considerations to undertake concerning the content of your web pages.

Scope of Information

Help users understand the scope of the information you provide - how comprehensive is it? What is included? What is not included? Where can they get information about missing bits (provide links to these if they exist elsewhere on the web or supply a contact and phone number if possible). This 'Scope' information could be on a separate page and could also contain any disclaimers and/or copyright notices.

Authors

Provide useful information about the author/organisation. This might be an individual or a team in the organisation. One way of doing this is to make a link to a page about the author - details of who, where, when, how they can be contacted, e-mail address, etc.

What's New?

A 'What's New?' or 'Latest News' page can be useful for regular visitors - they can quickly identify pages that have changed or been introduced since their last visit.

If you provide this facility give a date (to define what 'new' means). If your 'What's New?' is six months old it can reflect badly on the whole of your site, so it may be better not to carry a page of this nature.

Related Information

Concentrate on providing information for which you are the source/owner so that you can ensure it is authoritative and maintainable. This will also save you time and effort.

Research what other related information is available elsewhere and provide links to it (or references and contacts). Users will value pages which provide good links and use them again, but links should not be provided at too low a level otherwise they may not be found.

Do not duplicate information which is available elsewhere - use a link instead.

If you do include information from another source you must be in a position to keep it accurate, relevant and up to date. Contact the owner - obtain their consent and an agreement as to how they will keep you informed of any future changes.

 

Design

Site maps

Image or site maps are often provided on web sites. A 'site map' can be a menu, an index or a graphical image representing the layout of the web site.


be aware though that Image-based site maps can create problems with:


Consider using a text based solution such as an A-Z list. If you still require a site map it should not be so large that it takes an unreasonable time to load. The user should be given information about the filesize of the map and what it includes so that they can decide whether to load it or not. If you do use a site map you MUST supply a text form alternative.

Structure

Page Length

The longer a document the slower it is to download. Keep pages short - one page of A4 text if possible. If they are longer than this, break them up with headings and hyperlinks.

When breaking down documents it is important that individual pages are meaningful in isolation.

Page Width

The size of users' screens can vary enormously and before pages are set live they should be tested using browsers on a range of monitor sizes as the formatting of the document may be adversely affected. If using HTML you should not need to check as it should adjust to fit.


Presume most users are restricted to a 640x480 pixel display area.

Style and Language

Plain English

Plain English should always be used. Try to should ensure that text is short simple written with their intended audience in mind and avoid jargon. The web is intended to be used by everyone, and your audience will benefit from simple language as this is easier to understand.

 

Text

Write your web pages from a user perspective and take advantage of working in a different kind of media to a printed page. Do not simply reproduce hardcopy leaflets that may contain inappropriate expressions such as "see page 2 of this leaflet for further information" or "see overleaf"'

Scanning

Scanning printed text for publication on the web using optical character readers is a straightforward process and increasingly common. However, you should review the text carefully after scanning for conversion errors (for example 'b' and 'd' reversal) and to strip out inappropriate 'text'.

Top    Back