Planning Guide Part Three
-
Upload
tim-stockton -
Category
Documents
-
view
214 -
download
0
Transcript of Planning Guide Part Three
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 1/54
This is part three of the four-part training for Web Ministry
101. In part one, we covered the first seven steps to
developing an effective Web ministry by considering how
to access the power of the Internet. In part two, we shared
steps 8–12, which outline the basic material, human, and
financial resources you will need to develop a powerful
Web ministry, including the basic website design and
hosting options available to you. In this third part of the
training, we will introduce the concept of developing a
user-centered website as your primary tool for Web
ministry. Our goals for this part of the training are to:
• Create or select an engaging design that is
user-centered
• Develop a site map to organize the various
sections and subpages of your website
• Understand and implement a user-centered
website navigation strategy
• Gather and prepare content, graphics, and
photographs to present a dynamic, user-
centered website• Develop content protocols
• Protect users and members privacy
The main question we want to answer in today’s training
is, “How can you create a user-centered website that
fulfills your Web ministry goals?” In particular, we want to
empower you to use creative design and site navigation to
make your website easy to use and to present content that
meets the needs of your users.
First, let’s define what we mean by user-centered design.Many organizations and companies launch websites from
their own perspectives. In other words, they decide what
to put on their websites based upon what they think people
need or want. As we explored in part one of this training,
we believe an effective Web ministry carefully determines
HoHow can yw can you cr ou cr eaeate ate auser user -center -center ed wed weebsitebsitethathat fulfills yt fulfills your our WWeebb
ministr ministr y gy goals?oals?
5858
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 2/54
what the user or visitor to your site actually needs and
wants. We then allow these findings to drive the
development and design of the website. Our primary
considerations for a user-centered design are ease of use,
content, performance, trustworthiness, and overall user
satisfaction. As a result, we want to insure that the
usefulness of our websites provide relevant information
and opportunities that match the users’ needs.
With regard to design, a user-centered website is visually
appealing and engaging without being too busy or
cluttered. Likewise, the design or look of your website
should reflect the personality or message of your church.
If you are planning to use E-zekiel or another template-
based website design tool, you will want to review all the
possibilities and test a few with your Web ministry team
and stakeholders before making your final choice. If you
are designing a website from scratch, either in-house or
with a website development consultant or company, be
sure to create two or three different designs to share with
your team and stakeholders and get their feedback beforemaking a final decision.
With some basic understanding of user-centered design,
it’s time to create a unique image and design for your
church’s website. Even if you are using a template-based
design service, you can create a unique image by using a
logo or graphic that is specific to your church’s personality,
ministry, and mission. For many local churches, the United
Methodist insignia, the Cross and Flame, is their primary
logo. Use of The United Methodist Cross and Flame is by
permission only. It is a registered trademark of The UnitedMethodist Church and, as such, is a protected copyright of
the Church. While you are free to use the Cross and
Flame on your website, you will want to review the
guidelines for using the insignia and make sure you
represent the Cross and Flame appropriately on your
Step #13:Create a Unique Image
and Design
5959
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 3/54
website. To view the Cross and Flame guidelines, visit the
website of the General Council on Finance and
Administration of The United Methodist Church.
Many churches, in addition to displaying the Cross and
Flame, have developed a unique image to reflect the
ministry and mission of their church. If your church has
already created something like this, you should consider
how you will use it in your website design. It is not
necessary to create a unique image for your local church;
however, if this is something you are considering as a part
of your overall website design, be sure to create an image
that can be used throughout your church’s ministry and
not just for your website. As a result, you will want to
involve more than just your Web ministry team in the
process of creating a unique image for your church. On
pages 73–75 of this Guide, we offer a few samples of
unique images developed by local United Methodist
churches.
With or without a unique image, you still have severalchoices to make with regard to the design of your website,
even if you are selecting the template-based design
option. The first major decision is color. Color is a very
important decision because it immediately communicates
a message to the user as soon as he or she accesses
your website. The exact same design can say something
very different if it is represented in red versus pink. Even
without a unique image, color can give your website a
custom look and feel.
While you are free to choose any color of the rainbow,keep in mind that not every browser will represent that
color accurately. Therefore, we encourage you to select
what are called websafe colors. Chances are you will be
able to find the color you are looking for in the websafe
palette. If you do choose a color outside this palette, you
6060
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 4/54
will be able to make it display accurately in all browsers by
saving it as an image or graphic. A website designer will
be able to create this for you as a part of the overall
website architecture. With E-zekiel and other template-
based design packages, you will be able to select any
websafe color from the palette or import a saved graphic
or image you have created. See page 76 of this Guide for
links to websafe color guides and exciting color palette
ideas.
The next decision to make with regard to design is the text
style or font you will use. Again, there are a few universal
fonts that represent well in most browsers. These include
Arial, Times New Roman, and Verdana or similar font
families. A complete list of websafe fonts is available on
page 77 of this Guide. Most churches, however, will want
to display a custom or unique font at least for headings. In
this case, we recommend that you save these custom text
items as graphics instead of trying to select the font style
from the drop-down menu. This way, the graphic will truly
represent the exact font in every browser. We do notrecommend converting all text to graphics for your
website. This will greatly increase the time it takes to
display each page on your site; and unless you provide
descriptive alternate text for each graphic, your content
saved as a graphic will not be searchable by Google or
other search engines. Therefore, we recommend that you
select one of the websafe fonts for the body text.
In addition to choosing a text or font style, you will also
want to consider the size of the font. We recommend using
a font size of 10 or 12 point for body text. This is easilyreadable for most users. Likewise, we would recommend
that your title or header fonts are 18 to 24 points; however,
you have a lot more flexibility for these when designing
your site. In particular, you want the title or heading to be
6161
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 5/54
larger than the body text so that users immediately know
what they are reading about and can decide at a glance if
this is the information they are looking for.
The next design choice you want to make is regarding
photographs and graphics. First, let’s talk about what
these are and how they differ from one another. A
photograph, as you know, is taken with a camera. These
pictures can be converted to a digital format and used on
your website. Graphics are things like logos, clip art, and
line drawings. They typically contain only a few colors or
variations on one color, as with a grayscale or black and
white image.
Photographs and graphics can add a unique look and feel
to your website even with the template-based design
option. It is a good idea to create a library of photographs
and graphics that you may use on your website. In
addition, there are many photographs and graphics
available through United Methodist Communications and
other United Methodist boards and agencies to representa myriad of ministries. Keep in mind, though, that some
photographs and graphics are copyrighted. Make sure you
have the appropriate permissions to display these images
on your website. If you have any doubt, err on the side of
not using them until you know for sure that you have
permission to display them. Creating or selecting a design
that represents the unique image or personality of your
church is essential to developing an effective user-
centered website. This design includes color; a logo or
unique image; font style and size; and other photographs
and graphics. All of these communicate seamlessly to theuser who you are and what you are about.
Now it’s time to decide how these design elements are
displayed on the webpage. Let’s start with the first thing a
user will see when he or she accesses your website: the
Step #14:Create a Welcoming
Home Page
6262
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 6/54
home page. Your home page is the portal to the rest of
your site. It is like the front door of your church meant to
be welcoming and lead the user to all the ministry
opportunities available upon entering. In addition, your
home page should showcase the latest ministry news for
your church so that frequent users can immediately see
what’s changed since their last visit.
Key to developing a user-centered design for your home
page is the navigation menu. The site navigation menu is
the number one element that can make or break your
user-centered website design. If users cannot locate
information quickly and easily, they will become frustrated
and leave your site disappointed.
Many home pages are designed to look different than the
rest of the main sections and subpages of a website. The
home page, generally, serves more as the title page and
table of contents than as the answer to every user’s
questions and needs. As such, it is usually crisp and clean
with the site navigation as the prominent feature so theuser can quickly get to the information he or she wants to
find. On pages 78–82 of this Guide we offer several
examples of welcoming home pages from local United
Methodist church websites.
One way to outline your websites navigation menu is to
create a site map. This is the blueprint or road map for
your website and provides a clear picture of how pages
are linked together and how they relate to the whole
website.
From your website’s home page, users should be able to
go directly to any of your main sections with one mouse
click. These sections, then, must have a direct link from
your home page. Therefore, you will want to design your
Step #15:Create a Site Map and
Navigation Tools
6363
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 7/54
website to include the main sections of your ministry in the
navigation menu of the home page. As your create your
site map, these main sections would be the first tier under
the home page.
There are certain main sections we recommend you
include in the first tier of your church’s website. If you are
using E-zekiel as your website design and hosting service,
every website in their template-based design will start with
four sections in the first tier. These include Events,
Contact Us, Site Map, and Home. In addition, we
recommend adding, at a minimum, About Us, Worship,
and Links. If you have other ministry areas, such as
Christian Education, Missions, or Youth, we recommend
that you consider how these will be listed as a part of your
site’s main sections, or if they will form the second tier and
fall under one of your first tier sections as subpages. On
pages 83–85 of this Guide, we offer several examples of
site maps and navigation tools to make your website user-
centered.
In addition, anything on your home page should provide a
direct link to the rest of the story or more information. Most
home pages contain some feature items in the body of the
page. These would be the most relevant, important, or up-
to-date displays of information that you know the user is
looking for. Within the body, you can embed a hyperlink
that takes the user directly to this information. Generally,
what you display on the home page is a teaser to the rest
of the information. Since most users skim or scan pages
for information rather than read everything word for word,
teasers should contain the essence of the information anddirect the user to the rest with just one mouse click.
Once a user leaves your home page, he or she should
always know where he or she is within your site. To
accomplish this, we recommend using what are called
6464
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 8/54
breadcrumbs. Breadcrumbs tell the user, “You are here,”
and display the trail that has led to this point. This way, a
user can return easily to a previous location without having
to use the “back” button in the browser window. Likewise,
breadcrumbs help users to see how pages are linked so
they can stay connected to the main sections of your
website. Finally, breadcrumbs help the user to find his or
her way back home.
In addition to using breadcrumbs, each page of your site
should contain the site navigation menu. If your pages
extend beyond the bottom of the browser’s window, we
recommend that you add the navigation menu to the
bottom of the page, too. This way, if a user is scrolling
down your page, he or she does not have to scroll back to
the top in order to move to a section of your site.
In addition to a design for your website’s home page, you
will want to develop a design for the main sections of your
website. This design will have some of the same
components of the home page in terms of color, image or logo, font style and size, and photographs or graphics.
But, these may be arranged differently to allow for more
space or prominence for the information contained on
these pages. As with the home page, the main sections
should include easy navigation.
From your main sections, you may have links to
subpages. These subpages may have the same or similar
design as the main sections. What makes them different
from the home page and main sections is that they will not
be a part of the navigation menu of the website unless youuse drop-down or expanded navigation tools. Some
template-based designs will not support drop-down or
expanded navigation. In this case, you will want to use
hyperlinks to direct users to these subpages. You would
6565
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Step #16:Create Main Sections
and Subpages
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 9/54
still include these subpages in the breadcrumbs. See
pages 86–89 of this Guide for examples of main section
and subpage designs based upon the home pages shared
on pages 78–82 in Step #14.
So far, we have considered options for design with regard
to a unique image or logo, color, font, photographs, and
graphics. Next, we explored the different functions of a
home page, main sections, and subpages and shared the
importance of creating a site map. With the site map, we
considered the prominence and consistency of site
navigation menu and the use of breadcrumbs.
Incorporating these essential elements into your website
will ensure a highly effective, user-centered website.
Now it’s time to populate or add content to your site.
Working from your site map, which outlines the different
sections and subpages of your website, you will want to
gather and prepare content to form the body text for each
page. Most of this content will come from existing printed
documents, such as brochures, flyers, and newslettersthat your church has already produced as well as from the
staff members and volunteers who work directly with the
program or ministry areas of your church.
If you are relying on existing print documents, you will
want to edit these for the Web versus copying and pasting
them into the body of your pages. Generally, visitors to
your website will skim your pages to find the information
they are looking for. Therefore, it is important to share the
essential information in one to two sentences versus one
to two paragraphs. As a result, you will need to condenseany existing print documents by extracting the most
important points and presenting each of these in clear and
concise, short sentences that visitors can skim in order to
find what they are looking for. These one or two clear and
concise sentences are often referred to as the teaser.
6666
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Step #17:Populate Your Website with
Engaging Content
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 10/54
Again, teasers allow users to quickly and easily skim the
page and click for more information if they’re interested.
On page 90 of this Guide, we offer one example of a
website that uses teasers on its home page to entice
visitors to click and read more.
With pages that present a lot of content, be sure to
organize the information so the visitor does not have to
work too hard to understand the information. You can
accomplish this by using clear headings, subheadings,
and bulleted lists. If the information is not organized well
or is too hard to follow, visitors will stop reading and move
on to something else. Keep in mind that you want the
content on your website to pull in and lock users, to inform
and educate them, and to offer answers to their questions.
Page 91 of this Guide provides one example of a local
United Methodist church website that contains a lot of
information that is organized well using subheadings.
If there are print documents that you want to make
available, as is, through your website, such as bulletins,brochures, or flyers, you can save them as portable
document format or PDFs that can be downloaded by the
user and opened, read, and printed using the free
software, Adobe Acrobat Reader. To create a PDF of an
existing document, you will need Adobe Acrobat software,
which can be purchased from TechShop at a significant
savings over retail. This software will enable you to
convert existing documents into PDFs as well as create
fill-in forms that users can download, complete, and email
back to you. If you use a Macintosh computer, you can
create a PDF of any document by selecting this optionwhen you print. Instead of the document printing on paper,
the document will be saved in PDF as a new file. However,
you cannot create fill-in forms with this same feature. You
will need the complete Adobe Acrobat software to
6767
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 11/54
accomplish this.
When you provide PDFs on your webpages, we suggest
that you always alert users that by clicking on a link to a
PDF they will be opening the document in a new broswer
window or downloading the document directly to their
computer. Some PDFs with many pages and graphics can
easily be 1 MB or larger. This can mean a very long
download time for some users, especially those using dial-
up connections to the Internet. When listing a link to a
PDF, let the user know by placing PDF and its size in
parentheses next to the link. See pages 92–93 for more
information about using Adobe Acrobat Reader, creating
PDFs, and other content resources.
Finally, with regard to the content on your website, you will
want to establish some protocols or guidelines for how this
information will be updated and how new content will be
prepared. Whether you have one person or many people
contributing content for your site, maintaining some basic
protocols will help to keep the information consistent
throughout your site. In particular, you will want to decidehow content should be delivered to the person responsible
for posting it to your site. Should the information be in
electronic form using Microsoft Word or another word
processing program? Should it be delivered on disk or
sent via email? Should it be in print form alone or in
addition to the electronic format? Answering these
questions and developing some basic protocols will save
valuable time for the person preparing and posting the
content.
Likewise, you will want to provide a written protocol for how body text or content, headings and subheadings are
displayed on your website. These are commonly referred
to as style guides or stylesheets. This will enable every
page to look the same when it comes to the words
displayed on the screen, and it ensures a clean,
6868
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Step #18:Develop Content Protocols
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 12/54
uncluttered, and consistent presentation to your users.
Sample styles guides and content protocols are provided
on pages 94–100 of this Guide, and we encourage you to
review these with your Web ministry team, revise or adapt
them for your use, and implement them with your website.
Earlier in this session, we talked about collecting
photographs and graphics to use as a part of your
website’s design. Some of these may appear on every
page of your site depending upon their use as a part of
your site’s overall design. In addition, you may select other
photographs and graphics to enhance the information or
content you offer on each webpage. For example, if your
webpage contains information about United Methodist
Women, you may choose to use the logo next to the
information. This visual cue will immediately catch the eye
of a user looking for this type of information. Remember to
get copyright permissions for any photographs or graphics
you are borrowing from others and be sure that you
understand the rights and permissions associated with
displaying these images on your website.
After you have selected appropriate photographs and
graphics, you must prepare them for the World Wide Web.
This means that they must be in a digital format that can
be viewed easily on your webpages. If you are working
from a printed photograph or graphic and cannot access a
digital version of it, you will have to convert it into a digital
format. Using a scanner connected to your computer,
digitize the image at a minimum of 200 dots per inch. Save
the digitized photograph as a JPEG or the graphic as a
GIF. These are the most appropriate formats for the twomain types of images displayed over the Internet.
If you have the photograph or graphic already in digital
form or have scanned and saved it as we just discussed,
the next step is to edit the image using one of many
6969
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Step #19:Add Photographs
and Graphicsto Enhance Content
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 13/54
image-editing software programs. From the image-editing
program, make the following adjustments to your
photograph or graphic:
1. Change it to RGB color, if necessary.
2. Crop the image as desired.
3. Change the resolution to 72 dpi and constrain
proportions.
4. Adjust the width or height to the exact pixels
needed to fill the space on your webpage.
5. Save the image in the proper format.
Now you’re ready to insert the photograph or graphic into
your webpage. For more information on converting
photographs and graphics for the World Wide Web, as
well as links to United Methodist sites with photographs
and graphics to download, see pages 101–102 of this
Guide.
Let’s take a few minutes now to talk about terms of use
and privacy policies for your website. You may havenoticed these when you visited other sites. Generally,
users don’t take the time to view these, but it is good idea
to post them for your own protection. Basically, you are
telling visitors to your website what its intended use is and
how you will protect their privacy if they share any
personal information with you. In addition, there are
Federal regulations governing your responsibility when it
comes to use of your website by children.
In general, the terms of use and privacy policies are
presented clearly and conspicuously, usually by a link atthe bottom of the home page and about us page, at a
minimum, or a link at the bottom of each page. When
users access these page, they learn what information you
may collect from them, such as email addresses, let them
choose how that information is used, how you will protect
their personal information, and how you may use it if they
7070
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Step #20:Protect Users
and Members Privacy
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 14/54
give you permission. Always include a way for users to opt
out of sharing any personal information but still have
access to your site’s information. Sample “Terms of Use”
and “Privacy Policies” from local United Methodist church
websites can be found on pages 103–104 of this Guide.
We recommend that you seek legal advice when crafting
your own “Terms of Use” and “Privacy Policy” statements
to be sure they are legally sound and that you understand
your liability and responsibility.
With regard to children, you must obtain parental
permission before collecting any data from children. This
includes providing parents with notice of your information
practices, obtaining verifiable parental consent before
collecting a child’s personal information with limited
exceptions, giving parents a choice of whether their child’s
information will be disclosed to third parties, providing
parents access to their child’s personal information and
allowing them to review it and/or have it deleted, giving
parents the opportunity to prevent further use or collection
of information, not requiring a child to provide moreinformation than is reasonably necessary to participate in
an activity, and maintaining the confidentiality, security,
and integrity of information collected from children. For
more information and a link to the Federal guidelines, see
page 105 of this Guide.
While this may seem like a lot to consider, it is essential to
preserving the safety of children who use the Internet, and
it is in direct compliance with our Church’s commitment to
providing Safe Sanctuaries for Children and Youth, which
extends into cyberspace when your church becomes apart of the World Wide Web.
In addition to considering the privacy protection of users,
you will want to preserve the privacy of your members. In
particular, you will want to err on the side of caution
7171
Part Three:DeDevveloping a User eloping a User -Center -Center ededWWeebsitebsite
Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 15/54
whenever you list a person’s name, email address, or
place names with photographs. Generally, with regard to
staff, there is a viable reason for listing names and even
email addresses or telephone numbers. When you do list
email addresses, it is a good idea to disguise these. The
reason for disguising email addresses is that “spiders”
crawl billions of pages on the Internet looking for the “@”
sign. They capture all the characters that precede and
follow the “@” sign as an email address and then use this
to send SPAM to you. There are some simple ways to
prevent this, and we offer a few easy-to-follow instructions
on pages 106–107 of this Guide.
With regard to volunteers and members, you will want to
obtain their permission before listing their names, email
addresses, or telephone numbers. If you do list names, we
recommend first names with last initials versus displaying
a person’s full name. Not everyone who visits your website
will have the best interest of your volunteers and members
foremost in their minds. And, some will siphon this
valuable information for personal gain.
Likewise, when displaying photographs of people, make
sure you have their permission first; and again, only list
first name and last initial at the most when identifying
people in pictures. With regard to photographs of children,
any picture in which a child’s face is clearly visible must
have parental permission before posting to your website.
We recommend that you never include any name or other
identifying information with any picture of a child or
children. On pages 108–111 of this Guide, we offer sample
release forms for gaining permission of volunteers andmembers regarding use of their information and image on
your website. We recommend that you seek legal advice
when crafting your own release forms to be sure they are
legally sound and that you understand your liability and
responsibility.
7272
PartThree:Accessing the I Accessing the Inter net f net f or Ef or Ef f f ectiectivveeWWeeb Ministr b Ministr yy
Web Ministry 101 Planning Guide Part One: Accessing the Power of the Internet for Effective We Ministry© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 16/54
Step #13:Cr Cr eaeate a Unique Imate a Unique Imagge and Designe and Design
7373Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Even if you are using a template-based design service, you can create a unique image by using a logo or
graphic that is specific to your church’s personality, ministry, and mission. For many local churches, the
United Methodist insignia, the Cross and Flame, is their primary logo. Use of The United Methodist Cross
and Flame is by permission only. It is a registered trademark of The United Methodist Church and, as such,
is a protected copyright of the Church. While you are free to use the Cross and Flame on your website, you
will want to review the guidelines for using the insignia and make sure you represent the Cross and Flame
appropriately on your website. To view the Cross and Flame guidelines, visit the website of the General
Council on Finance and Administration of The United Methodist Church.
Many churches, in addition to displaying the Cross and Flame, have developed a unique image to reflect the
ministry and mission of their church. If your church has already created something like this, you should
consider how you will use it on your website. It is not necessary to create a unique image for your local
church; however, if this is something you are considering as a part of your overall website design, be sure
to create an image that can be used throughout your church’s ministry and not just for your website. As a
result, you will want to involve more than just your Web ministry team in the process of creating a unique
image for your church.
Represented here are examples of unique images created by local United Methodist churches for use on
their websites. By clicking on the unique image, you can be directed to this church’s website.
Epworth United Methodist Church
Indianapolis IN
epworthindy.orgGood Shepherd United Methodist Church
Indianapolis IN
gsumcindy.org
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 17/54
Step #13:Cr Cr eaeate a Unique Imate a Unique Imagge and Designe and Design
7474Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Central United Methodist ChurchSouth Bend IN
centralnow.org
Castleton United Methodist Church
Indianapolis IN
castletonumc.org
Horizons of Faith United Methodist Church
Indiana
hof-umc.org
Huntertown United Methodist Church
Huntertown IN
huntertownchurch.org
Faithpoint United Methodist Church
Floyds Knobs IN
faithpointchurch.org
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 18/54
Step #13:Cr Cr eaeate a Unique Imate a Unique Imagge and Designe and Design
7575Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Avon United Methodist Church
Avon IN
avonumc.com
Mission Bell United Methodist Church
Glendale AZ
achurchwithoutwalls.org
Clay United Methodist Church
South Bend IN
claychurch.com
Cove United Methodist Church
Hampton Cove AL
covechurch.com
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 19/54
Step #13:Cr Cr eaeate a Unique Imate a Unique Imagge and Designe and Design
7676Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
General Guidelines for Color There are four general guidelines to be considered when designing webpages:
• Design in black and white, adding color for emphasis.
• Color should never be the only visual cue for anything.
• Distinguish between features that a user must be able to see in order to use the webpage and
those that would be nice to see.
• Test whether color contrast is sufficient to be read by people with color deficiencies or by those
with low-resolution monitors, print pages on a black and white printer (with backgrounds and
colors appearing in grayscale).
Sufficient contrast for reading is a key factor when considering accessible colors on webpages. Therefore,
particular color combinations to be avoided are red-green, green-yellow, and blue-yellow.
Websafe ColorsTo ensure cross-platform consistency in color scheme, it is recommended that webpages be designed only
with the 216 common websafe colors. Websafe colors are also referred to as the websafe color palette,
dither-free colors, and 6x6x6 colors. Despite the multiple terminology, the colors and hexadecimal codes are
the same. Visit these websites for charts of the websafe palette as well as some interactive tools for
determining the best colors and combinations of color for your website.
• Rich-in-Style, includes a colorizer that lets you select a background color and shows you what
all the other colors would look like against this background color. Good for selecting the right
combination of background and font colors.
• Cloford, websafe colors by hexadecimal number or websafe colors by name
• Well-Styled, an interactive site that allows you to select a color from the websafe palette and
see some of the exciting color combinations you can use
• Web Developers, three-color combinations using websafe colors
NOTE: At the time of publication, all links were active. If links become broken, inactive, or redirect to another website, please
inform us by sending an email to [email protected]. Website URLs provided in this Guide are for example only, and
UMCom is not responsible for the content management of these sites. Furthermore, the listing of these websites does not
represent an endorsement by UMCom unless otherwise stated in the Guide.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 20/54
Step #13:Cr Cr eaeate a Unique Imate a Unique Imagge and Designe and Design
7777Web Ministry 101 Planning Guide Part One: Accessing the Power of the Internet for Effective We Ministry© 2006 United Methodist Communications
Websafe Text or Font StylesThere are a few universal fonts that represent well in most browsers. In addition to choosing a text or font
style, you will also want to consider the size of the font. We recommend using a font size of 10 or 12 point
for body text. This is easily readable for most users. Likewise, we would recommend that your title or header
fonts are 18 to 24 points; however, you have a lot more flexibility for these when designing your site. In
particular, you want the title or heading to be larger than the body text so that users immediately know what
they are reading about and can decide at a glance if this is the information they are looking for. Here are
examples of websafe text or font styles in 12 point body text and 24 point header text:
Arial 12 point
Arial 24 point
Courier New 12 point
Courier New 24 point
Geneva 12 point
Geneva 24 point
Georgia 12 point
Georgia 24 point
Helvetica 12 point
Helvetica 24 point
Times New Roman 12 point
Times New Roman 24 point
Verdana 12 point
Verdana 24 point
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 21/54
Step #14:Cr Cr eaeate ate aWWelcoming Home Pelcoming Home Paaggee
7878Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Your home page is the portal to the rest of your site. It is like the front door of your church meant to be
welcoming and lead the user to all the ministry opportunities available upon entering. In addition, your home
page should showcase the latest ministry news for your church so that frequent users can immediately see
what’s changed since their last visit.
Many home pages are designed to look different than the rest of the main sections and subpages of a
website. The home page, generally, serves more as the title page and table of contents than as the answer
to every user’s questions and needs. As such, it is usually crisp and clean with the site navigation menu as
the prominent feature so the user can quickly get to the information he or she wants to find. Here are a few
examples of welcoming home pages from local United Methodist church websites. To visit the website for
each of these examples, simply click on the home page to be redirected to the site.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 22/54
Step #14:Cr Cr eaeate ate aWWelcoming Home Pelcoming Home Paaggee
7979Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 23/54
Step #14:Cr Cr eaeate ate aWWelcoming Home Pelcoming Home Paaggee
8080Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 24/54
Step #14:Cr Cr eaeate ate aWWelcoming Home Pelcoming Home Paaggee
8181Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 25/54
Step #14:Cr Cr eaeate ate aWWelcoming Home Pelcoming Home Paaggee
8282Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 26/54
Step #15:Cr Cr eaeate a Site Mate a Site Map and Nap and NavigvigaationtionTToolsools
8383Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
One way to outline your websites navigation menu is to create a site map. This is the blueprint or road map
for your website and provides a clear picture of how pages are linked together and how they relate to the
whole website. From your website’s home page, users should be able to go directly to any of your main
sections with one mouse click. These sections, then, must have a direct link from your home page.
Therefore, you will want to design your website to include the main sections of your ministry in the navigation
menu of the home page. As you create your site map, these main sections would be the first tier under the
home page.
There are certain main sections we recommend you include in the first tier of your church’s website. If you
are using E-zekiel as your website design and hosting service, every website in their template-based design
will start with four sections in the first tier. These include:
• Events
• Contact Us
• Site Map
• Home
In addition, we recommend adding, at a minimum:
• About Us
• Worship• Links
If you have other ministry areas, such as Christian Education, Missions, or Youth, we recommend that you
consider how these will be listed as a part of your site’s main sections, or if they will form the second tier and
fall under one of your first tier sections as subpages. Shown below is a sample site map from an actual local
United Methodist church website.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 27/54
Step #15:Cr Cr eaeate a Site Mate a Site Map and Nap and NavigvigaationtionTToolsools
8484Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
In addition, anything on your home page should provide a direct link to the rest of the story or more
information. Most home pages contain some feature items in the body of the page. These would be the most
relevant, important, or up-to-date displays of information that you know the user is looking for. Within the
body, you can embed a hyperlink that takes the user directly to this information. Generally, what you display
on the home page is a teaser to the rest of the information. Since most users skim or scan pages for
information rather than read everything word for word, teasers should contain the essence of the information
and direct the user to the rest with just one mouse click.
Once a user leaves your home page, he or she should always know where he or she is within your site. To
accomplish this, we recommend using what are called breadcrumbs. Breadcrumbs tell the user, “You are
here,” and display the trail that has led to this point. This way, a user can return easily to a previous location
without having to use the “back” button in the browser window. Likewise, breadcrumbs help users to see how
pages are linked so they can stay connected to the main pages or sections of your website. Finally,
breadcrumbs help the user to find his or her way back home. Shown below is an actual webpage from a local
United Methodist church website displaying a breadcrumbs trail. To view this website online, simply click on
the sample image.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 28/54
Step #15:Cr Cr eaeate a Site Mate a Site Map and Nap and NavigvigaationtionTToolsools
8585Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
In addition to using breadcrumbs, each page of your site should contain the site navigation menu. If your
pages extend beyond the bottom of the browser’s window, we recommend that you add the navigation menu
to the bottom of the page, too. This way, if a user is scrolling down your page, he or she does not have to
scroll back to the top in order to move to a section of your site. Shown below is an actual United Methodist
church website that uses a conspicuously located navigation menu at the top and bottom of the page. To
view this website online, simply click on the sample image.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 29/54
Step #16:Cr Cr eaeate Main Sections and Subpate Main Sections and Subpaggeses
8686Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
In addition to a design for your website’s home page, you will want to develop a design for the main sections
of your website. This design will have some of the same components of the home page in terms of color,
image or logo, font style and size, and photographs or graphics. But, these may be arranged differently to
allow for more space or prominence for the information contained on these pages. As with the home page,
the main sections should include easy navigation. Shown below are examples of the home pages shared in
Step #14 alongside a main section page from the same website to demonstrate how these United Methodist
church websites make use of the same design elements from the home page to the main section pages. To
view the entire website featured, simply click on the sample image.
HOME PAGE
Gracepoint United Methodist Church
MAIN SECTION PAGE
Gracepoint United Methodist Church
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 30/54
Step #16:Cr Cr eaeate Main Sections and Subpate Main Sections and Subpaggeses
8787Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
HOME PAGECoronado Community United Methodist Church
MAIN SECTION PAGECoronado Community United Methodist Church
HOME PAGESt. Mark United Methodist Church
MAIN SECTION PAGESt. Mark United Methodist Church
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 31/54
MAIN SECTION PAGEEpworth United Methodist Church
Step #16:Cr Cr eaeate Main Sections and Subpate Main Sections and Subpaggeses
8888Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
HOME PAGEEpworth United Methodist Church
HOME PAGE
First United Methodist Church
MAIN SECTION PAGEFirst United Methodist Church
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 32/54
Step #16:Cr Cr eaeate Main Sections and Subpate Main Sections and Subpaggeses
8989Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
From your main sections, you may have links to subpages. These subpages may have the same or similar
design as the main sections. What makes them different from the home page and main sections or pages is
that they will not be a part of the main navigation of the website unless you use drop-down or expanded
navigation tools. Some template-based designs will not support drop-down or expanded navigation. In this
case, you will want to use hyperlinks to direct or point users to these subpages. Shown below is an example
of how one local United Methodist Church uses the same design elements configured differently on each of
the home, main section, and subpages. To view this website, simply click on the sample image.
HOME PAGECoronado Community United Methodist Church
MAIN SECTION PAGECoronado Community United Methodist Church
SUBPAGECoronado Community United Methodist Church
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 33/54
Step #17:PPopulaopulateteYYour our WWeebsite with Engbsite with Engaaging Contentging Content
9090Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Working from your site map, which outlines the different sections and subpages of your website, you will
want to gather and prepare content to form the body text for each page. Most of this content will come from
existing printed documents, such as brochures, flyers, and newsletters that your church has already
produced as well as from the staff members and volunteers who work directly with the program or ministry
areas of your church.
If you are relying on existing print documents, you will want to edit these for the Web versus copying and
pasting them into the body of your pages. Generally, visitors to your website will skim your pages to find the
information they are looking for. Therefore, it is important to share the essential information in one to two
sentences versus one to two paragraphs. As a result, you will need to condense any existing print documents
by extracting the most important points and presenting each of these in clear and concise, short sentences
that visitors can skim in order to find what they are looking for. These one or two clear and concise sentences
are often referred to as the “teaser.” Again, teasers allow users to quickly and easily skim the page and click
for more information if they’re interested. Shown below is an example of how one local United Methodist
church website uses teasers on its home page to entice visitors to click and read more. To visit this church’s
website, simply click on the sample image.
Teaser on home page links to the rest of the story on the About Us page.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 34/54
Step #17:PPopulaopulateteYYour our WWeebsite with Engbsite with Engaaging Contentging Content
9191Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
With pages that present a lot of content, be sure to organize the information so the visitor does not have to
work too hard to understand the information. You can accomplish this by using clear headings, subheadings,
and bulleted lists. If the information is not organized well or is too hard to follow, visitors will stop reading and
move on to something else. Keep in mind that you want the content on your website to pull in and lock users,
to inform and educate them, and to offer answers to their questions. Shown below is an example from a local
United Methodist church website that has a lot of information on one page but organizes it well using
subheadings. To visit this church’s website, simply click on the sample image.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 35/54
Step #17:PPopulaopulateteYYour our WWeebsite with Engbsite with Engaaging Contentging Content
9292Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
If there are print documents that you want to make available, as is, through your website, such as bulletins,
brochures, or flyers, you can save them in a portable document format or PDF so these files can be
downloaded by the user and opened, read, and printed using the free software, Adobe Acrobat Reader. To
create a PDF of an existing document, you will need Adobe Acrobat software, which can be purchased from
TechShop at a significant savings over retail. This software will enable you to convert existing documents
into PDFs as well as create fill-in forms that users can download, complete, and email back to you. To learn
more about how to create PDFs using Adobe Acrobat, visit the Adobe website. If you use a Macintosh
computer, you can create a PDF of any document by selecting this option when you print. Instead of the
document printing on paper, the document will be saved in PDF as a new file. However, you cannot create
fill-in forms with this same feature. You will need the complete Adobe Acrobat software to accomplish this.
When providing PDFs on your webpages, we suggest that you always alert users that by clicking on a link
to a PDF they will be opening a new browser window or downloading the document directly to their
computers. Some PDFs with many pages and graphics can easily be 1 MB or larger. This can mean a very
long download time for some users, especially those using dial-up connections to the Internet. When listing
a link to a PDF, let the user know by placing PDF and its size in parentheses next to the link. Shown below
is an example of how one local United Methodist church website displays links to its PDFs for its weekly
worship bulletins. To visit this church’s website, simply click on the sample image.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 36/54
Step #17:PPopulaopulateteYYour our WWeebsite with Engbsite with Engaaging Contentging Content
9393Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
The website example on the previous page provides simple instructions for how to download the PDFs and
provides a link to the free Adobe Acrobat Reader software. It also lists the size of each PDF in parentheses
after the document’s name. Listed below is the link to the Adobe Acrobat Reader software for downloading
this free resource. You can also copy the “Get Adobe Reader” graphic from the Adobe webpage and save it
to your computer for use on your own website.
To download the free Adobe Acrobat Reader software, visit the Adobe website by clicking the “Get Adobe
Reader” graphic.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 37/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
9494Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
You will want to establish some protocols or guidelines for how content will be updated and how new content
will be prepared for use on your church’s website. Whether you have one person or many people contributing
content for your site, maintaining some basic protocols will help to keep the information consistent
throughout your site. In particular, you will want to decide how content should be delivered to the person
responsible for posting it to your site.
1. Should the information be in electronic form using Microsoft Word or another word processing
program?
2. Should it be delivered on disk or sent via email?
3. Should it be in print form alone or in addition to the electronic format?
Answering these questions and developing some basic protocols will save valuable time for the person
preparing and posting the content.
Likewise, you will want to provide a written protocol for how body text or content, headings and subheadings
are displayed on your website. These are commonly referred to as style guides or stylesheets. This will
enable every page to look the same when it comes to the words displayed on the screen, and it ensures a
clean, uncluttered, and consistent presentation to your users. On the next few pages, we offer suggestions
and examples for selecting and setting the style of your website’s content. And, we provide a simple checklistfor creating your own website content style guide.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 38/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
The primary components of text style on a webpage are font, size, and style; paragraph alignment, spacing,
and indentation. First, let’s outline the choices you will need to make.
FontThis is the name of the font you will use for each element of content on your website. Remember to select
a websafe font from the list on page 77. If you want to use another font, consider creating the text as a
graphic so that the font will display the same in every browser.
Size
This is the point size you select for the text. It is fairly easy for most viewers to read a font size of 10–12 pointdepending upon the font you choose. Most body text is 10 or 12 point, and most headings are 14 point or
higher. Generally speaking, you will use four, five, or more text sizes depending upon their function. Consider
this example as a basic guide to setting text size.
9595Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Page Title, 36 pt
Subtitle, 24 ptHeading, 18 pt
Subheading, 14 pt
Body Text, 12 pt
Caption, 10 pt
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 39/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
9696Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
StyleThe style of your font refers to any emphasis you select to set the text apart from other text. These emphases
include:
• Plain—this is plain text
• Bold—the is bold text• Italic—this is italic text
• Underline—this is underline text
• All Caps—THIS IS ALL CAPS TEXT
• Small Caps—THIS IS SMALL CAPS TEXT
• Shadow—this is shadow textthis is shadow text
• Outline—this is outline text
• Superscript—this is superscript text
• Subscript—this is subscript text
There are a few rules regarding style or text emphasis that apply to the Internet. Keep these in mind as you
develop your website’s content.
1. Do not use underline unless the word or phrase is a hyperlink.
2. Use italics sparingly as these are hard to read. Instead, use bold text for emphasis.3. ALL CAPS should be used sparingly for headings and titles. It should not be used for body text
because it is harder to read than lowercase text.
4. Shadow and outline should only be used for headings or titles, and then sparingly. They are
more difficult to read than plain text.
Color Your choices regarding color should flow from the color palette you have selected for your website. Be sure
to test the readability of your text against light and dark backgrounds. And, remember to select websafe
colors for your website. See the resources regarding websafe colors on page 76.
AlignmentYou have four choices for the alignment of text: Left, Right, Center, Fully Justified. Left alignment justifies the
text on the left margin and leaves the text at the right margin jagged. This is a sample of left alignment of
text:
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 40/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
9797Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla fringilla, leo ac blandit
facilisis, pede justo pharetra quam, non consectetuer nibh dui eget nulla. Vestibulum nisi.
Etiam fringilla. Mauris est mi, mattis in, malesuada vel, nonummy vitae, leo.
Right alignment justifies the text on the right margin leaves the text on the left margin jagged. This is a
sample of right alignment of text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla fringilla, leo ac blandit
facilisis, pede justo pharetra quam, non consectetuer nibh dui eget nulla. Vestibulum nisi.
Etiam fringilla. Mauris est mi, mattis in, malesuada vel, nonummy vitae, leo.
Center alignment centers the text between the left and right margin. This is a sample of center alignment of
text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla fringilla, leo ac blandit
facilisis, pede justo pharetra quam, non consectetuer nibh dui eget nulla. Vestibulum nisi.
Etiam fringilla. Mauris est mi, mattis in, malesuada vel, nonummy vitae, leo.
Fully justified alignment justifies the text at the left and right margins so neither is jagged. This is a sample
of fully justified text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla fringilla, leo ac blandit
facilisis, pede justo pharetra quam, non consectetuer nibh dui eget nulla. Vestibulum nisi.
Etiam fringilla. Mauris est mi, mattis in, malesuada vel, nonummy vitae, leo.
SpacingSpacing of text between words, at the end of sentences, between lines, and between paragraphs must also
be decided to maintain consistency throughout your website. Here are a few general rules for determining
spacing for your website:
1. Use one space between words and after a period. If you are using numbered or bulleted lists,
either use the “tab” feature to indent each item in the list at the same place, or determine if youwill use 1 or 2 spaces after the number or bullet to maintain consistency.
2. Select one, one and a half, or two lines spaces between lines. Be consistent throughout your
website with regard to body text, in particular.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 41/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
9898Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
3. Generally, using a line space between paragraphs creates a nicer look and is easier for readers
to follow when there is a lot of text on the page. If you use a line space between paragraphs,
then do not indent paragraphs. See the difference between using a line space and not
indentation versus no line space and indentation looks like this ...
Line spacing between paragraphs, no indentation of paragraphs:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla fringilla, leo ac
blandit facilisis, pede justo pharetra quam, non consectetuer nibh dui eget nulla.
Vestibulum nisi. Etiam fringilla. Mauris est mi, mattis in, malesuada vel, nonummy
vitae, leo.
Suspendisse pretium. In orci nisi, gravida vel, lacinia vel, iaculis quis, lectus. Nunc
mattis ligula. Integer congue massa eu ligula. Nunc non libero.
No line space between paragraphs, 0.25” indentation of first line of each paragraph:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla fringilla, leo ac
blandit facilisis, pede justo pharetra quam, non consectetuer nibh dui eget nulla.
Vestibulum nisi. Etiam fringilla. Mauris est mi, mattis in, malesuada vel, nonummy
vitae, leo.Suspendisse pretium. In orci nisi, gravida vel, lacinia vel, iaculis quis, lectus.
Nunc mattis ligula. Integer congue massa eu ligula. Nunc non libero.
IndentationIn general, you will want to indent the first line of each paragraph if you do not use a line space between
paragraphs (see examples above). You should indent 0.25” to optimize space. Likewise, indent any lists
using the automatic features when available. This keeps all items in the list indented the same and lined up
nicely as you look down the page.
Other Be sure to include any other specific details about the characteristics or attributes of each type of text on
your website.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 42/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
9999Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Website Style Guide WorksheetUse the worksheet below to develop a style guide for your website’s content.
Page TitleThis is the title of the page. Every page should have a title. It is the first thing users look for when browsing
your website. They use it to figure out what the page is about, and search engines us it to direct users to
your page when they “google” information. See Step #23 for more information on page titles and how they
are used by search engines.
Font Size Style Color Alignment Spacing Indentation
Other:
Font Size Style Color Alignment Spacing Indentation
Other:
SubtitleIf needed, a sub-title would typically display with the title, only a little smaller in size, but usually in the same
font style.
Font Size Style Color Alignment Spacing Indentation
Other:
HeadingThe heading is used to separate large chunks of information and to separate different types of information
on the same webpage.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 43/54
Step #18:DeDevvelop Content Pr elop Content Pr otocolsotocols
100100Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Font Size Style Color Alignment Spacing Indentation
Other:
SubheadingIf needed, a sub-heading would follow the heading, only a bit smaller, and usually in the same font style. It
serves to further divide information on the same webpage.
Font Size Style Color Alignment Spacing Indentation
Other:
Body TextBody text is what most of the words on your webpage will be, so select a readable font type and size, and
limit the style and color variations.
Font Size Style Color Alignment Spacing Indentation
Other:
CaptionThe caption text is very small, but still readable. It is used to put captions under pictures, display the
breadcrumbs trail, and display the navigation menu at the bottom of the page.
You may have other text styles to consider, such as navigation buttons or menus. Use the same type of
worksheet for each type of text style in order to maintain consistency from page to page within your website.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 44/54
Step #19:AdAdd Photod Photoggr r aaphs and Gr phs and Gr aaphics to Enhance Contentphics to Enhance Content
101101Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
After you have selected appropriate photographs and graphics, you must prepare them for the World Wide
Web. This means that they must be in a digital format that can be viewed easily on your webpages. If you
are working from a printed photograph or graphic and cannot access a digital version of it, you will have to
convert it into a digital format. Using a scanner connected to your computer, digitize the image at a minimum
of 200 dots per inch. Save the digitized photograph as a JPEG or the graphic as a GIF. These are the most
appropriate formats for the two main types of images displayed over the Internet.
If you have the photograph or graphic already in digital form or have scanned and saved it as we just
discussed, the next step is to edit the image using one of many image-editing software programs. From the
image-editing program, make the following adjustments to your graphic or photograph:
1. Change it to RGB color, if necessary.
2. Crop the image as desired.
3. Change the resolution to 72 dpi and constrain proportions
4. Adjust the width or height to the exact pixels needed to fill the space on your webpage.
5. Save the image in the proper format, JPEG for photographs and GIF for graphics.
Image-Editing Software ProgramsSome of the more popular and widely used image-editing software programs are listed below. Remember to
check with TechShop before purchasing any of these software programs as you may be able to save a lot
of money by making your purchase with them instead of paying retail for the same product.
• Adobe Photoshop CS, ImageReady, and Element
• Corel Paint Shop, Photo-Paint, and Painter
• Fireworks
• Jasc Paint Shop Pro
• Microsoft Paint
• Ulead Photo Impact
If you don’t have a digital camera, you can have the pictures from a regular camera developed onto a CD.
Then, you can import the photographs from the CD onto your computer and edit them in your image-editing
software program.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 45/54
Step #19:AdAdd Photod Photoggr r aaphs and Gr phs and Gr aaphics to Enhance Contentphics to Enhance Content
102102Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Here are links to several United Methodist Church websites where you can download denominational
graphics, photographs of mission and ministry, and other exciting and engaging images to add to your
church’s website. Simply click on the area you want to explore. You will be redirected to a page on a United
Methodist Church board or agency website. From there, you can view and download the graphics, logos,
and photographs you want to display on your church’s website.
Logos and Graphics
• Igniting Ministries
• The United Methodist Church Cross and Flame
• Other Ministry Graphics of The United Methodist Church
• Other Organizational Graphics of The United Methodist Church
Photographs
• General Board of Global Ministries, mission photographs
• United Methodist Committee on Relief (UMCOR)
• United Methodist News Service (UMNS)
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 46/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
103103Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
In general, the “Terms of Use” and “Privacy Policy” statements are presented clearly and conspicuously,
usually by a link at the bottom of the home page and About Us page, at a minimum, or a link at the bottom
of each page. When users access this page, they learn what information you may collect from them, such
as email addresses, let them choose how that information is used, how you will protect their personal
information, and how you may use it if they give you permission. Always include a way for users to opt ou”
of sharing any personal information but still have access to your site’s information. Listed below are the basic
components of “Terms of Use” and “Privacy Policy” statements as well as links to examples of these from
local United Methodist church websites and other non-profit organizations.
Terms of UseThe purpose of a “Terms of Use” statement for your website is to display clearly and concisely what your
expectations are of the user. In general, these terms of use include:
• An agreement between the user and the website’s agent (local church)
• Recognition of changes to the “Terms of Use”
• Links to Third Party Sites
• Unlawful or Prohibited Use
• Use of Communication Services
• Liability Disclaimer
• Termination and/or Access Restriction
• Copyright and Trademark Notices
Visit these websites to view actual “Terms of Use” statements displayed on local United Methodist church
websites and other non-profit organizations.
• College Avenue United Methodist Church, Muncie IN
• Saint James United Methodist Church, Alpharetta GA (PDF 96 KB)
• West Des Moines United Methodist Church, Des Moines IA
Privacy PolicyThe purpose of the Privacy Policy is to state clearly and concisely how the website’s agent (local church) will
protect any personal information collected from users of the website. The basic components of this statement
are:
• Collection of Personal Information
• Use of Personal Information
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 47/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
104104Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
• Use of Cookies
• Security of Personal Information
• Change to the Privacy Policy Statement
• Contact Information
Visit these websites to view actual “Privacy Policy” statements displayed on local United Methodist church
websites and other non-profit organizations.
• College Avenue United Methodist Church, Muncie IN
• Saint James United Methodist Church, Alpharetta GA (PDF 96 KB)
• Saint Mark United Methodist Church, Atlanta GA
• West Des Moines United Methodist Church, Des Moines IA
NOTE: We recommend that you seek legal advice when crafting your own “Terms of Use” and “Privacy
Policy” statements to be sure they are legally sound and that you understand your liability and responsibility.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 48/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
105105Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Protecting Children’s PrivacyWith regard to children, you must obtain parental permission before collecting any data from children. This
includes:
• Providing parents with notice of your information practices
• Obtaining verifiable parental consent before collecting a child’s personal information with limited
exceptions
• Giving parents a choice of whether their child’s information will be disclosed to third parties
• Providing parents access to their child’s personal information and allowing them to review it
and/or have it deleted
• Giving parents the opportunity to prevent further use or collection of information
• Not requiring a child to provide more information than is reasonably necessary to participate in
an activity
• Maintaining the confidentiality, security, and integrity of information collected from children
To review the complete Federal guidelines, link to the Children’s Online Privacy Protection Act (COPPA).
While this may seem like a lot to consider, it is essential to preserving the safety of children who use the
Internet, and it is in direct compliance with our Church’s commitment to providing Safe Sanctuaries for
Children and Youth, which extends into cyberspace when your church becomes a part of the World Wide
Web. Visit the General Board of Discipleship website for more information on Safe Sanctuaries.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 49/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
106106Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Solutions to Eliminating Email Spiders (SPAM)
Email Spiders or SPAM search websites to detect email addresses by looking for the “@” symbol. To avoid
having your email addresses pirated, take one or more of the following steps.
1. Encode the email address using obscuring text. For example, use this HTML text for
<ahref="mailto:info@f&#
105;rstumc.org">in

