Website design isn't rocket science! It is actually quite easy to design a good site which contains all the key information you want to make available online, and publish it to the web in only a few hours, particularly if you have the information already available in electronic form.

Text from a Word document can be saved in Word as HTML, or can be copied into a program like Claris Home Page or Microsoft Front Page and saved as HTML without you needing to do any HTML writing at all. Using one of the newer HTML packages means that formatting the document is very similar to using Word - highlight the text you want to reformat, select the format change you want and you're done! Inserting images is quite easy as well. They should be saved as gifs or jpgs, but Home Page and Front Page will convert from other formats for you. Linking to other files is simply a matter of highlighting the text you want to appear as the link and then selecting the file you want to link to.

The best thing you can do is to try your hand at it by making a personal site. You don't actually need to put the information online - all browsers have the ability to look at local files as well, so you can have a mini-web running on your own computer, with only information about yourself in it, only available to people who use your machine. Until you transfer the files to a web-server, usually a machine maintained by your service provider, your files aren't part of the Internet and nobody else can see them. Once you are confident of your skills you can upload files to your web-server, generally using the same user-name and password you use for email.

Microsoft and Netscape both offer free WYSIWYG (What You See Is What You Get) HTML editors that are more than capable of being used to create your entire site. Using a free program like Microsoft's Front Page Express or Netscape's Composer is an easy way of making a web page. Many of the commercial products now available, such as DreamWeaver and the full version of FrontPage, include site management features that will both speed up and enhance the development of a website, and should be considered if you are going to be developing or maintaining a large site.

 

For a great range of software specifically designed to make
building a website easy, try using CoffeeCup Software.

[ CoffeeCup - HTML Editor & FTP Software ]

 

 

What should be included?

The timeliness and the validity of the information is of critical importance. Out of date information will make readers leave and never come back!

Your home page should only be an entry point to your site. Don't try and give the viewer all the information on one page. Only include the basic information on your home page, and make sure that you have links to key parts of the rest of your site.

