Church webs made simple (2005)

Training presentation outline

Web site planning

Web page design

Web site maintenance

Webmaster resources

Church Technology Training (access to 2003-2006 session information)

Viewer

WinZip

Web Site Design

You are here: Communications & Technology > Church webs made simple > Web site design

When you start web site planning, you'll need to establishing a standard design.

Web page goals

Web pages are not just an online printed page. Remember to consider the following tips:

  • Easy to read

  • Easy to navigate

  • Fast to "load" (display time)

How to meet web page goals

  • Keep pages short whenever possible. That reduces vertical scrolling as well as the "weight" (transfer time) of the page.

  • Avoid using church jargon. Don't turn off people, who don't know those terms.

  • Use simple language. Aim for ease of reading.

  • Use a simple design. Avoid using several fonts or several colors. Doing so makes the page look like a circus poster -- not what you're aiming for.

  • Use fonts that are resizable (relative), not "point" sizes.

  • Use styles instead of "FONT" tags and the like whenever possible.

  • Use standard menu placement

  • Right-size photos. Don't use a huge image and just tell the browser to display it in a smaller size. that wastes display time. Instead, use a photo editor to resize the photo for the specific display size you need.

  • Using tables for layout is not the "best" method for designing a web page, but it's the easiest and fastest for beginners and people who are volunteers and lack a lot of time to do the design.

Page properties

  • Specify a page background color. If you don't specify a background color, and you "assume" it will look white in the visitor's browser, you could be sadly mistaken. Always specify a background color.

  • Add META tags. The key ones are: title, description, and keywords.  In FrontPage 2003, boxes to add Title, Description, and Keywords text are all on the default Page Properties dialog sheet. RIGHT-click in a black area of a page and select "Page Properties".

    • TITLE. Always include a page "title".  That appears in the browser window's Title bar.  It's also the title of the search results in many search engines.  You don't the search result or window title to be "New Page" do you?

    • Description.  Boil down what the page is all about into a 25-words or less description. Search engines have a limit as to how much of the "description" attribute that they will show in their search results. Be pithy.

    • Keywords. Add as many key words and phrases, separated by commas, as apply to that page. Don't add ones that don't apply to that web page. And don't repeat the words or phrases.  That old "trick" to get better search rankings is being penalized by search engines now.

  • Go ahead and use tables for layout purposes.  Purists will tell you that tables were intended only for tabular data. While true, they are also the easiest way for volunteer part-time web page designers to "get the job done" quickly.  The method now coming into vogue is to use Cascading Style Sheet and XHTML abilities to make similar layouts.  But not all browsers yet support all the CSS and XHTML that would be needed. Don't fight it -- go ahead and misuse tables.

Table tips

  • Use "flexible" tables -- set the width to a percentage, not fixed size.  Why? If a visitor's monitor screen resolution is a higher or lower one than yours, they may either have to scroll sideways to see your whole page or your page may display as a smaller column at the left of their large screen. If tables and cells use percentages, they adjust in size depending on screen resolution.

  • Keep nesting to a minimum. It's OK to nest tables, but the more complex the nesting, the more chance that a browser won't display it right.  You can usually accomplish the same thing without a lot of nesting.  Remember -- KISS.

  • Align the table as needed. A table can be aligned left (the default), middle, or right. Fancier choices are available, but these are the basics.

  • Default vertical cell alignment is "middle". Remember that tables were originally intended for display of tabular data. So if you want your text to start displaying at the top of a table cell, change that in Cell Properties. In FrontPage, RIGHT-click on the cell (or highlight several cells to be changed at once) and then select "Cell Properties". Change the "Vertical alignment".

  • Table cell padding, spacing, borders.  Play with these settings until you get what you like. In many cases, all three will be set to zero (0).  Styles can set paragraph margins, so "padding" may be irrelevant in your design anyway.

  • Colored borders.  You can set the table border to the same color as a solid background color and it will seem to "disappear".  But setting any table border then lets you set a color for individual cell borders.  Cell borders will appear as thin colored rules around the table. A table border displays thicker than a cell border and is useful in a one-cell table that is used to make a "box" in the web page.

  • Table backgrounds can be a problem.  Some older browsers don't correctly display a table background. So if you have both table and cell backgrounds, watch out. Either test this in older browsers or avoid the conflict by using only cell backgrounds.

  • Use table or cell shading, but carefully. Remember to keep the contrast high of foreground (text or image) to background color. Also remember to consider your audiences. Avoid wild colors. The color scheme you choose will reflect on your church.

  • Data table? Mark "header" cells.  In a true data table, you need to indicate which cells are "header" ones (column headers, for example).  In FrontPage, their is a check box in the left part of the Cell Properties dialog sheet.

