Desktop publishing basics

Putting out an appealing newsletter, brochure or other print publication for your church is often not simple or easy.  Most people need some level of training on how to do it well.

Your information needs to be in an easy-to-read, eye-catching format. Good publication design delivers news and messages effectively. Take the time to understand and follow simple fundamentals of design. The end result will be a publication that is easy to quickly understand and easy on the eyes.

Layout basics

It may be fun to use the variety of colors, graphics and fonts offered with many design tools, but remember tha readability is the most important aspect of your piece. Due to the web, more people now "scan" even written text rather trhan read it.  So we need to adopt new techniques to help people find what they want and read it easily.

Easy-to-read pubs use

• A serif font for text and a sans serif font for headlines and subheads. Serif fonts have extra strokes at the end of the lines that form the letters; sans serif fonts have no extra strokes.
• A type size of 11 points or larger.
• Left-aligned margins, not justified.
• Text in columns and boxes -- not spread wide across a page.
• Grouping of related stories on a page.
• Graphics or photos that visually describe the story and draw interest. It's OK to use up to three fonts in your publication — one for text, one for headlines and one for your banner or nameplate. But suing more than three can cause clutter and look "circusy".

Headlines

Headlines (and even subheads) need to quickly tell tyhe reader what the text is about.  Avoid "cute" headlines or ones that allude to the text but don't rteally describe what's important. Articles at the top of a page normally should be larger than those lower on the page. Size and placement relates to importance.

White space

White space — the space not occupied by text or graphics — makes the page easier to read. Don't avoid it -- treat is as your friend. Cramming a page full makes it look like a tough read.  Some people avoiud tough reads. Use white space on all four margins, between columns and within text itself.

Simplify text

A rule of thumb when writing for the web is to try to delete 50% or more of the existing text. After boiling down the text to the essentials, look for "lists" of things and change them to bullets. Then break up the longer articles with subheads.
[reference: Technology for Ministry, UMCom]

Church web site templates

Finding really good web page templates for your church can be frustrating. You want one that is strict XHMTL 4.01, pure CSS -- no use of tables for layout, one that is attractive, yet a look that accurately reflects your congregation.

Depending on your web hosting service, you may not be able to change the menu links area other than to specify the name and URL for the existing "buttons" or links.  Make sure to check out all aspects of any website building software offered by a web host.

Using stock photos may add eye appeal but actually be misleading. Here are a few of the templates I've been checking out when looking for a possible new, reasonably priced web hosting solution.

• http://church-webs.com/new-templates.htm
• http://readychurchwebs.com/rcw/startdesign.htm?catid=religion

Church web site design change

Avondale Pattillo United Methodist Church recently updated the design of its web pages. Some of their decision-making process may help other churches.

Why a design change?

• Inconsistent design across all 140 pages on their web site.
• Inconsistent use of sidebar content.
• Inconsistent color scheme across all pages.
• A desire to use less clip art and more photos on pages.
• The HTML code contained elements that were on the list to be outdated (deprecated) by the World Wide Web Consortium.
• A desire to keep the whole home page content visible on a 1024x768 pixel resolution screen.

APUMC made many changes in order to give a consistent, "professional" appearance, help navigation, and speed findign information:

• Adopted one design for all web pages, with two exceptions:
• Pages that were part of a prior years' training sessions. (That whole training section may be revised or even eliminated later).
• "Resources for United Methodist Leaders" pages.  These had a different look deliberately and are aimed at a different audience from most of the site.
• Placed "utility" links at the top right, above their header.
• Used the specific "APUMC" instead of the common but generic "Home" as the link to their home page.
• Used the clearly understandable "A-Z Index" instead of the more geeky "SiteMap".
• Placed the search box to the right right above the header.
• Placed links to their main sections (Calendar, Ministries, Resources, Services, and Visit Us) in a horizontal bar just under the header and used unique hover colors for these links.
• Placed sub-section menus (in Ministries, for example) to the left of the central content and used unique hover colors for these links.
• Used a standard footer that included:
• Church name, address, and church office phone number.
• "This page was last updated: "
• "Contact Us" link
• "Notice & Privacy Policy" link
• "Share this page" (using AddThis.com) link area
• Used standard formatting for varied HTML elements, via an updated Cascading Style Sheet.
• Used two "QuickLinks" boxes on the home page ... one with links for visitors and one for members.
• Added photos on most "special section" pages for Lent through Easter and for Advent through Epiphany.