If you are building or maintaining a large site, you might want to think about offering your audience a way of searching your site or seeing a site map. There are many free services available to you, including Atomz (http://www.atomz.com) and Free Find (http://www.freefind.com) that will allow you to add search engines and site maps to your site without you needing to do much more than filling in a couple of forms. If you have access to the cgi-bin of your webserver you will be able to implement your own search script using one of the scripts listed at http://cgi.resourceindex.com.

As your site increases in complexity and the number of files grows, the structure of your site becomes more important. Keep expansion in mind when you create your site. Create directories for images, downloads, and other major categories of information in your site. Keep all image files inside the images directory and perhaps even subdivide that directory into cartoons, photos, etc. This will greatly assist in keeping your site manageable.

Use appropriate titles on each page. Key phrases in the <TITLE> of your document will be given be given a high priority by most search engine agents. This is the first place most agents look for information about your site, so think carefully about what you put in the title description.

Mecklermedia reports that perhaps only 30% of websites use <META> tags. Many of the larger search engines look for metadata in pages before anything else, so if your site contains "Keyword" and "Description" metadata then you are well on the way to being placed higher in the search engine ratings.

META tags are placed between <HEAD> and </HEAD>. The following examples will give you some idea of how they could be used:

<META name="description" content="The Joint Council of Subject Associations of Victoria (JCSAV) is the overarching body for subject associations in Victoria">

This will become the summary displayed by many of the search engines and will appear after information taken from the <TITLE> of the document.

Some search engines will only search on around 130 characters of a description, so try and keep your meta description tag shorter than this.

Key words are also used by search engines in ranking the relevance of a page, so it is a good idea to include a collection of words that can be used to describe the information in your page or site.

<META name="keywords" content="teach, teaching, teacher, teachers, subject, association, Victoria, Australia, advocacy, education">

This information will not be visible to people who use a search engine, but it will give extra information to the search engine and will also help boost your placing in the search engine ratings. You can list the same words, or variations on the same words, several times to boost your ratings, though some search engines are now actually ignoring META tags which are too repetitive.

META tags are different from the Metadata tags used by the Education Channel. Metadata tags are used to classify and catalogue a resource, in a similar fashion to the process used to classify and catalogue a book. Metadata is being used as one of the main ways of indexing and searching material listed in the Victorian Education Channel. For more information on metadata go to http://www.education.vic.gov.au or http://www.purl.org/dc .

How will people see your site?

Make the best use of a user's monitor size. A good standard to keep in mind is the size of the so-called "average" monitor. Many people using your site will have computers with 15" monitors. A few will still be using 13" or 14"screens while an increasing number will be using larger sizes. What does your site look like on a 14" monitor? The very best way to find out is to find someone who still uses this size screen and have a look at your site.

Sites should be checked for functionality and usability on at least Macintosh and PC platforms, using both Internet Explorer and Netscape Communicator. You might want to think about seeing what the site looks like on a Linux system using the above browsers, and you might also want to think about checking compatibility with other browsers, such as Lynx, Opera, iCab, NeoPlanet and Amaya.

To find out what other types of browsers people might use, visit http://www.w3.org/WAI/References/Browsing, and http://browserwatch.internet.com/stats.html.

You can also get a pretty good idea by going into the monitor control software on your computer (via Control Panels, Monitors, or Monitors and Sounds on a Mac, or through Start, Settings, Control Panel, Display for Windows 95). Change the setting to 640 X 480 pixels. This is generally the only size you would want to use on a 14" monitor, unless you don't mind tying to read the screen with a magnifying glass. Now go and look at the home page of your website.

Does the important information fit onto the page without the need to scroll up and down or left and right to read important parts of the site? If so, give yourself a pat on the back. If not, you might want to think about changing the amount of information and the layout on your home page.

Subsequent pages don't need to be quite so constrained. Once people have found the specific information they want they don't mind scrolling down the screen to read it. Keep file sizes as small as possible, and certainly try to keep the entire thing under 50K.

Claris Home Page and Macromedia DreamWeaver both have an option for setting the pages to a variety of pixel sizes. Use this option to get an idea of what your audience will see when they come to your site, by changing your view to either 640 X 480 or 800 X 600 pixels.

Frames? No Thanks!

Make sure that your site is accessible! Unless you are happy for some of your readers not to be able to make use of all of your site do not use frames. Frames were a great idea, as they allowed the designer to break the screen up into smaller windows, keeping one for a menu and another for content, but in reality it has caused many problems.

Try going to a site that uses frames and then increase the size of your text in your browser. You will often find that part of the menu is no longer visible. Try printing a particular part of the frame. Unless you know that you need to click in that area first and then select Print you won't be able to print the part you were wanting.

Frames are next to useless for people with sight disabilities too - screen readers and Braille devices don't cope at all well with frames.

Frames use up valuable space on the screen, particularly at 640 X 480 pixels. Many websites, including some association sites are using frames which divide the page in such a way that the portion of the screen left for the content users have come to the site for is displayed in less than 1/3 of the screen

Keep it small!

Keep your page down to a size that will load quickly. Conventional wisdom on the net at the moment suggests that if your page doesn't load in less than 15 seconds people will hit the stop button. Then they will either read the text on the screen or go elsewhere. If your navigation devices are images, the reader may be left with no way of navigating your site.

If you are using images on your page, try to limit them to a total of less than 30K. Given that pages load onto a browser at around 2-3 k per second when using a 28.8K modem, this image size, along with the text will load in less than 15 seconds. An easy way to work out an approximation of the download time is to look at the file size of the HTML document and the images included in the page. Add up the total number of K and then divide it by 2 to get a rough idea of the download time.

As an example, the JCSAV home page has one image on it (10K) and the HTML is about 3K, giving a total of 13K. In theory, this page will take about 7 seconds to load across the web. In reality, a number of factors will affect the download time. If you have visited a page which includes the same images, they will be in the cache of your browser and so will load instantly. This is a bit of a pitfall when you look at a site on the machine it has been developed on - all the images are in cache, and will load very quickly.

If you want to have lots of images on a page, try using "thumbnails" of the image, with a link to the larger image. This way, only people who are really interested in viewing the large image will have to see it. You might also include the file size as part of the link, to indicate how long it will take to load. Don't forget to include the ALT tag in your thumbnail!

Text links are the fastest way to set up a good system of navigation around your site. If you use buttons that are nothing more than text on a coloured background, why have you bothered? Many people are still visiting sites with images turned off (one of the options in Netscape and Explorer) because the web is so slow. Are they able to use your site? If you are using images for navigation in your site, and decide to make changes, are you able to make new buttons yourself, or do you need to go to the person who made the images or created the site in the first place? The web is supposed to be a place where you can do things pretty much instantaneously. How long will it take for your designer to come up with another button for you? How much will it cost?

You should also consider developing a Cascading Style Sheet for your website, as this can be used to completely change the look and feel of a site by changing just one controlling file. Information about how to do this is available at the JCSAV website.

Do files need to be in HTML to be online?

You can put any file type online for users to download, such as Word documents, Excel spreadsheets and so on, but if you want people to be able to view your pages by using a web browser then the best format to use is HTML. "Plug-ins" are available that can extend browsers and allow them to view other file types. If you have Adobe Acrobat or PageMaker you can convert your document to a PDF (Portable Document Format) and put it online in that format. Users will need to download a free Acrobat Reader from Adobe (http://www.adobe.com), but they are then not dependent on having the correct version of Word, Excel, Photoshop, etc., and you have complete control over how the document is going to look when they read or print it. Depending on which browser they are using the file will either download or be viewable inside the browser. Most documents may be printed to file and saved as a Postscript document, which can then be converted to PDF using Acrobat Distiller, and some products now include the option of saving directly as a PDF.

If you want files to be viewable online and you don't have Acrobat or PageMaker, but do have a recent copy of Microsoft Office, an alternative is to save your documents as HTML. This is now one of the options available in all Office components and while the formatting leaves something to be desired it will at least get your documents online quickly. This option is particularly useful if you have a PowerPoint presentation which you wan to get online quickly. Saving the file as HTML will also automatically convert images into the gif format. If you want to modify the saved HTML document, open it with your preferred HTML editor and make your changes.

Accessibility

The Commonwealth Disability Discrimination Act 1992 requires that there is equal access for people with a disability to information and other material available through the Internet, where it can reasonably be provided.

This requirement applies to any individual or organisation developing a World Wide Web page in Australia, or placing or maintaining a Web page on an Australian server.

This includes pages developed or maintained for purposes relating to employment; education; provision of services including professional services, banking, insurance or financial services, entertainment or recreation, telecommunications services, public transport services, or government services; sale or rental of real estate; sport; activities of voluntary associations; or administration of Commonwealth laws or programs. All these are areas specifically covered by the DDA. The DDA applies to services whether provided for payment or not.

The World Wide web Consortium is actively involved in the development of an Acessible Web. Their Accessibility website (http://www.w3.org/wai/) contains guidelines that are being adopted by many countries, including Australia.

A quick summary of the basic requirements to meet when developing an accessible website is listed below:

  • Images & animations should include the alt attribute to describe the function of each visual.
  • If Image maps are used, ensure it is a client-sided map and include alternative text for hotspots.
  • If your site contains multimedia, you should provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links should use text that makes sense when read out of context. For example, avoid "click here."
  • Pages should be logically structured. Use headings, lists, and consistent organisation. Cascading Style sheets should be used to control layout and style.
  • Tables should use Table Headers and should also include summaries.
  • Complex graphics and charts should include the longdesc attribute, to provide a long description of the content.
  • Provide alternative content for scripts, applets, and plug-ins, in case active features are inaccessible or unsupported.
  • Generally, try to avoid frames. If you must use frames, include the noframes element and meaningful titles.
  • Check your work against the guidelines and validation tools at http://www.w3.org/TR/WCAG

A few golden rules.

These golden rules of web design could serve as the basis of a brief for the web designer creating your site.

    Your entire home page should fit into a browser window being displayed on an 800 X 600 pixel monitor.
  • The home page should load in less than 15 seconds on a 28.8K modem. Subsequent pages should load in less than 20 seconds.
  • All images should have ALT tags. These will show up if the images do not load. ALT tags should be a sensible description of the image or the intent of the image - such as "click here to return to home page". Images should be used sparingly, and ideally should not amount to more than 30K, with 50K per page being regarded as a maximum amount if absolutely necessary. Animations, using technologies such as Shockwave, should only be used if it is absolutely the best way of getting the information across.
  • Navigation of the site should be by text rather than images.
  • The site should meet accessibility standards set by the World Wide Web Consortium. Cast's Bobby tool (http://www.cast.org/bobby/index.html) is a good way of checking compliance. When tested for accessibility using HTML 3.2 standards, there should be no errors. If the site uses frames, the individual pages should contain no errors.

Need more information?

Peter Batchelor was the JCSAV EdNA project officer, and worked with subject associations to increase the use of the Internet as a communications tool. Peter now runs Internet Technology Services, an Internet consultancy and design business servicing the needs of education-related organisations in Australia. Visit http://www.batchelors.net for more information or phone him on 03 9012 3381.