91% feel church insensitive

According to research conducted by Barna, 91 percent of non-Christians believe that the church isn't sensitive to their needs. Why? Jargon ("insider terms"), incomplete information, information that doesn't address daily concerns.

Tip: Design and write "for the least" among potential visitors. Avoid "churchy" language.

If your site contains a lot of churchy language, start editing now.

Source: http://www.pastors.com/

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 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.

Even babies like chunking

Johns Hopkins researchers have found that babies learn better with chunking -- grouped data. While that's news, it's not really so new. After all, web content experts have been advocating chunking of text for quite a while.

Breaking up text into bite-sized chunks in different ways makes it easier to quickly scan for information. No matter how good your content, you can improve it by separating the text into logical chunks -- chunking.

Some good ways to chunk and organize your text include:

• Use heads and subheads
• Use short, simple sentences
  See Write Simple or WebAim's "Writing Clearly and Simply"
  
• Put key information first (inverted pyramid style)
  
• Use short paragraphs (white space between chunked text)
  
• Use lists (unordered or ordered) when possible
  
• Use tables for tabular data
  

ScribeFire blog editor for FireFox users

ScribeFire is a blogging tool for FireFox users. Some of the ScribeFire features I like the best:

• Categorize and tag your blog posts
• Post an entry as a draft
• Save works-in-progress as notes
• Use FTP to upload files
• Upload images
• Set timestamps

I used ScribeFire to upload this as a draft post to the blog. Then I checked the code with the Blogger editor. Here's a couple things I learned:

• ScribeFire surrounds all the text you add in ScribeFire with a DIV element and a link to the W3C Validator. OK, but a bit much and not something I needed to add. So I deleted the DIV and associated link.
• ScribeFire uses no paragraph elements. Though that's the Blogger default too, I much prefer to use code for paragraphs and to use CSS as desired for the P element.
• ScribeFire left extra spaces around a lot of text and did not pull lines together. This can cause problems in Blogger and needed code cleanup.

In short, the tool is quite handy, but you may want to do some code cleanup before posting to your blog. I'll use this due to its ease of use but will publish only as a draft. I'll do code cleanup in Blogger. That's annoying for such a potentially great tool.

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.

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

Web inventor explains impact of Semantic Web

Tim Berners-Lee, who invented the World Wide Web and is director of the World Wide Web Consortium, explains to MIT's "Technology Review" how the Semantic Web will transform the way we use data.

The video presentation is by Brightcove video publishers. I find the interface interesting and easy to use. The maximum size is not full-screen, but plenty big enough for a computer screen.

• View the 8-minute video of Tim Berners-Lee

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?

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?

Web page views get an 'F'

Jacob Nielsen, renowned Usability expert, says that a recent study on eyetracking visualizations shows that users read web pages in roughly an "F" shape. He lists three main implications of that:

• Write for scanners.
  Users won't read your text thoroughly. They scan parts of pages.
• Use the inverted pyramid writing style.
  The first couple of paragraphs must contain the most important information.
  This is not news to anyone versed in newspaper writing. You start with the "Who, what, where, when, why" (the 5 Ws), and sometimes "How" of a straight news story. Then and only then do you elaborate.
• Put key words in heads, bullets.
  Your page's subheads, paragraphs, and bullets should all contain key words that users will notice as they scan down your page (down the left side of the "F").

Related tips

• Use flush-left subheads vs. centered ones. Centered ones are a good bit in from the left, where readers seem to want to read.
• Use bolding in subheads and perhaps even in the start of bullets. Bolding makes words stand out and might increase the chances of getting read. Just don't go bold-happy. A long stretch of bolded text slows down readers.

How to write for the web

Below are some tips related to improving your writing for the web. These come from Jacob Nielsen, renowned Usability guru.

• How users read on the web, including scores on a sample paragraph in different writing styles.
• Why web users scan your text
• Information foraging
• Write in inverted pyramid style
• Keep it terse
• How to write for the web (this has long text)
• Apply writing guidelines - increase usability 159%
• How to write heads and subheads

Don't make them think!

Steve Krug's First Law of Usability for web sites is "Don't make me think!". Some of Krug's points:

• Make everything easy for the visitor.
• Visitors scan pages; they don't read them. Design accordingly.
• Visitors don't take time to learn how site navigation works. They muddle through.
• Visitors "settle" for a link they consider most-likely when none seems "right" to them.
• Users like mindless choices (again -- don't strain their brains).
• Be pithy, not verbose.
• Design navigation with all the above in mind.
• If it's too hard to use your site, visitors leave and may never return.

Steve's book, " Don't make me think: A common sense approach to usability", is thin but pithy. And it has pictures and even some cartoons to bring home the point easily and quickly. This book is for beginners, through we all can learn something here (or at least be pointedly reminded of a better way to design our web sites for visitors).

How visitors really use the web

Steve Krug could write book about this! And he has -- "Don't make me think". Chapter 2 is online and viewable -- kind of a teaser for the whole book.

Krug says that "What [visitors] actually do most of the time (if we're lucky) is glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they're looking for."

So if you're designing a page with a lot of text, several menus to choose from, and a ton of links, perhaps you're defeating the whole reason for the web page -- to get read. Here's some other things you should know about visitors to your site:

• They don't read; they scan the page
• They don't hunt for the best menu pick, they choose the first one that looks good.
• They don't stop to figure out how your site works. They just plough ahead and make guesses -- and maybe bad assumptions -- for parts they don't know.

Krug's point? If we know what visitors expect and how they act, we can design with that in mind. Forget creating a literary masterpiece or even an online church brochure that will get read from tri-fold cover-to-cover. Make information easy to find and not overwhelming.

Visitors judge your site quickly

An article at Wired states,

"... researchers discovered that people could rate the visual appeal
of sites after seeing them for just one-twentieth of a second. These
judgments were not random, the researchers found -- sites that were
flashed up twice were given similar ratings both times."

So both content and general appearance are important. But remember, content is what will keep them coming back for more.

Also remember that viewers make a fast judgement about your site. A bad site is worse than non at all.

Read the full Wired article