Website Development

Conferences, presbyteries, pastoral charges/congregations, camps, education centres, and other United Church ministries and organizations are creating websites as part of their mission and outreach. The General Council office highly encourages this activity. In an effort to support website development across the wider church we offer the following suggestions to help you plan and design a website. You may work through the steps in sequence, however, we suspect your progress through the list will take a more meandering path as the project evolves.

Step 1: Write a Web Site Goals Statement

Where to begin? Start with a couple of obvious personnel questions:

• Who will authorize the development of a website?
• Who will to define the website goals?

Individuals and groups from your organization with a potential interest in or use for the website should be represented. Their support for the project is essential.

Decide if writing the site goals document will be a formal or informal process:

• A formal process means meetings, agendas, decision-making processes, and specific operating procedures.
• An informal process may be as simple as distilling ideas and suggestions into a brief statement which is then given formal approval.

Neither method is intrinsically better than the other. However, the size of the project, pending deadlines, and available resources may influence the decision to opt for one process over another.

Suggestions for articulating website goals

As planning discussions begin, consider the following to stimulate the conversation.

• What is the mission/creed/purpose of your organization?
• What role is the website meant to play in the public image of your organization?
• How is your mission/creed/purpose relevant to the purpose of your website? Stakeholders' responses may vary considerably which means you'll need a process to resolve these differences.

The responses, refined as you wish, form the basis of your website goals statement.

Top

Step 2: Identify Your Site Audience

As with the site goals exercise in Step 1, identify who will be involved at this stage, and the available time.

Consider the following suggestions to stimulate discussion:

• Identify possible user "experiences" you will offer on your website. Samples include:
  • An information retrieval experience where users come for information such as a worship schedule or list of upcoming events.
  • A participative experience where users join an on-line discussion forum.
  • A transaction experience where users order worship planning materials or reserve a meeting room for the local scout troop.
  This exercise helps stakeholders visualize the site and potential audiences for the various features and/or content packages. The audience/content issue is very important:
  • A site for children and youth may opt for information delivery through a lush interactive experience, while
  • A site for their parents may deliver similar information in a traditional manner, one more commonly seen in static print documents.
• Rank the importance of each audience group.
• Identify the special needs or requirements, if any, for each audience group. For example, people with disabilities may be unable to access your website, or do so only with great difficulty.

The outcome of this exercise is a collection of user experiences that match the site goals.

Also, remember the expectations of ALL users:

• They want useful content;
• They want easy and clear access to that content;
• As a general rule, they are impatient; that is they are reluctant to wait beyond a reasonable time for content to display;
• They have more faith in well-designed sites.

What have others done?

By now of course a website for your organization is no longer a novel idea. So, if your collective inspiration is flagging, you may want to review what organizations similar to yours have done with their websites. Knowing the "competition" is a good way to learn about your own site.

This analysis may, once again, be formal or informal. An informal evaluation may be a simple "surfing" exercise. A formal evaluation need not be too detailed or complex. The following criteria offer some suggestions to consider when looking at other websites:

• Consider the site content and variety of user experiences on offer.
• Review the page layout and design.
  • What features do you like and dislike?
  • Are pages easy to read on a computer screen?
  • Do you have to scroll sideways to read? Up and down?
• Review the site navigation features. Does the navigation framework make sense to you?
• Look for user support resources such as a site map, contact information, content revision notices, etc.
• How long does it take for pages download? Consider the time required for pages to display on a dial-up connection. What percentage of your audience access the Internet via dial-up?
• Does the site use JavaScript and other specialized programming? Are these embellishments useful or just "eye candy"?
• Does the site have ads? If so, how are they used and where are they placed on the page templates?

Top

Step 3: Web Site Content Development

This step is an opportunity to consider the content of your website. At the end of this exercise you should have a content inventory and a content development plan.

Consider the following as you begin to compile a content inventory and development plan:

• Have stakeholders identify the content they want on the site. Sort these requests into a manageable number of groups. This initial sort provides a logical starting point for the creation of a site organization plan.
• Will the site offer content currently available in other formats? If yes, does this content need to be "re-purposed" for a different medium?
• Will you produce new (Web-only) content? If yes,
  • Who will produce/write/develop/"re-purpose" this content?
  • If you or your organization do the production, what software and/or hardware are required?
  • What are the production costs, if any, and who will pay them?
  • What are the deadlines?
  If you hire an outside design and production service,
  • What criteria will you use to select a vendor?
  • What is your budget? What are your deadlines?
  • What do you expect the vendor to provide?
