Web Site Design Guidelines

Copyright © 1998 Craig Edward Given. All rights reserved.
Version 03.17.2001

Table of Contents

Return to previous page.


Are You Sure?

WORK: A lot of work goes into creating a web site. That means it may take some time to build the site. If it takes an hour or two hours to create a single web page, then a 300 page site could easily take 600 man hours to create. And don't forget that I do all this in my spare time! Also, related to the workload issue, is the reality that the customer does a large part of the work. You will have to write almost all the text that appears on a web site. You will have to test every single page, every single hyperlink, and every single push-button to ensure that it works. You will have many decisions that must be made carefully, since they may be excruciatingly difficult to undo once implemented. Count the costs before starting a web site project.

DESIGN: CraigGiven.com focuses on designs or redesigns web sites from scratch. In order to efficiently minister to multiple "customers" I focus on core competencies. In other words, the customer handles the project pieces that are within the customer's skills and resources. This frees me to provide those unique services that are beyond the grasp of the customers. Therefore, I typically do not perform maintenance, updates, or "touch-up" work to existing web sites. If you will have a changing website, you will need a webmaster ready to assume the ongoing maintenance of the web site after the design is completed.

HOSTING: The customer must have a hosting service where the website will be "parked." Payment, contracts, and restrictions are a customer's responsibility (but I can make reccomendations, if needed). There are also "features" available from some web hosts that must be in place for a web site to take advantage of those features. The customer may need to pay for these features. These might include credit card handling, secured/private pages, database interfacing, etc. These features often require programming to utilize, and that is quite distinct from the graphical design of a web site. I can incorporate existing programs into the design. But the creation of dynamic pages will depend on whether the hosting service supports the programming tools that I already know.

Top of page  

Introduction

This is an overview for the process of web site design. It is a non-technical document and doesn't require technical proficiency in HTML, the Internet, or even artistic techniques. It gives a high-level explanation of the entire process that can be used by both the web site owner and designer. It serves as a framework to identify tasks and the sequence of that task list.

Top of page  

The Design Process

Designing a web site breaks down into three parts: content, structure, and presentation.

Building a web site can be compared to building a house. First, you need raw materials (content) like bricks and mortar. Next, you need a plan or blueprint (structure) that tells the construction crew where and how to arrange the materials. Last, the construction crew (web designer) puts all the content together according to the plan. The same basic blueprint can be used to build a dozen houses — each looking quite different from the other. Their structures might be the same, but different colors, brick types, styles, and detail touches can be applied to give each a special look (i.e., presentation).

CONTENT: Content for a web site is usually provided by the web site owner rather than the designer. For a web site, content is composed of text (stories, news items, reports, or prayer requests), pictures (photos, clip art, etc.), and occasionally music or sound.

STRUCTURE: The blueprint for a web site is the structure. The structure is an hierarchical outline that shows how the many pieces of information relate to each other logically. This outline also represents how the content is organized in a navigable structure (menus). The web site owner must put as much effort into planning the structure as they put into creating their content. It becomes extremely difficult to make structural changes after the site has been built. Good organization also benefits visitors, who would otherwise be frustrated by a confusing menu structure and abandon the site.

PRESENTATION: The last step of the design process is to take the organized content and display it in a graphical layout that is both appealing and functional. The designer will do most of the work in this step. The web site owner will still be involved, because the designer will solicit the owner's input on most major decisions. The owner will proof edit web pages, test hypertext links, review artwork, and approve designs while the web site is being built.

Top of page  

Hosting

You will need a place to park your web site. If you are redesigning your current web site, then you already have a hosting service. Otherwise, you'll need to find a web hosting service. There are numerous free sites and commercial sites. If you have an ISP account (Internet Service Provider; such as Mindspring, AOL, Compuserve, MSN, etc.) there's a good chance that you get some kind of web site as part of your service package. Normally, free services run slower than paid services. In either case, check existing web sites on that host's servers to test their speed. For commercial hosts, you should also check with existing customers to see if they are satisfied with the service they are receiving. For Christian organizations, you can begin your search on Crosswalk's service listings under the "General Internet Resources" section at http://directory.crosswalk.com/WebDirectory/. I can also resell web hosting from ReadyHosting.com, a full-service vendor which is hosting this web site.

For a web site to be viewable its files must be posted to an FTP server. If you are concerned about security, you can do this. We will post the files on a mutually accessible web site (in ZIP format) where you can download them. Most people let me post the web site files. To do this you'll need to give me the appropriate access information. I will need the exact address on the FTP server where the web site is stored, the user identification, the user password, any account name (if used), and the default page name (usually index.html or default.htm). Your web site host will be able to provide these details to you.

