Web Guidelines - National Assembly of the Uniting Church in Australia

Web Guidelines

UCA National Web Guidelines (Assembly Version)

Approved by the National IT Sharing Group and the National Finance Committee - Nov 2001
Noted by ASC that these guidelines will be circulated to synods as a suggested standard for UCA web uniformity - Nov 2001

(ED- added Feb 2002) The original version of this document was specifically produced for the National Assembly and national agencies and as such had references to links to the National Assembly web site. However, these guidelines are meant to be usable by all councils of the church and I have since tried to modify them to represent all councils of the church. Where a reference is not suitable and would make more sense as a reference to a particular Synod or Presbytery please take it as such. If you are reading this as an officer or representative of a Congregation or Presbytery and are having trouble redefining Assembly specific information to suit your council please contact your synod Web Developer (http://uca.org.au/synods.htm) or National Assembly Web Developer (mailto:matthewb@nat.uca.org.au) for more information.

Let me make one thing clear. This is a list of guidelines and advice, not a set of rules. If you don't agree with them, so be it. If you would like to tell me why, I would encourage the feedback. You may know everything that has been written here. You may know more. If that's the case please share the information with me.

In May 2001, at the National IT group meeting, I gave a quick talk on ideas for web uniformity on National Agency and Working Group web sites. Following from this I was asked to update the existing guidelines, originally produced in August 1998 by Debra Brown (nee Porter). I have read these and while most things still ring true and I think we understand they are common sense, three years down the track there are a few other issues that need to be discussed. The reference to 286 machines made me realise that they are a little in need of an update. I decided it was easier to rewrite these guidelines incorporating the existing guidelines. My initial plan was to simply create some kind of standard relating to 'navigation' and 'Church association'. But I have added a few helpful hints that I hope will assist web developers to think about the way they design their site. These are not rules but I think you will agree it makes good sense to satisfy four elements:
(in no order of importance)

It was thought by the majority at the National IT Group that these guidelines could perhaps be adopted (not discarding the need for state-based or other appropriate modifications) by Synods, Presbyteries and Congregations. If you find that these guidelines are suitable and can be adopted more widely, then I encourage their modified distribution. I have also included what I believe to be good web building guidelines.

Please note: This page contains information and links to third parties, which provide services, free or otherwise. It is not a recommendation or condonement by the National Assembly, but rather a starting point for your investigations.

NOTE: replace agency with congregation/presbytery etc. Replace Assembly with Synod etc.
If you are an official part of the Uniting Church/National Assembly it is appropriate that you show this association. This can be done in two ways.

Add the logo to your page, making sure you stay close to the guidelines for use of the logo. (http://nat.uca.org.au/resources/guidelines/emblemguidelines.html)

I have seen sites with gifs the size of a house and some so small you'd be hard up finding them with a telescope. One of the most noticeable things is the quality of some of these logos. If you shrink a big logo it will look almost as bad as if you increase the size of a small one. I'm thinking 40-80 pixels is a good size. That shows association without invading on your 'site space'.

The Assembly has logos on offer in different sizes, and can match your colour or make them see through etc. Contact Matthew Budden and tell him what you want.

Alt text Let's not forget the ALT text - for people with disabilities or text-only browsers - I propose the logos all contain the text "UCA logo - link to the home page of the Uniting Church in Australia National Assembly". Link the logo back to the National Assembly site. Many people come to your Agency sites from the National Assembly page and it will help them to get back. (NOTE: Congregations and Presbyteries may be better linking to their appropriate Synod)

Location
Familiarity is also really important here. Place the logo in the same position. I propose the top left or bottom left, because it's an easily recognizable place (and that's where the majority of Agencies have theirs at the moment)

Identify the UCA and your Agency/council on every page (It doesn't need to be four foot high, but either do it in small text at the bottom of each page or preferably put it in the title- this will then print on every page. (Try not to use only the Agency/council name in your page title - label each page individually. When a search engine returns a set of data it uses the title to describe the page - you will get an indistinguishable list of the pages with the same heading.)

Have you ever been to a site and become completely frustrated because you can't work out how to get back to where you were? If the slow speed of the site doesn't scare your user away, getting lost and frustrated will. You can always use the back button or history list but you often get lost anyway. Still not convinced? What about if you come to a site page from a search engine. Some engines just list the front/main pages of your site but others list whole sites. You may find people are coming to your site through the backdoor. If you don't put something on each page to identify who you are, and a link back to your home page, you will find that people may be forced to leave again.

You don't need to link every page from every other page, but it is good practice to link each page back to two others:

I.e. if you have a resources section, each resource document should have a link to the home page and to the resources page.

The most important aspect of designing on the web. You have probably heard it all before but I'll say it again. Download speed is everything. Despite the onset of fast optic fiber lines and satellites etc. most folk are still using modems. And it's not all 56k modems either. Though few folk are still using the old 14.4k's, you still have large group of users running 28.8's (for example me - I like to see how other people see my sites.)

According to Jakob Neilson, owner of the well-known 'almost graphic free site' useit.com, users do not keep their attention on the page if downloading time exceeds 10 seconds, which is about 30 KB at 28.8k modem speed.

Graphics
If you design a fancy site with amazing graphics and stunning photos and you don't keep the file size down then you might as well have not put the site up there in the first place. Your photos can be 50-70% j-pegs or 128 colour gifs. (If your pic is more than 25-30k you'll probably lose people during periods of high traffic.) 50% medium-grade images are quite acceptable for background images. Try not to use too many pics. Yes, it's great to have a good looking site, but think about what the function of the site is. If it's information then give it to them. Don't let people get distracted by fancy tricks.
Basically there are two image file formats you can rely on .jpg and .gif (there are really three but .png files are not yet understood in all browsers). jpegs are good for photos, blending colours, graphics with complex colours etc. gifs only have 256 colours. The advantage is that they can be made transparent and animated. This format is good for things like logos, designs, headings, basically anything that has less than 256 colours or will not be badly distorted being restricted to 256 colours.

Tables - It's not just graphics
People have this idea that images are the only thing that add to file size. I have seen several examples of 500k relatively short documents with only two or three pictures making up only 50k of that file! How? Tables. Be careful about how you use tables and other design tricks. Many of the WYSIWYG software (i.e. Dreamweaver, Golive etc.) now allows you to draw you tables on screen. Great! But be careful. You should still use a grid to line up the elements, or use one of the tricks for collapsing small table cells. Otherwise you will end up with a 500k table with 1000 rows.

Maybe you're not so fast either
Think about this. Even if people are using fast lines, it may be worth checking into just how fast the line is that is hosting your site. Just because it is fast in your building doesn't mean it's fast outside. It will 'bottleneck' going in and out of the building so I would recommend that you test your site from a modem on a regular basis.

HTML and TABLES - The .html document is the safest form to put your documents in. Using percentage tables or not using tables at all allows the user to view and print quickly and easily. Basic html also provides easily accessible pages to assist people with disabilities. For those now using .asp, .php or cold fusion etc. the concept is the same, but too often I see people using different design techniques which create longer download time for the user and makes it difficult, sometimes impossible, to print. It will drive your users crazy if the printed document has had an inch taken off the right margin. And don't laugh, it happens all the time. Frustration plus! Now image what people with sight disabilities are experiencing - download Simply Web 2000 (http://www.econointl.com/sw/) to get an idea!

Adobe Acrobat (PDFs) vs Microsoft Office (Word)- But all that aside. Sometimes it is not possible, or just not time-efficient, to put your documents in .html format. There is no way I am going to spend two days converting a 200 page booklet/document, designed specifically as an off-line reference, into .html. It's not practical. Sometimes some one else has already done all the hard work to create a form or other document which is fine in its original layout. It's a tough one. We all get complaints about usability. Your choices are basically .doc or .pdf. (I believe that most rich text format files are simply too big to even get a mention!) You'll get complaints from people for using .doc and you'll get lots of complaints from users, often not well advised in the art of technology, about using .pdf. The way I look at it is like this. Acrobat is free. Word is not. One can be downloaded from the web. The other can not. And that is my response to anyone who says the documents should be available in Word. Tough call. But I'm sorry. PDF is good on most operating systems, free and the files are, more often than not, smaller than their Word equivalent. There is also another argument that .pdf stops people from changing things. But I don't buy into that. If anyone wants to change something they will, regardless of ease.

DO NOT CONFUSE FULL ACROBAT SOFTWARE WITH THE FREE ACROBAT THAT IS ADVERTISED EVERYWHERE ON THE INTERNET - THE FREE VERSION IS THE READER ONLY AND WILL NOT ALLOW YOU TO CREATE PDFS.

The downside for the web-author of course is that to create .pdfs you are going to need the full version of Acrobat and this is not free. But it is relatively inexpensive and very handy to have. (Acrobat 5 is about $500 and the upgrade is about $200). There are three main ways of creating .pdf files.;

Basically there is no hard and fast formula for PDF creation. If it's basic text try using the reader, for lots of images or large images use the distiller. When possible, you should try to use the tagging procedure. It is possible to tag untagged PDFs using the free 'Acrobat 5.0 Make Accessible' plug-in.(http://www.adobe.com/support/downloads/detail.jsp?hexID=88de). Size and accessibility are the two most important things for the web so just experiment and you will get the general idea. For more information on accessibility try the adobe web site (http://access.adobe.com/wp1.html) and for a brief breakdown of Acrobat 5 accessibility try an independent site such as http://www.cpcug.org/user/houser/section508/acrobat_5.htm

Compression and self-extractable zip files - If you are producing a PDF file specifically for people to print and save, i.e. NOT READ ON-LINE, consider using one of the free archiving, compression and self-extractable zip programs available. I use sfxmaker, which has never given me any hassle. It allows you to compress PDF files to a much smaller size and because they self-extract the user does not need any compression software. (The other bonus is that the file will download to the users PC instead of opening in the users browser which can often cause hassle on a slow connection with larger files) - sfxmaker download is at http://sfxmaker.cjb.net/

Contact details
You should have an e-mail contact on your site somewhere, preferably on your front page. If the person who designs the page is different to the person that can provide information about the topic of the site, specify both contacts. It's good form to have a contacts page, which includes a postal address and phone number. Again it makes sense to have this information page as a link from the front page.

Site search engines
Sometimes you come to a site and there's just too much information or you don't know enough about what you are looking for to go to the right place. There are a number of companies that will provide you with a site search service for free or for a minimal cost. The National Assembly uses atomz.com. They charge a small fee but the engine blends in with the site.

It is also possible to design/use your own search engine, but I find the free ones do the work with minimal fuss.

Site counters
It's good to know how many people have come to your site. These devices track sites differently. Punching in "free counter" into a search engine on the web will give you a host of different companies that will provide you with this service. We use sitemeter.com. They send weekly e-mail reports and can tell you where the person came from before they arrived at your site. It also counts real hits (the same computer can only register once in a 1/2 hour period). Some site counters will count a hit every time the person comes back to that home page.

The Counter (http://thecounter.com)
Livecounter (http://www.softwarewings.com/livecounter/) - This one is actually a little butterfly that floats around the screen!

Though the church doesn't generally get itself involved in too much strife, it is always useful to have a disclaimer on the site. A disclaimer is simply a web page that provides information and instructions to users in the event that they do not agree with, or question the accuracy of or appropriateness of, content that has been posted on the site. For advice check with the IT dept. in your area or have a look at either the Assembly site, Victorian Synod site or check one of the other synod sites.

From December 2001 you will need to have a privacy statement on your web site. Contact your Assembly/Synod Privacy Officer for more information

This is simply a page of text links, which lists everything that can be found under your site. It provides a similar service as a search engine but allows people to see your entire site at a glance. They are usually very basic pages. Check the Assembly web site for an example.

A few things worth putting in documents
Documents, essays, research papers etc. should be labeled with as much information as possible so people can answer the following questions:

Who owns the copyright?
Just because you can download all these resources like images etc. from the net doesn't mean it's legal. Copyright still exists in some circumstances. You can copy .html and javascript code and there are legal programs that allow you to download multiple components of sites in one hit. A good example of this is GetBot. (http://www.getbot.com) But though the program may be legal it doesn't mean you can take everything. I am sure the Sydney Morning Herald will get pretty grumpy with you if you start lifting their professional photographs. If in doubt contact the owner of the site or material before posting it on your site. (A number of images have what they call watermarks now which are invisible security devices attached to images - the author will be able to recognise his/her work!) You can also purchase a book from the copyright council (http://www.copyright.org.au) for a little less than $40 that will explain the legal issues in full.

Dead Links
I can't stress this one enough. In on-line surveys one of the top responses for the most negative thing about the web is dead-links. With the new WYSIWYG software checking your links on your site is easy. But you still need to check that your external links are current--- we all post essays etc. on the web, which contain links to other organisations etc., but how often do we check to make sure they have not been moved/erased?
There are a few nifty programs that can check links for you, even external ones. I use Xenu. It is rather fast, prints a report at the end of it all and even produces a site map for you! Not bad! [http://home.snafu.de/tilman/xenulink.html]

There is no real sure fired way of making sure people can find your site on a search engine, unless you pay for the privilege. We haven't paid for anything but our sites appear on a number of the major sites. It just takes time. (Can be a few months) On every search engine there will be a way of recommending a site. (Unless you have to pay) One of the advantages of being a not-for-profit is that some engines will give you the service free, but you may have to wait some time before it appears on their search engine. Check out Jacob Neilsons article on search engine site referrals to his site. I recommend you go to his list of search engines first and follow the instructions. Also list your site with Australian engines such as:

Dogpile is a search engine that searches many different engines at one time. That is also a good place to start.

Every time you stumble upon a new engine try and lodge your site with them. Please note: be careful about using your e-mail address when using these services. You may start getting unwanted junkmail. I would suggest that you set up a dummy e-mail with someone like hotmail.

You will never cover them all (there are over 3000 search engines on the web but you will have a big stake in the biggest engines. (Bear in mind that the default search for explorer 5.x is yahoo!)

One of the best things about the web is that people are only too happy to provide information and resources for free. So you are in luck. Anything you want to know about web development from simple html programming to high-tech relational databases is available. You just have to find them! There are literally thousands of free resources including Java applets and JavaScript to liven up your pages a little. But I think one of the most useful resources is the huge number of 'how to' articles available. Topics include basic html, using JavaScript, simple programming, using databases, web standards and design functions etc. Don't forget that you are designing for many platforms (i.e. Windows, Macintosh, Unix), many browsers (i.e. Netscape, Internet Explorer, Opera) and many sizes (480x640, 600x800, WebTV etc.) no one said it was easy but here is a short list of sites that provide some excellent advice and resources. It will act as a starting point.

www.w3.org - these are the folk that are trying to make regulations for the use of the web. One of the most important sources of information for html, xml and xhtml on the web

bobby- (http://bobby.watchfire.com/bobby/ ) perhaps one of the most famous sites dedicated to accessibility. Here you can download software to test your pages for accessibility errors and browser specific problems. You can also enter a page into the front page of this site and it will check that page (Only one page at a time. If you want to test your whole site, download the software)

useit (http://www.useit.com) - this site is dedicated to accessibility, providing information on making sites fast and readable by everyone. Also publishes yearly stats on search engine referrals to the site.

webmonkey (http://hotwired.lycos.com/webmonkey) - very useful site for web developers. Contains articles on wide range of topics including html, xml, JavaScript and web databases

webreview.com - interesting site full of articles on cross-training for web teams (probably no one out there working in design teams, but interesting reading)

informit.com- more lessons and articles on html, relational databases, JavaScript etc.

XENU link checker - [http://home.snafu.de/tilman/xenulink.html] - if you want to make sure your links are always current, even the ones outside your control on other sites try Xenu. The download is less than 300k and the program is quite fast.

There are a million and one resources on the web, some more useful and safer than others. Remember that some seemingly useful free downloads are not regulated and may do your system more harm than good! If you have found one and would like to share it, please mail me: matthewb@nat.uca.org.au

A good site is a fast one- If your site provides information concentrate on that aspect. More than 10 seconds and people will give up. Choose your graphics carefully. Do they really need to be there?

Easily navigable sites- where am I? Whose site is this anyway? If your user is thinking these questions, you are in trouble. Mark your pages and think hard about the layout. I always ask other people (generally those outside church) to test my pages by asking them to find certain things on the site. If they get frustrated or continually lost I have to rethink the layout. Consider using a free site search engine, so if people do get lost they may find their way through the backdoor.

Clutter free sites- just because you can, doesn't mean you have to. Just about everyone I know agrees with me on this one. If I come to a main page of a site with fifty meters of links, a scroll bar the size of the one on this document and pure non-site related garbage, I'll leave. Pure and simple. (Don't confuse documents with menu pages- Documents are often long but people don't mind because they can print them and read them. On the other hand, having two thousand options on a home page or menu page will scare folk away.)

Design for everyone- there are people still using old browsers, people with sight-impairment using lynx and text-to-voice software. You don't have to use simple text on boring image free pages, but don't get caught up in designing for the latest browser because you can use all the latest tricks- test your site with a few different browsers. I'll admit to you here that I often fall trap to this area. Accessibility is no easy task. Test your site using Bobby and try reading some of the articles found on the web sites listed above.

Readability- large screens produce long lines of text. Consider using columns for short articles etc. that people may be inclined to read on-line. (As opposed to printing and reading later)

Yes believe it or not there are more than just two browsers out there, though admittedly at the time of writing this document the first two had the largest market share. Here are five of the most popular. If you are going to design sites, you should try and test them in as many of these browsers as you can.