• What is required to properly present that content for your intended users in the "user experience" of your choice? List these requirements in detail. The list may include everything from images used to support and enhance text-heavy content to the complex programming requirements for interactive Web pages.

Web Site Content Formats

How will you present your website content given your audience and preferred user experiences? We offer the following as a way to begin your discussion. Consider first, some format options:

• Content may be static, usually as a unique collection of HTML pages. This is the most common and the easiest way to produce Web content.
• Content may be dynamic, that is pages are generated from a database and displayed in templates as users click through the links on your site. Remember, the design, production and testing cycles for dynamic content will be different, and may be much more complicated than those used for static page development.
• Content may be interactive, that is users exchange information with the site, usually for a specific purpose such as a commercial transaction, subscribing to an e-newsletter, participating in an online forum, etc. The technical expertise and resources required to develop interactive and dynamic content may require further discussions.
  • List all functional requirements and technical components.
  • Rank the importance and scope each technical component.
  • Determine the feasibility of each technical component.
    • Do you have the time, technology, skills and money to build the technical infrastructure for your functional requirements?
    • If you plan to lease or subscribe to such services, how will you evaluate the various available packages?

Group and Label Content

While the development of meaningful content is the most challenging aspect of long-term website success, creating a good organization scheme for that content is also difficult. At the end of this exercise you should have a draft plan for organizing your Web content. To begin, consider the following suggestions:

• Write each content element on an index card.
• Sort into tentative groups.
  • Try organizing the content in different ways.
  It is important to record how each stakeholder organizes and names each content group.
• Determine pros and cons of each organization scheme. Some will be better than others, but there are no "right" or "wrong" solutions.
• When you agree on the group elements, name each group as descriptively, yet briefly as possible. Two common labels include:
  • An 'About Your Organization' label. This section includes general information about the organization, its history, mission, news, contact information, street location, etc.
  • A 'Site Map/Index' label. This section is especially useful with ambiguous organizational schemes (see below) that are not supported by a site search function.

Writing for the Web: Some Suggestions

Web Designer Jeffrey Zeldman* identified three distinct classes of Web users:

1. Viewers would rather be watching TV. For this group the Web is about eye candy and other visual jolts. They use text only as directions to further visual stimulus.
2. Seekers want information they can apply to their own work. They move quickly through a site, rarely pausing to scroll down or across. If what they want is not immediately visible they move on.
3. Readers are rare birds of the Web. They will scroll through and read long documents, download and print PDFs, as they would any print document.

Viewers and Seekers prefer information chunks, scanning the screen for headlines, summaries, captions. They often engage in "interlaced browsing," clicking back and forth between sites comparing similar content.

Readers, because they are in less of a hurry, like archives of information and are quite content to scroll through long documents. That said, they also prefer text that has been adapted for screen display, such as lines of text that run only halfway across the screen, information formatted in lists, blank lines between paragraphs, etc.

So, unless your audience will be Readers only, adopt a Web-friendly writing style:

• Write for "scan-ability."
• Use headlines and summaries. Both should be simple and informative.
• Trim or distill long documents. Write "long", if you must, but be prepared to trim your copy to keep it tightly focused.
  • Present the most important material at the beginning and then add detail.
  • Write short paragraphs, ideally, with only idea per paragraph.
  • Use sub-headings to separate blocks of paragraphs.
• Even Readers will appreciate a summary and/or Table of Contents at the beginning of long documents.
• Lists and other design elements help break the flow of uniform text blocks. Lists are especially good for presenting categorical information (see next item).
• Sort information into categories where applicable, e.g., "Sermon Starters," "2003 News Releases," etc. When visitors can jump from chunk to chunk, they get to their information destinations quickly.
• If possible, work with a good editor!

Top

Step 4: Create a Site Structure

This step takes your labeled content groups and builds a model structure for your site. To help stimulate discussion consider how the following models may or may not work for your site.

• An exact organization model sorts content into well defined and often mutually exclusive sections. Common applications of this model include:
  • An alphabetical sort used for a staff directory on a contact page, or
  • A chronological sort used to present a collection of news releases.
  Exact organization schemes are:
  • Easy to design and maintain.
  • Require users to know exactly what they're looking for.
