IT for Church IT for Church Communications: Web Communications: Web Site DesignSite Design

MSCM 8630 IT for Church Management

Dr. WagnerOctober 30, 2008

This week in class…This week in class…Two on-line sessions this week

◦Thursday night 7:30 p.m. ET◦Tuesday morning 9:30-10:30 ET (office

hour)Continue reading

◦Go over articles from CC magazine◦Chapter 5 of the Welch book for next

weekDiscuss web design technology

◦ Look at web sites and critique◦ Fourth assignment posted shortly (personal

web page)◦ Choose a web design tool

Begin learning with books, Element K, etc.

Some comments about your Some comments about your proposals…proposals…

Lots of web sites and databases

Spend time up front to plan design

Interview stakeholders◦ Test out designs

View it as prototype

Create summary document of project

How about some more How about some more database queries (true geeky database queries (true geeky fun)?fun)?

Northwind databaseSingle, multi-table queriesOther operatorsBasing a report on a queryData maintenance operators

◦ Delete, update, append (caution here!!)

Article: 25 Church Website Article: 25 Church Website Design TipsDesign Tips

1. Don’t use splash or intro screen- Except when there are multiple sites behind it

2. Don’t use all Flash sites- don’t use small text and don’t force users to

scroll down too much

3. Allow visitors to turn off Flash animations4. Don’t use frames5. Don’t use buttons in menus – use text

links6. Don’t use tiled backgrounds

Article: 25 Church Website Article: 25 Church Website Design Tips (2)Design Tips (2)

7. Don’t use gifs, counters, or rainbow colors

- Keep credit line subdued

8. Don’t use denominational logo in banner- Should have a church logo

9. Don’t put photo of church on home page- Photos of people show community more

10.Don’t advertise on your home page- Focus main page on new people

11. Add a “what to expect” page to website

Article: 25 Church Website Article: 25 Church Website Design Tips (3)Design Tips (3)

12. Include essential info on home page

- Make it easy to find. Segment by gender?

13. Add scripture to home page14.Include key email addresses and form

for inquiries- Disguise email addresses to avoid spambots

15.Make website more than just an online brochure

16. Avoid drop-down and slide-out menus

Article: 25 Church Website Article: 25 Church Website Design Tips (4)Design Tips (4)17. Don’t confuse visitors with

interior navigation links18. Use easy to understand labels19. Underline links in text20. Illustrate ministries with photos21. Include captions on photos22. Don’t call audio downloads

“podcasts”23.Don’t use audio/music backgrounds24.Include time zone info for live broadcasts25.Make site disabled friendly

From 100 Best Parishes…Picked 3 sites to look at randomly

◦St. Bridget of Richmond VA http://saintbridgetchurch.org/

◦St. Mary of Helena, MT http://stmaryhelena.com/

◦St. Timothy of Blain, MN http://www.churchofsttimothy.com/

◦Mountain Lake Church of Cumming, GA http://www.mountainlakechurch.com

(cited in article)

What does Welch say?Religious Web Resources

◦Vatican www.vatican.va◦U.S. Bishop’s Conference

www.usccb.org◦Catholic News Service

www.catholicnews.com◦Paulist www.bustedhalo.com◦The Taize community www.taize.fr◦Irish Jesuits www.sacredspace.ie◦Wing Clips www.wingclips.com◦GodTube www.godtube.com

Important Secular SitesFlickr www.flickr.com site for

downloading picturesWikipedia www.wikipedia.orgYouTube www.youtube.comDel.icio.us social bookmarkingiTunes www.apple.com/itunes for

audio or video podcasts

Basics of Web Page DesignBuilding a content-only Web page

is easyEveryone is doing it for a variety

of reasons◦Family Web site◦Evening sports league team◦School classes (by me)

Basics of Web Page DesignA word of caution when building

a personal Web siteDon’t include too much personal

informationDon’t include (as a general rule)

◦Your address◦Your phone number◦Your unique IDs

HYPERTEXT MARKUP LANGUAGE (HTML) HTML – the language you use to

create a Web siteHTML allows you to

◦Specify the content◦Specify the formatting for content

HYPERTEXT MARKUP LANGUAGE (HTML) To create a Web site, you must

create an HTML documentHTML document – file that

contains your Web site content and the HTML formatting instructions

Web page is a view of an HTML document from within a Web browser

Creating an HTML DocumentUse any text editorFor example, in Notepad:

◦Click on Start◦Point at All Programs◦Point at Accessories◦Click on Notepad

Create HTML document and save with htm or html extension

HTML Document SectionsHTML tag – specifies the

formatting and presentation of information in a Web site

Structure tags – HTML tags that set up the necessary sections

Two major sections in an HTML document◦Head section◦Body section

HTML Document Sections

Body section

Structure tags

HTML TagsUsually are <tagname> and </tagname>

Entire HTML document<html><head></head><body></body></html>

HTML Document

Resulting Web Page

Image

Lists

Let’s try our own page…A number of web design tools out

there◦MS FrontPage 2003 (via Citrix?)

Basic web design tool

◦Dreamweaver Most popular professional tool Lots of Element K support

◦MS Expression Web New, well-rated package 90 day download available No Element K support

Assignment for next weekAssignment for next weekWork on the Web design tutorials

on Element K (if necessary)Read up on Web search engines

◦ 2 articles sent shortly◦ Welch chapter 5

Start work on personal web page◦ Assignment 4 to be posted shortly

Questions?Questions?