Web Empowering Your Church

Mark Stephenson at Ginghamsburg Church, Tipp City, OH, gives an online Video and synchronized slide presentation, "Web-Empowering the Church".

It's quite good, but plan on spending time -- it's over an hour of streaming video.

Church website beauty

Church Beauty is the Church web site equivalent of CSS Beauty.

Most of the designs are very heavy on graphics and have a "slick" look. Many of the included webs seem to have a home page that's less functional that I'd like to see for visitors and members alike. A few have some uniquer approaches to presenting information that are worth considering. But remember that Church Beauty is about the look, not the content.

Personally, slick looks make me nervous and I cringe at the jarring, over-saturated colors of some church webs -- they have an "circus" atmosphere. I prefer a "good" look with outstanding content over a flashy look with mediocre content.

The Web-Empowered Church

I pulled some key points from the online video by Mark Stephenson about the Web Empowered Church (WEC) ...

The big 3 pluses of WEC

• Automate ministry processes.
• Store information for easy, immediate access.
• Connect with people anytime from anywhere in the world.

WEC Goals: expand, increase, extend

• Expand evangelism, discipleship, and care.
• Increase ministry efficiency and effectiveness.
• Extend ministry beyond the church walls.

Other points, tips, and ideas

• Web be more cost-effective communication than nearly any other media type. You can fund a web site for a year for the cost of a few mailings from the church.
• You can start with volunteers. The first 1,000 pages at the Ginghamsburg site were done by unpaid servants. The site is now at 4,000 pages, including several years' of text and video of sermons.
• You can minister to people worldwide 24 hours a day.
• You can get the word out immediately.
• Easy 24 x7 member participation (emails; online discussions -- IM, chat, discussion boards, "communities", blogs; ).
• The Web-empowered Church (with a capital C) is NOT a replacement for a physical church. The Internet cannot hug, love, or think.
• Connect people in need with those who can address the need, including requests for help in the community.
• Community Prayer Exchange (Prayer Line = one-to-one). In a community Prayer Exchange, you'll need to address the need of some people to submit a prayer request anonymously.
• "Post a thought or Prayer" -- adds to online display. This is most posted-to page on the Ginghamsburg site.
• Servant connector. List opportunities, then let people check blocks and submit -- match talents to needs.

Finding a robust, easy CMS

Our church has been seeking a Content Management System (CMS) and new Web Hosting for over a year. The frustration is palpable.

In the process, though, we have come across a couple of very useful sites that let you compare CMS software features and even give them an online trial.

• CMS Matrix
• Open Source CMS

We have also had time to look closely at our list of required and desired Web Hosting features. While that list seemed great at the time, after looking at a feature comparison at CMS Matrix, we revised the list to add specifics about the CMS. The list below shows our current features list for both Web Hosting and a CMS.

Web Hosting

• Offers a Content Management System (CMS) and templates suitable for our church's use.
• The web hosting company must be an established one.
• 24 x 7 support. Email is OK, though phone is better.
• Hosting firm has good ratings (when I can find them).
• A very high percentage web server uptime.
• Web server operating system: Windows 2003 server, Linux, Unix, or Apache (needed for a lot of open source CMS solutions).
• The hosting package includes room for our web to grow (pages/disk space)
• Offers at least 30 email addresses, auto-forwarding, POP access, and Spam filtering.
• Hosting solution is $300 or less per year. (E-Zekiel is way out of our price range for the size web we have.)
• Domain name registration/renewal is inexpensive (these should be very low cost these days).

CMS