Decide the Content

To determine a site's content, ask these questions:

After the owner decides on the site's content they can begin collecting or creating the content that satisfies these questions. The owner doesn't have to wait until all the content is ready before proceeding to the next step (i.e., planning the structure). In fact, the content can always be plugged in as the last step — as long as space has been reserved for it in the structure.

Top of page  

Written Content

Written content must be submitted in plain text format. One of the best ways to do this is to simply send a plain text email with the content you want posted on your website. That disqualifies Microsoft Publisher or word processor files. However, these packages offer you an option to save your work as plain text. You can then tweak the plain text output from these packages using a text editor (e.g., Notepad). If you want to "fancy up" your text, then you can imbed formatting instructions into the text. BEWARE: emphasis should be used sparingly! Frequent use, or many different types will make your text look cheap, garish, and amateurish!

To indicate a type of emphasis, surround the text with special "ON" and "OFF" indicators. For example <b> turns bold ON, while </b> turns bold off. Everything between <b> and </b> will be bold. You can combine multiple effects by nesting each emphasis (see "Bold Italics" below on the correct sequence).

How to indicateHow it looks
<i>Italics</i> Italics
<b>Bold</b> Bold
<b><i>Bold Italics</i></b>       Bold Italics
<strike>Strikeout</strike> Strikeout
Superscript<sup>3</sup> Superscript3
Subscript<sub>4</sub> Subscript4
<big>Big</big> Big
<small>Small</small> Small
<tt>monospace teletype</tt> monospace teletype
Bulleted List

    <li>Ape</li>
    <li>Bat</li>
    <li>Cat</li>
Bulleted List
  • Ape
  • Bat
  • Cat

Top of page  

Graphics, Photos, and Other Images

Graphics and photos can be mailed for scanning. The higher the original's quality, the better quality scan that results. If you need the images returned, please include a protective self addressed stamped envelope. You can also submit computerized versions of images. Below is a list (in descending preference) of the formats that I can accept:

TypeNameDescription
VectorCDR CorelDraw 8.0 or earlier
VectorFH10Macromedia Freehand 10
VectorAIAdobe Illustrator 7.0 or earlier
VectorCGMComputer Graphics Metafile
VectorEPSEncapsulated PostScript
VectorWMFWindows Metafile Format
VectorDXFAutoDesk/AutoCAD Data Exchange File
BitmapTIF, TIFFTagged Image File Format
BitmapPCXZsoft PC Paintbrush
BitmapBMPWindow's Bitmap
BitmapGIF CompuServe Graphical Interchange Format
BitmapPNGPortable Network Graphics
BitmapJPG, JPEG Joint Photographic Experts Group format

Top of page  

Vector graphics can be scaled easily, while bitmap images suffer quality degradation when enlarged or reduced. This is especially true of the JPG/JPEG format, which is an optimized file format. Reducing or enlarging JPG/JPEG files can significantly alter their quality. In order to ensure the best quality, bitmap formats should be scaled to their target size before being submitted. Images should be no larger than 1,000 pixels wide or 600 pixels tall at the very largest size. I will scale these images to a suitable size. Images are scaled to be about 150 to 300 pixels wide so that the web page will render within 15 to 20 seconds for most site visitors. Large, complex images take too long to download and they will run off your visitors! Slightly larger versions can be made optional for visitors who really want to see a larger image and don't mind the wait to see that version.

Submitting Content

Send submissions via email, 1.44Mb diskette, or CD-ROM. If you need any materials returned, then please include a protective self addressed stamped envelope.

IMPORTANT: It is vital that all content for a web site be legally obtained. You cannot use any content that wasn't created by the web site owner or designer without explicit and written permission from that item's owner. The workings of copyright, trademark, and patent law are beyond the scope of this document. Just be sure to find out what you need to do, and get it done, should you need to venture into one of these realms.

Top of page  

Plan the Structure

After a web site's content has been decided, group common information together and then organize these groups into a hierarchical outline. Here is an example of a structure for a typical mission organization:

