Heal Your Church WebSite

Teaching, rebuking, correcting & training in righteous web design.

St. Gertrude Parish, Cincinnati, Ohio

You know your church website is in trouble when you have to take off your shoes to count all the animated gifs. This was almost the case with the website for the St. Gertrude Parish of Cincinnati, Ohio. On the homepage alone I counted:

  1. One dove a-flying;
  2. A Celtic cross a-spinning;
  3. Some chain links a-clinking;
  4. Five friars bowing;
  5. A blinking under construction roadsign;
  6. A weather underground adware a-flashing;
  7. An email a-spinnin’;
  8. And a ‘Rosary Now’ icon fading in an out.

All this ‘animotion‘ is reminiscent of Strong Bad’s Web Design Tips (Flash required) where Homestar’s arch-nemesis empirically decrees “don’t worry about subject matter, just put up lots of animated gifs.” Okay, okay, the St. Gertrude Parish site isn’t nearly as bad as The Cheat’s final product, but the point is one should “Use graphics to show real content, not just to decorate your homepage (Jakob Nielsen)”; emphasis mine.

And the St. Gertrude Parish site does have some ‘real content,’ unfortunately the information layout and navigation mechanics are so inconsistent, and some of the titles and categories non-intuitive, that unless you’re a determined and clued-in member, or perhaps someone writing a review of the site, you may never find it.

Let’s start with the layout. Well first, let’s pick a layout. For example, I don’t mind the homepage being (slightly) different than the others … so long as all the other pages are consistent among themselves. But click on “Capital Campaign” under the “Parsish” menu option and you get something completely different from the other sub-pages; the latter of which offer subtle variations of background images, fonts and layouts. And while I can understand making an entity such as the School page look different than the rest of the site, you can’t get to the website unless you’re using Microsoft Internet Explorer because the DHTML menu delivers this particular page in the form of a pop-up window. Not that you see all that much once you get there. Even less on the Business Manager page.

The language choices for the pages, menus and navigation are also confusing. Title of the Church page gives you the impression that you’re on the home page. To a visitor, this is confusing enough, but move own down the Church Page and click on some of the Patroness page link and you get more unexpected results. Well, I suppose might come second nature if you’re both Catholic and a member of St. Gertrudes, but for the rest of us “Page 1” and “Page 2” is just a bit too ubiquitous to be anything but confusing, especially when we click on these links and are sent to pages offsite.

Similarly the “Activities” menu choice doesn’t list a calendar of events, but rather parish ministries. If you want events, you need to look under the “Parish” link. Which should not be confused with the Church page page, which isn’t the same as the home page, but is named “parish.htm.”

Click on ‘Ask-a-Priest‘ and you get a service no longer provided by the church. Which may be confusing to a visitor, because there you are on a webpage with an email address tempting to squeeze in just one more question. Here’s a situation where an auto responder might be better than an annoucement page. At least remove this from the main menu and modify your robots.txt to exclude it from search engines. This way, only people with bookmarks get to the page directly.

Along with some of the menu options, the menu layout is also a bit irksome as the drop-down links are centered, instead of flush-left like all the pull-down menus I’ve ever used on PC’s, Macs and Linux boxes. This, of course assumes you’re not one of the 13% of web users who have JavaScript disabled (or have it disabled for them via their employer’s firewall). In other words, there should be text links along the bottom of this page.

So how would I heal this church website? I’d leave the site alone and go through a formal discovery process. That is, on paper, answer the questions, who is my audience? You’ll probably find two targets, members and seekers. Then answer the question, what information can I give them to draw them in, and keep them in?

Once you’ve got the information handy, then add to this, what other parish ministries need to convey a message? Who are their target audiences? What essential information do they need to convey?

Once all these questions are answered, then it’s time to organize the information into a logical hierarchy. Avoiding CHURCHY terms along the way.

Then again on paper sketch out the menus and layouts. Select a simple color scheme. Stick to one or two fonts. Come up with consistent conventions, such as subtitles get bold and 14pt, page titles are center an 16pt, etc …

Create a test page and menu. Then pull in some people to perform some tasks with the test page and menu … no coaching allowed. If they don’t get it, then fix it until it passes “can my grandma do it” test. Once this is done, you have a template which you can use to generate the rest of your site. When this process is complete, then you need only sit back and wait for all the visitors to flood your doors … while you engage a second career in the maintenance phase.

The point is, this website needs some seriously healing before it can successfully communicate the love and service this wonderfulu parish offers its community.


  1. “ETERNALLY under construction” is kinda cute though.

  2. One rather telling thing first. My 13 year old son, who has been reading this site, mentioned right away that the menu navigation on St Gert’s is not right because of the alignment. Thanks, Dean, for edumacating my kid!

    While we’re on the subject of menus, the designer of St. Gert’s site did manage to do something I was unable to do: namely, get the java-script menus to work at all. Either they don’t align correctly, the colors don’t come out right, or they don’t anchor in the right spot. Dean, any articles on menus “for the rest of us”, namely the weekend web warriors? Most of them are just too durn complicated.

  3. Ummm… that’s [like] not a Celtic cross — it’s a Latin one. The Celtic ones are the crosses with the circle around the center.

    So :P

  4. Thanks a lot Dean. I’ve passed this link on to the webmaster for st. gert’s and he’s going to check it out.