Text design tips

  • Use logical font size progression. Use a Heading 1 style for the most important headline type element on the page.  That's often the church name. That is, use the "Heading 2" style for the next most important element, usually the page title. Use Heading 3 for the element that's less important than Heading 2. Follow this same rationale even if you add your own styles for elements.  Size and thickness (weight) should directly relate to relative importance of the text it applies to.

  • Make different head types easy to see. Make differences in size and weight of various "headline" type elements visually identifiable.  Don't make the sizes between Heading 2 and Heading 3 too close, for example, or the visitor will have a hard time quickly noting which is which. Go for ease of reading.

  • Use a readable sized font (remember to use relative sizes, not fixed points or pixels)

  • Use styles and style sheets to position paragraphs (indentation left or right and spacing top and bottom) and format text.  You can even use a style on an image tag (IMG) to make it display images with a thick border, mimicking a printed photo.  For an example, see a  Avondale Pattillo UMC photo album.

  • Avoid "old" tags such as the "<FONT> one.  These are on the way "out" in international standard use.

  • Don't misuse the <blockquote> tag. Only use the paragraph "Increase Indent" (FrontPage), which really adds the <blockquote> tag (a.k.a. "element"), for a real block quote, as below. A block quote has equal left and right margins and is indented from the main body text.

"In a sense, the blockquote element is one of the few HTML elements with a well-defined meaning. It indicates a block of text quoted from an external source."
-- from "Writing block quotations", http://www.cs.tut.fi/~jkorpela/html/bq.html

Multimedia tips

  • Use a single pixel transparent GIF file to force table spacing when you need to. One such file is used in this sub-web, 1pixel.gif.

  • Avoid designing a graphics-heavy page. They take longer to display. You may have broadband, but how many site visitors will?  Remember your audiences when designing.

  • RIGHT-size photos. If the original photo is 1024x768 pixels, for example, but you only need to show it at 200 pixels wide, edit the photo and save it as one that's 200 pixels wide -- the RIGHT size. Large photos slow down page displays.

  • Use only what you need to. You could add "pop" with fancy graphics, Flash movies, streaming video, background sounds, large photos, and the like.  But why?  Don't use something just because you can or because you'd like to show off your talent.  If the design element is truly essential to the information you need convey on that page, add it.  Otherwise, leave it out.  The information is what's important. Remember your audiences. Keep it Simple for Surfers (KISS).

  • Make sound optional.  If you really need to add a sound file to a page, consider making it a link that the visitor can click on rather than an automatic play.  Forcing the sound to automatically play affects page display time. And some users are irritated by page background sounds. And if they happen to be playing a CD in their computer while they visit your site, sound will mix with the CD music, which is very irritating, to say nothing of inconsiderate.  Make sound optional.

Establish a standard web page design

Keep a consistent look across your web site. Avoid a "splash screen" that looks pretty but is an obstacle between the site visitor and your home page. Decide on menu type and placement, number of columns, a standard header, standard footers, and so on.

This sub-web contains some sample simple designs that use tables for layout (the newest method uses DIV tags and CSS -- no tables for layout). Feel free to copy and adapt as you need. Use your adapted page as a template for new ones you create.

3-column, 100% wide, breadcrumb line, left column menu, right side-box

3-column, 100% wide, breadcrumb line, left column menu, empty shaded right column

3-column, 100% wide, breadcrumb line, left column menu, right column box

 

2-column, 80% wide, no breadcrumb line, horizontal menu, left menu box

2-column, 80% wide, no breadcrumb line, horizontal menu, left column slogan box

2-column, 80% wide, no breadcrumb line, horizontal menu, right column box

2-column, 80% wide, no breadcrumb line, horizontal menu, left syndications

2-column, 80% wide, nameplate with logo, no breadcrumb line, horizontal menu, left syndications

2-column, 80% wide, nameplate with logo, no breadcrumb line, horizontal menu, left column menu box

Also included at this site is a ZIP file of calendar template web pages.  The pages cover each different "start day" for a month. An alternate is to buy an online calendar service such as the one offered by Communications Resources, Inc.  The Avondale Pattillo UMC online calendar is one such commercial service, included as part of their Church Art Plus, which includes access to clip art plus the calendar plus a "birthdays" feature. This is one of many commercial sources of clip art and online calendars.

This page is part of the 2005 district training for the
Atlanta-Emory and Atlanta-Decatur-Oxford districts,
North Georgia Conference of the United Methodist Church

Questions? Contact webmaster

This page was last edited 03/20/2006 11:30 PM