• The CMS should let nearly everyone (with minimal orientation) add, edit, or delete text, add or delete images, create or delete pages, and upload files. Templates must be pure CSS -- no use of tables for layout.
• Ability to directly edit the code as well as use a pure GUI.
• Must allow addition of alternate text and/or titles to image code (for accessibility).
• Ability to upload files via FTP or via Web.
• Absolutely no ads or forced frames with hosting company info showing.
• CMS templates must allow inserting of multiple-level menus -- horizontal or vertical or both. Pure CSS menus code is heavily preferred by Java is acceptable.
• The system requires email verification to activate a new account.
• Granular privileges by page or content item.
• Administrator can see who's logged in and disconnect the user if required.
• SSL logins and pages are possible.
• Versioning
• Good online help and developers forums.
• Drag-n-Drop of content
• The system lets you force friendly URLs, not database code characters for "page" URLs.
• Integrated Spell checking of content during editing.
• Users can subscribe to varied "pages" and receive email notification of changes.
• The Administrator can force a less advanced user interface for basic content editors.
• The system allows Undo of content changes.
• A WYSIWYG editor.
• You can schedule posting of content changes.
• The CMS allows sub-sites.
• The CMS provides Web-accessible statistics.
• Support for RSS.
• Support for iCal.
• Event management using the calendar.
• WAI compliant.
• XHTML compliant.
• Allows use of Metadata for content objects.
• Provides blogging capability.
• Provides Chat capability.
• An app to organize FAQs.
• Link management.
• Forms for email.
• Users can subscribe and unsubscribe themselves from email lists.
• Photo gallery.
• Polls.
• Surveys.
• Quizzes.
• Site search.
• Site Map.

Web 2.0 can be dangerous

Usability expert Jakob Nielsen says Web 2.0 can be bad. "Before throwing spending money at "2.0" features, make sure that you have all the "1.0" requirements working to perfection." He says that most web sites don't yet use terms in headlines and page titles that their visitors would use.

What's the message to church web developers? Before you leap into trying to adopt fancy new techniques, make sure you have done your best using the older methods. Few churches have a lot of time and funds to devote to web work, so make the most of what you have. For example, do you meet all the below criteria on every web page of your current site?

• Each page's code includes keywords appropriate only for that page, a descriptive page title, and a short description.
• Common, non-churchy language and terms.
• Easy navigation that any visitor can understand.
• An uncluttered design .
  Don't distract from the text message.
• No splash or introductory type page.
  Such pages force the visitor to click once again just to get to the real home page.
• A minimum of animated graphics.
  Animated graphics pull the eye away from the main content area, which should be the meat of the page.
• A good contrast of text and background.
  A background image may look great, but also make text hard to read when placed on top of it.
• Text is easy to read at any common screen resolutions.
  A fixed 10pt font on a 1024x768 screen resolution is "squint print".
• Visitors can easily resize text.
  At over 1024x768 pixel resolution, visitors may need to enlarge small text to make it easy to read.

Newsletters: Folds create snakes

If your newsletter uses vertical folds, it probably snakes text from the bottom of one column (or page) to the top of the next -- across the fold. While that's not bad for a printed publication, it's horrible for viewing electronically.

If you offer your newsletter to members by email or at your web site, avoid using a fold format. You will certainly fold the newsletter for mailing. That's not the issue here. It's the vertical fold built into a publication design that makes it hard to read online.

Below are two types of basic formats pulled from an actual newsletter (the tri-fold one) and a more user friendly one (no column snakes).

Vertical fold format

A vertical multi-fold format uses columns in which text must snake from one column to the next. Imagine the frustrating up-and-down scrolling you have to do to read that online. In the actual newsletter tri-fold example below, you also have to scroll horizontally to read the newsletter.

To make matters even worse for on-screen viewing, multi-fold publications, such as the one below, do not read properly from left-to-right. The numbers on the image show the actual publication page sequence.

Tri-fold format (reduced size pages from an actual newsletter):

A no-snakes format

You can use columns and avoid the snaking text and out-of-sequence on-screen viewing if you adopt a different format. The example below uses a two-column design but each column always reads straight down the page -- no snakes. You scroll back up to the top -- once -- to read the second column, but that's it.

This format also means that pages are never out-of-sequence for on-screen viewing.

No-snakes format:
The blue "bars" in the sample below indicate article headline text. The orange ones show placement of section heads. This design uses the wider left column for main articles and the narrower right column for standard sections (message from the Pastor, Calendar items, announcements, birthdays and anniversaries, etc.) Remember -- do not put complete birth or anniversary dates or members' full names online -- protect your members' personal data.

Be nice to your electronic friends ... use a format that has no column snakes. Avoid the vertical fold format whenever possible. You could, of course, convert a vertical fold format to a one-column one that reads straight down and use that for electronic viewing. But that takes time that you could save if the format were one without snaking column text. And that may result in an very wide column of text that's harder (slower) to read.

Check your web in varied browsers

OK, so you're an avid [Firefox or Internet Explorer or Opera or Safari] browser fan. You checked your web pages and they look fine. In your browser. That's not enough.