• An ambiguous organization model sorts information into categories that rely on language and/or visual symbols to convey the category content. Common applications of ambiguous organization schemes include:
  • A topical sort such as "Worship Resources", or "Justice Issues."
  • An audience-specific sort such as a "For Children" or "For Prospective Students."
  Ambiguous organization schemes are:
  • More effective than exact organization models because most users don't know precisely for what they are looking.
  • Difficult to conceptualize and design.
• A hybrid model, applies the exact scheme for some content and an ambiguous scheme for the remainder. A common hybrid model is a hierarchical scheme where content is organized as a collection of pages beneath a Home Page. We use this model on united-church.ca. Not surprisingly, we recommend this model because:
  • It is an easy metaphor to understand, and
  • It works well with both simple and complex collections of information.

Adapted from "Information Architecture for the World Wide Web" by Louis Rosenfeld and Peter Morville. O'Reilly & Associates, 1998, pp. 26-36.

Top

Step 5: Design a Site Navigation Plan

Now that you have identified the major content sections, fill them in from the content inventory. Once the content is labeled and sorted, you need a navigation system to help users travel throughout your site in such a way that they don't get lost.

At a conceptual level, you want your site navigation scheme to work on a gradient of complexity. High-level navigation milestones identify major sections of your site. As users move deeper towards specific content the navigation becomes more detailed and complex as the "distance" between milestones grows shorter.

The goal, regardless of the complexity involved is to create a "sense of place" for users, no matter where they are. A user-friendly approach to site navigation will enable users to answer the following:

• Where am I? Users will never create a mental image of your site plan unless they know where they are at all times.
• Where can I go from here? This is answered by visible navigation options and other links on the page.

If users cannot answer these questions to their satisfaction, there is a problem with your site organization scheme.

How much navigation information do users need?

You may know the seven plus/minus two rule. The popular myth around this concept says users can't make a comfortable choice if they have to chose from more than seven options. The original exploration of this idea may be found in George Miller's "The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information."* A careful review of Miller's conclusions show that they apply more to what we can memorize, not what we can perceive.

Current research has shown that users actually prefer site structures that are broad and shallow to those that are narrow and deep. Users tend to get lost in deep hierarchical structures and new visitors get a better overview of a site when they may choose from many options.

Suggestions for Navigation Elements

The navigation elements on a Web page should enable users to do two things:

• Locate their current position
• Plot a course through your site

We offer the following suggestions to help ensure your site provides users with the contextual clues they need to navigate confidently.

• All pages should include the organization name.
  • Display your logo on every page and make it a link to your the home page. This is a common feature on most websites.
• The navigation system (tabs, topic lists, a menu of choices, etc.) should present the site structure clearly.
  • The major content categories are obvious milestones for your site's primary navigation elements.
  • Specific content areas should have a local navigation system to supplement the primary navigation.

The General Council Offices site navigation scheme uses tabs arranged horizontally across the screen to label the main content areas. Within a content area a menu in the left margin to sub-divides the content into logical sub-categories. As users click towards specific documents a full range of navigation options remains available. The horizontal tabs offer direct links to every major content category on the site. The left-side menu offers links to every major sub-category within the chosen category.

For a much more comprehensive discussion of website navigation and usability issues, we highly recommend "Designing Web Usability" by Jakob Nielsen, New Riders Publishing, 2000.

Top

Step 6: Site Visual Design

Now is the time to take the site plan and build a visual design around it. This step is often the most satisfying aspect of a website project.

Remember: Settle the intellectual property issues early on. Determine who owns what aspects (HTML code, graphics, scripts, etc.) of your website. For more information on copyright issues, see below. Understand the benefits of using proprietary resources and the costs (time, money, inconvenience) of opting out.

Consider the following points as you begin to the visual design phase:

• Consider a unique graphic identity which incorporates your organization logo or a unique logo for your site.
• Consider a distinct colour palate. Use colour to generate a visual vocabulary** which supports your site content.
• The colour theme should use browser-safe colours which reproduce consistently across platforms and browsers.
• Remember, the eye tends to see the pictures first. Consider how visual images can reinforce the text.

** Visual vocabulary is a set of symbols used to describe a system, structure, or process. Web designers use the vocabulary to describe, at a high level, the structure and/or flow of the user experience of a website.

Layout grids