2;o@firstumc.or

3;</a>
Simply highlight the “[email protected]” that appears in your HTML code and replace it with the
lines of obscured text above. In the browser, it will appear as a regular email address hyperlink;
but because it is obscured, it cannot be pirated by email spider programs.
To encode other email addresses, use one of the two “Obscuring Text” online programs listed
below to convert text to encoded HTML.
2. Add a subject line, such as “Website Email,” to each email link by providing the additional HTMLcode as follows:
<ahref="mailto:info@f&#
105;rstumc.org?subject=We
;bsite Email" title=""></a>
By adding a subject line, which automatically pastes into any email coming from your website
email hyperlink, you will immediately be able to identify the source of these emails versus SPAM
or email spiders. Note: “Website Email” can be changed to any identifier you choose; however,
while spaces between words is acceptable, do not include any other symbols, dashes, etc. Use
only alphanumeric symbols (letters and/or numbers).
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 50/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
107107Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
3. Use JavaScript to protect your email addresses. The JavaScript for [email protected] would be:
<p>You can contact our Church Office here:
<script language="javascript"> <!--
user = "info";
site = "firstumc.org";
document.write('<a href=\"mailto:' + user + '@' + site + '\">');
document.write(user + '@' + site + '</a>');
//-->
</script>
Note: The phrase on line one, “You can contact our Church Office here:” can be changed to any
appropriate message, such as “Contact Us:”, etc.
4. Cloak the email address altogether by:
a. Embedding the hyperlink into a “Contact Us” instead of listing the actual email address.
For example, instead of “Send an email to: [email protected]” simply attach the
hyperlink to the words “Contact Us.”
b. Representing the email address as a graphic. While this is the only 100% safeguardagainst email spiders (SPAM), it requires that the user actually type your email address
into his/her email program. The graphic is not a hyperlink; however, it could be by using
the same steps as letter “a” above.
Basic Information and Prevention:
• Codeode
• Net Mechanic, “Hide from Spiders” and “More Useless MAILTO Links”
• Online Tutorials
• SPAM Links
• Federal Trade Commission
Obscuring Text:
• About.com
• Enigma
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 51/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
108108Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Sample Media Release Form #1
I, ____________________________________________________________, do hereby give (insert name
of church), its assigns, licensees, and legal representatives the irrevocable right to use my picture, portrait
or photograph in all forms media and in all manner, for the advertising, trade or in any other lawful purpose
for
the exclusive benefit of (insert name of church).
I hereby forever waive any right to inspect or approve the finished product, including but not limited to, written
copy and/or image in print or in electronic form, including posting on the church’s website, which may be
created in connection therewith.
I am eighteen (18) years of age or older. I understand that (insert name of church) cannot control the
unauthorized use by persons other than (insert name of church) of my image once such image is published.
Any claim I may have concerning unauthorized publication of my image must be pursued by me against the
unauthorized user. (Insert name of church) disclaims any responsibility for such unauthorized use of my
published image. I have had sufficient time to review and seek explanation of the provisions contained
above. I have carefully read and understand this Release and Waiver, and I agree to be bound by it. I
voluntarily and irrevocably give my consent and agree to this Release and Waiver.
Executed this _________________day of ___________________________________, 20_____________.
Printed Name:__________________________________________________________________________
Address______________________________________________________________________________
City____________________________________ State_______________ Zip Code___________________
Phone Number___________________________ Email_________________________________________
Signature_____________________________________________________________________________
Witness_______________________________________________________________________________
Note: If named person is under the age of 18, his/her parent or legal guardian must sign the following
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 52/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
109109Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Consent Form (continued on next page).
Sample Addendum to Media Release Form #1Parental Consent for Minors (under age 18)
I, _____________________________________________, am the parent or legal guardian of the person
listed above. I have read and understand the provisions of this document. I consent to this person
participating as described above, and I fully enter into and agree to the above Release and Waiver and
forever waive any rights therefrom.
Printed Name:__________________________________________________________________________
Address______________________________________________________________________________
City____________________________________ State_______________ Zip Code___________________
Phone Number___________________________ Email_________________________________________
Signature_____________________________________________________________________________
Witness_______________________________________________________________________________
NOTE: We recommend that you seek legal advice when crafting your own release forms to be sure theyare legally sound and that you understand your liability and responsibility.
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 53/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
110110Web Ministry 101 Planning Guide Part Three: Developing a User-Centered Website© 2006 United Methodist Communications
Sample Media Release Form #2
I, ___________________________________________, grant permission to (insert church name) and its
subordinates, to use my name and/or photographs for use in (insert church name) publications such as
recruiting brochures, newsletters, and magazines, and to use my name/and or photographs on display
boards, and to use my name and/or photographs in electronic versions of the same publications or on the
(insert church name) website or other electronic forms or media.
I hereby waive any right to inspect or approve the finished photographs or printed or electronic matter that
may be used in conjunction with them now or in the future, whether that use is known to me or unknown,
and I waive any right to royalties or other compensation arising from or related to the use of the photograph.
I hereby agree to release, defend, and hold harmless (insert church name) and subordinates, including any
firm publishing and/or distributing the finished product in whole or in part, whether on paper or via electronic
media, from and against any claims, damages or liability arising from or related to the use of the
photographs, including but not limited to any misuse, distortion, blurring, alteration, optical illusion or use in
composite form, either intentionally or otherwise, that may occur or be produced in taking, processing,
reduction or production of the finished product, its publication or distribution.
Please check one of the following:
_____I am 18 years of age or older and I am competent to contract in my own name. I have read this release
before signing below, and I fully understand the contents, meaning, and impact of this release. I understand
that I am free to address any specific questions regarding this release by submitting those questions in
writing prior to signing, and I agree that my failure to do so will be interpreted as a free and knowledgeable
acceptance of the terms of this release.
_____I am the parent or legal guardian of the above named child. I have read this release before signing
below, and I fully understand the contents, meaning and impact of this release. I understand that I am free
to address any specific questions regarding this release by submitting those questions in writing prior to
signing, and I agree that my failure to do so will be interpreted as a free and knowledgeable acceptance of
the terms of this release.
continued on the next page
8/14/2019 Planning Guide Part Three
http://slidepdf.com/reader/full/planning-guide-part-three 54/54
Step #20:Pr Pr otect User otect User s and Member s and Member s Pris Privvacacyy
Executed this _________________day of ___________________________________, 20_____________.
Signature of self (if 18 years of age or older )___________________________________________________
Signature of Parent/Guardian (if named is under 18 years of age)__________________________________
Address______________________________________________________________________________
City____________________________________ State_______________ Zip Code___________________
Phone Number___________________________ Email_________________________________________
Witness_______________________________________________________________________________
NOTE: We recommend that you seek legal advice when crafting your own release forms to be sure they
are legally sound and that you understand your liability and responsibility.