You need to know if your web pages look good and don't "break" in other popular browsers. Some services are free, some are paid. Check browsers such as:

• Firefox 2.0
• Internet Explorer 6
• Internet Explorer 7
• Opera (varied versions)
• Safari (a couple of versions). iPhones use Safari, by the way.

Not only that, you need to check different operating systems, because some browser versions can and do differ on different OSs. Consider:

• Mac OSX
• Linux (which has a lot of flavors
• Windows

You can pay one-time or monthly fees to use a commercial service that checks a web page against varied browsers or you can go the free route.

Browsershots is a free online service I like. It uses computers of volunteers around the world to make snapshots of a web page in browser versions you select. After a wait (you can hang on or just return to that web page), you get a collection of thumbnail images. Click on one and get a larger view.

It's very easy to see if everything looks OK or if there's a problem with that browser displaying your web page as you intended. The image below represents about 35 minutes worth of waiting -- a price of the price.

As you can see from the image, one snapshot appears at only half-screen vertically. That's because the volunteer forgot to maximize the browser. When you run into that, this service even has an instant "problem" report for each browser snapshot.

Newsletters: Size matters

Among the many factors you need to think about when designing or redesigning a church newsletter is it's physical size. Why? Size affects:

• Ease of handling the printed newsletter.
• Column width and layout options.
• Ease of online reading.

All those are usability factors that you need to consider. Remember, the key is not what you think looks nice or what you've "always done", but rather how easily and quickly the many different readers of your newsletter can scan and read the content.

Also remember that online readers (and probably many readers of printed editions) scan text rather than reading it. The newsletter layout and design can help or hurt that scanning.

When you offer your newsletter as an electronic file attached to email or online, you have some added responsibilities:

• Make size readable. Make sure you use a size that does not exceed screen width. Make sure that if a visitor resizes a newsletter to their screen width, they can still read it easily. Reduced size fonts can become "squint print" in a hurry.
• Don't design for hi-res. Design for a screen resolution of 800 x 600 pixels, but make sure the newsletter looks good at 1280 x 720 pixels. Why not design for hi-resolution and widescreen? Many people don't maximize browsers when they have widescreen monitors. Check your web site stats to see what screen resolution is most common, but remember that it needs to look great at 800 x 600 pixels (or the Mac equivalent).
• Colors. Keep color saturation and contrast in mind. Many LCD monitors "wash out" contrast and over-saturate colors. Window scrollbars may be very hard to see, as will light pastels or grays.
• No snake columns. Make sure readers don't have to scroll down and then up again on the same page to read your online or electronic file newsletter. This most often happens if you use "newspaper" columns that snake from bottom to top across multiple columns. Columns are fine, but avoid the snaking column. Do that by keeping stories flowing vertically; no column changes. If you have two columns, story text in each column flows only downward.
• Avoid folds. Whenever possible, don't use a folded paper format. A newsletter that has vertical folds results in a newsletter that exceeds the screen width. It also often means columns that snake across the fold. This format is quite hard to read online or in an electronic file format. Don't force your readers to print the newsletter to be able to scan and read it easily. Give up the old print mentality. Think of online and electronic file readers, while keeping the format attractive in print as well.

Tips for web designers

Here are some uselful links:

• Top 10 books for Web designers
• Top 12 blogging tips
• Web design - setting goals
• Get off your RSS (SitePoint)
• 3 ways to make a good first impression
• Great church web sites - things to do
• Great church web sites - things to avoid

Criteria for a new web host

Our church is looking at web hosting options. One criterion is to let an average person maintain the web. A second key criterion is to be able to "touch the code" if we have a person capable of doing that.

Below is the long list of criteria we're using to compare web hosting solutions and site builder type options:

• Offers a Content Management System (CMS) and templates suitable for our church's use. The CMS should let nearly everyone (with minimal orientation) add, edit, or delete text, add or delete images, create or delete pages, and upload files.Templates must be pure CSS -- no use of tables for layout.
• XHTML templates are preferred, though XML is OK as long as layout and CSS can be directly edited. (I'm resisting having to devote enough time to learn XML coding for very little benefit -- I won't use it at work, for example.)
  
• Ability to directly edit the code as well as use the CMS.
• Must allow addition of alternate text and/or titles to image code (for accessibility).
• Ability to upload files via FTP or via Web.
• Absolutely no ads or forced frames with hosting company info showing.
• Templates must allow inserting of multiple-level CSS fly-out menus -- horizontal or vertical or both. Single-level menus are not good enough, if we're going to improve the navigation, which we intend to do.
• The web hosting company must be an established one.
• 24 x 7 support. Email is OK, though phone is better.
• Hosting firm has good ratings (when I can find them).
• A very high percentage web server uptime.
• Offers hosting on Windows 2003 server (in order to keep our options open).
• The hosting package includes room for our web to grow (pages/disk space)
• Offers at least 30 email addresses, auto-forwarding, POP access, and Spam filtering.
• Hosting solution is $300 or less per year. (E-Zekiel is way out of our price range for the size web we have.)
• Domain name registration/renewal is inexpensive (these should be very low cost these days).

Optional, but desired features:

• Ability to upload and offer podcasts of sermons
• Ability to embed video (YouTube or similar)
• Ability to display RSS feeds on selected pages (like Blogger's new XML template system allows).

Traits of a great web site

Titus Hoskins in SitePro News lists seven traits of a great web site:

• Keywords are used
• Design is simple
• Pages are optimized
• Navigation is easy
• Content is fresh
• Good enough to bookmark
• Looks cool

Cool Kuler Coolest

Adobe Labs has come up with a winner -- Kuler. Fun to use and a boon to web and graphics designers of all types, this color grouping creator and sharing application is a very popular site.

Take the Kuler tour (aka tutorial) to see what it's all about. It even plays cool music while you learn. To create or share color groupings, you'll need an Adobe ID.

The Museum of Modern Betas (MoMB) lists Kuler as #7 in their "Top 100".

Church webs -- Heal!

A few sites dedicated to helping you improve your web site:

• Heal your church web site
• Is my web site ineffective? (including checklists)
• Top 20 confessed web site sins
• Don't do really weird navigation, no matter how "cool" some designer thinks it is. Go ahead. Figure it out. Then ask yourself if you really want to use it on that web site?

Free online web design course

Project: New is a free online course made up of articles on designing and developing a website. The course has several contributors and uses a downloadable syllabus.

Oh ... and it's not heavy on coding. So don't shy away from it if you're not a coder.

I found the site by selecting a link in a SitePoint book (free sample of Principles of Beautiful Web Design), then following a comment's link in the blog at that site. Aren't hyperlinks wonderful!

Footer fetish

Derek Powazek urges web desighners to use footers for something meaningful -- something more than just copyright information or addresses. He says that people who have read all the way to the bottom of the page deserve a reward.

How about suggestions (links) on where to go next?. Or maybe "Bonus links", "Related links" or some such, perhaps with an attractive image link or two?

Evaluate newsletter, bulletin design

Dive into a newsletter and bulletin redesign by first getting a few copies of publications from other churches. That feels less threatening. Then, check out all the principles, guidelines, traps, and tips on this site and those sites linked from here. Lastly, apply those to the sample pubs you now have.

A good way to evaluate the pubs is to use a rubric. The Educational Service Center, Fort Worth, Texas, has a newsletter design rubric (PDF) you can download and print. It scores against major design principles:

• Contrast
• Repetition
• Alignment
• Proximity
• Graphics

Newsletter, bulletin design tips

Once the exclusive domain of books, you can now find tips on design of newsletters and bulletins on the Web. Here are some tips and related sources:

• AVOID ALL CAPITALS. It's old typewriter and teletype habits and now considered "shouting". Plus all caps slow down reading speed.
• Avoid blocks of bolded text. They slow down reading speed.
• Use only single spaces between sentences. Two spaces is an old, typewriter-based habit. We use proportional fonts these days, unlike the typewriter.
• Use true dashes, not hyphens.
• Reserve underlines for hyperlinks. Don't underline headlines, subheads, or publication titles.
• Place quote marks correctly.
• Use serif fonts for text, sans serif for headlines and subheads. Serif fonts are easier to read in blocks of text. Using sans serif for headlines and subheads helps visually separate them from text elements on a page. It makes the page easier to scan.
• Use proper line spacing. Don't just add empty paragraphs – extra presses of the Enter key.
• Avoid rivers of white. Make effective use of white space. Look at your design critically – what's critical and what's really just "noise"? Remove the noise.