Main Page About Organization Our Mission [what you do, your unique burden, and your vision]
Our Statement of Faith [what you believe and any philosophical grid]
Getting Involved Prayer [includes link to prayer request section below]
Giving [where, how, accountability memberships, sponsorship programs, etc.]
Going [short term mission trips, etc.]
Our Staff Overview [with links to individual profiles]
Individual #1 Contact information [address, email, phone, etc.]
Background Training [how God prepared you for this]
Testimony [before, how, after]
Calling [how you ended up here]
News
Praise & Prayer Requests
Contacting the Organization Corporate/US info
Field Office Partner Organizations [info & links]
About Field/Country Culture Religious
Social Structure [family, clans, and tribal factors]
Observances [festivals, birth, marriage, illness, death, and other customs]
Activities [sports, arts & crafts, leisure, foods, holidays]
Political
Economic [economy, health care, road system, communications, media, clothing, major produce/products]
Geography [location, weather, terrain]
History & Language Language facts
Recent history
Ancient history
Additional resources [presentations, slide shows, bibliographies, downloads, links]
News [organizational rather than individual (if site is a multi-staff organization)] Recent
Archives
Calendar of Events Scheduled milestones & activities
Visitors coming to the field
Excursions, Surveys, or Furlough Trips
Prayer Requests Current Prayer Requests [specific]
Prayer Calendar [general]
Sign up for email prayer letters
What's New [What sections have been updated on the web site. This is especially appreciated by return visitors.]
Guest book [receive and respond to messages without giving using (or exposing) your email address]

Top of page  

As you build your structure, be aware that upper levels represent menus. You don't want to confuse your visitors with too many choices, so keep the number of items at the upper levels to seven or fewer. For example the opening menu in the structure given above would be:

About Organization
About Country
News
Prayer Requests
What's New
Guest book

The "About Organization" menu item would take you to another page showing this menu:

Our Mission
Our Statement of Faith
Getting Involved
Our Staff
Contacting the Organization
Partner Organizations

Both examples meet the "under seven items" guideline, so the menus are easier to use.

After the hierarchical decisions are finished, begin fine-tuning the structure. Give each item a title as it will appear on the web site. The last step is to sort items that are on the same level. For example, in the Culture section you might want to talk about the political culture before the religious culture if that has a greater bearing on your work.

Top of page  

Presentation

You don't want to change a house's foundation after you've built the rooms. It's important to get the foundation right at the beginning. Your structured content is the biggest part of your web site's foundation. A lot of wasted effort results from coding the visual presentation of the web site when its structure is in flux. This is especially true for graphically intensive web sites. Sites with text or database-driven menus can be more easily changed. But even here, getting the plan right the first time will save a lot of time and effort.

That doesn't mean you can't yet be planning the graphical layout. There are some decisions that can be made at the same time as you create your structure, or even your content. The most important graphical decision is creating the flavor of your site—the theme. A theme gives your site a consistent look, creates a memorable identity, and communicates integrity and stability.

For consistency, you'll need visual motifs to unify your site. The flavor of your site is set by a color scheme, use of your logo, icons, and font typefaces. You'll need to select those that set the correct mood. What emotions do you want to convey: compassion, energy, formality, etc.? This is a inherently difficult task, since you're trying to represent an abstract idea in concrete form, so keep at it.

One way to create an identity is to use visuals that already exist. Does your organization have a corporate color scheme (usually those used in a corporate logo)? Is your mission field identified by any special colors (e.g., the colors of the flag)? Is there any symbol, landmark, or item that is associated with your field or mission (e.g., Washington's apples, St. Louis Arch, Swiss Alps, Egypt's pyramids, etc.).

If there are several symbols to choose from, narrow your choices to just one. For example, if you wanted a "Florida" flavor, don't use oranges, alligators, palm trees, and sea shells. As with any good design, the KISS (keep it simple, stupid) principle applies. If the symbols are closely related, you could use several, but be careful not to make the graphics too "busy." An example where this would work is using beach motifs for a Florida flavor: sea shells, star fish, and sea horses could be used together as long at the variety wasn't too great. Tie all these elements together with a logo, a peach & sand color scheme, and a casual style font, and you have your THEME. After your visual theme is complete, you simply apply the motifs to each page and menu as dictated by the structured content.

Top of page  

Updates

If you're building a reference site, it's possible that your site won't change much. Most sites, however, will need to be dynamic so that visitors keep coming back and stay involved. When you web site goes online, start planning the next update. This can be news items, a photo gallery, calendar of events, stories, etc. Again, this goes back to content: what will they be looking for? What do they want to see?

An important way to serve repeat visitors is to have a "What's New" section on the opening page. This section should give a reverse chronological listing (most recent to least recent) of changes to the web site. For example "10/12/1999: October's ratings posted." The items in this list should be hypertext links so the user can jump straight to the new item instead of navigating through a bunch of menus.

Safety

Identity
Some mission fields are dangerous places. It may be necessary to limit information to prevent persecution. The two pieces of information you'll need to protect are your identity and/or location. That doesn't mean you're cut off from all communications however. Use trusted intermediaries to act as a conduit.