Layout grids are the foundation of your visual design. Grids and design sketches lead to page mock-ups. The goal, as you begin, is to have pages similar in form across all major sections of the site. Consider the following points as you begin:

• Strive for three or four generic page templates.
• Block out space for the following:
  • Page content.
  • Organization logo (often in the upper-left corner of the grid.)
  • Navigation information.
  • Page title.
  • Supporting graphics.
  • Sponsorship acknowledgements/advertising.
  • Page footer, including copyright information, link to a privacy policy.
  • Contact information for document author and/or site webmaster.

Design Sketches and Page Mock-ups

Consider the following points as you begin your design sketches and page mock-ups.

• Sketches establish the site's look and feel. They may been done concurrently (and approved!) during earlier steps in this process.
• Mock-ups integrate design sketches with layout grids
  • Mock-ups should closely replicate actual pages by integrating design sketches with the layout grids
  • Mock-ups serve as the basis for your site prototype, if site is large, or actual pages if the site is small

We highly recommend the use of Cascading Style Sheets to control content layout and presentation throughout your whole site. For more information, see the W3C's Cascading Style Sheet's page.*

When the design seems too simple for the work it required, then you know you are done!

In our opinion, the best website design resource is available on the Web, the Web Style Guide.* Originally developed at Yale University's Center for Advanced Instructional Media, its popularity, alas, meant a book deal was inevitable. Thankfully, the authors have not neglected the online version even as the book went into a second edition.

Top

General Recommendations

Protecting E-mail Addresses

Some users and thousands of automated spiders and Web bots scour the Internet constantly looking for vulnerable information to exploit in mass e-mail campaigns (SPAM) and for identity theft. A good way to avoid a flood of unwanted e-mail is to hide or mask e-mail addresses on your website (avoid use of the overly simple “mailto”).

• We use a tiny script to mask e-mail addresses on the General Council Office websites. This script is available for download [RTF: 2 pp 12 KB].
• Many content management systems (CMSs) and even some of the more popular blog systems (see below) offer a feature that will mask e-mail addresses automatically. Look in the settings or add-ons area to enable this feature.

Free Web Hosting Services: Good and Bad

It is easy to find a place to host a basic website for free.

Popular services such as WordPress.com, Blogger.com, Google Sites, and Drupal Gardens offer easy to use yet powerful features for building simple websites. They also offer third-party tool integration that enables tracking of Web traffic and other useful tools such as RSS feeds.

Many other free site offerings are out there, but “free” sometimes comes with a catch. Many free site hosts do not actively screen user content or advertisers, which may result in inappropriate or adult content being displayed with your website. Do your research before using one of these providers.

If your needs are simple:

• Many ISPs offer package deals that include a modest amount of server space to set up a site, with costs already included in your monthly access fee.
• Don’t forget to set up your free microsite on the United Church–run WonderCafe.ca.

For larger or more complex sites, the Canadian Web Hosting Providers website reviews a selection of web hosting services.

Other Useful Tips

• Consider using a content management system. This will make it easier to keep your site up to date by allowing various people to make updates without needing to have significant technical knowledge.
• If you want a unique URL (www.yourchurch.ca), consider registering your own domain name. If an ISP is hosting your site, they may offer to register your domain name as part of the service agreement.
• Be aware that the free “visitor counters” you see on the bottom of many webpages often contain advertising or hidden code. These counters are also an inaccurate way to track traffic on your website. Instead, try a free service such as Google Analytics.

Top

Final Thoughts

• Designing a website is a team effort. Anyone who insists they can do the job on their own is not someone you wish to have planning and building your website.
• Remember, your site should revolve around its content. If you build your site before you have your content you've done things backwards.
• Understand and approve the costs and fees before you begin. We dislike being so suspicious, but be wary of a price that seems too good to be true. It often is.
• Every site will require regular maintenance. Information has to be updated and the site design has to be kept fresh. Ensure maintenance costs and responsibilities are understood and agreed upon as you begin developing your website.
• What makes a good website? Common Sense! If nothing else, build your website so that it makes sense to your users.

Once your site is up and running, plan for a formal and regular evaluation of the site. Suggestions for points of discussion include:

• Has the site met the its goals?
• Are you getting adequate feedback to evaluate the site?
• How would current stakeholders evaluate the site?
• Have new stakeholders come forward since the site was launched?