Schedule
Be careful about giving specifics of your schedule. If you mention that "we'll be on furlough all July" you may also be sending the message "come rob my house." If your location isn't available, this isn't a problem.

Hidden Pages vs. Protected Pages
Some web sites have hidden pages, where visitors are told the page's specific name so that they can see the page. No links exist for the page, so a small measure of security is obtained. You must control who has the name of the secret page just like any other secure item. Also, the web page designer will need to insert a robots meta tag to prevent search engines from indexing this hidden page and making its existence public. If any page needs to be absolutely secure, then you'll have to implement password access or secured server access.

Top of page  

Promotion & Search Engines

Promotion
After a site is completed it's time to get the word out to everyone. While it's nice to have a lot search engine referrals, that's NOT the best traffic generator method! Just like a big corporation, the best advertising is "word of mouth." Your main focus should be on getting the word out to everyone you know and everyone your team members know. Tell them to pass that word on as well. If any of them have web sites, ask them to put a link to your site. Do the same for every associated organization as well — have them pass on the word and put links to your site. Put it on business cards, prayer cards, prayer letters, slide shows shown at churches, in printed/electronic newsletters, etc. Have supporting churches/organizations put it in their weekly bulletin, on their bulletin boards, announced in classes, etc.

Search Engines: Spiders & Robots
The secondary method for generating web traffic is to submit your site to a search engine so it can be indexed. Once it is in the index, users of that search engine will be pointed to your site whenever they're searching for something related to your site.

The downside is that there can be a long delay between the time you submit your site to the engine and when the engine indexes your site (unless you're willing to pay cash). That's really not too big of a problem, as I'll explain later.

The first step for getting on a search engine is that the site must be registered. You basically tell the engine where to find your site and what your site is about. That information goes into a queue and you wait your turn. With thousands and thousands of web sites going up daily, your turn might take awhile. Big corporations pay a fee to be placed at the front of the line, and they are guaranteed a spot in the engine's database, and guaranteed a higher "ranking."

For the rest of the world, we have to wait our turn. When it gets to your turn, the engine sends a spider to crawl your site. This robot gathers all the text on each page, and examines the meta tags in order to build an index entry. The web designer is responsible for inserting the meta tags, but you can suggest what each meta tag should contain. The important meta tags are "title" (the web page's title), "description" (description of what that page contains) and "keywords" (a list of short, simple, and specifically relevant words. For example "Mission, Missionaries, Missionary" would be three good words for a mission agency's keywords). You can see the meta tags of a web page by using your browser's View/Source feature. They appear at the top of the document.

So the bad news is it may take awhile for an engine to crawl your site. In addition, each spider uses its own logic as to which sites it crawls first. For example, a site with its own domain name often gets precedence over a site located on a large commercial service server (e.g., CompuServe, AOL, etc.) The spider assumes that anything found at ourworld.compuserve.com/homepages is a personal web page. It gives personal pages very low priority since they tend to lack any really useful content, often are unfinished experiments, and frequently fly-by-night sites (i.e., by the time the spider arrives, the site has been deleted).

Here are a list of top search engines:

AOL Search: http://search.aol.com, AltaVista: http://www.altavista.com, Ask Jeeves: http://www.askjeeves.com, Direct Hit: http://www.directhit.com, Excite: http://www.excite.com, Fast Search: http://www.alltheweb.com, Go, Infoseek: http://www.go.com, Google: http://www.google.com, HotBot: http://www.hotbot.com, Inktomi: http://www.inktomi.com, InfoSeek: http://www.infoseek.com, LookSmart: http://www.looksmart.com, Lycos: http://www.lycos.com, MSN Search: http://search.msn.com, Netscape Search: http://search.netscape.com, Northern Light: http://www.northernlight.com, RealNames: http://www.realnames.com, Snap: http://www.snap.com, WebCrawler: http://www.webcrawler.com, Yahoo: http://www.yahoo.com,

Top of page  

Maintenance

The customer must perform regular maintenance on the site. I wouldn't go more than a month without doing a full checkup on most sites. Periodically, review every page for accuracy. Has an address or phone number changed? Has an organization mentioned changed names or logos? Do hyperlinks to other websites still work (they may have shut down or relocated)? Is any information outdated or obsolete? Is any photo or picture broken or missing?

Some sites may require frequent updates. A weekly newsletter, for example, requires an update to the web site every week. While a newsletter is better sent as an email than posted as a web page, there may be a valid reason to use the web page approach (e.g., it contains rich media such as a video, sound, music, downloadable data, large graphics, etc.). Updates will need to be handled by the customer — either directly or by someone to whom they delegate.

Top of page  

Questions? Contact

Top of page  
Return to previous page.