Websites

Before I get started, I want to make it abundantly clear that I am in no way ripping on Catholic Hot Dish.com in this post—I simply wanted an example for illustration, and this is one site that follows a design pattern I've seen on many Catholic sites. I enjoy Catholic Hot Dish, and am saying nothing of the blog or it's content—simply it's design choices...

Now that that's out of the way, I wanted to point out an alarming trend I've seen on many new Catholic websites, parish websites, diocesan websites, and blogs: the tendency to pollute the entire design with too much 'stuff' that distracts from the website's actual content (what readers want to see).

Since I often read things in my RSS reader or Instapaper, it's not a huge deal to me—I click one button and the overpowering design of a site vanishes—but it is a problem for many of your site's readers, who aren't tech savvy enough to use such services. It's especially troublesome if you don't have a mobile-optimized design (or if your mobile-optimized design doesn't actually provide the bits of information that are actually important and present in your 'full' design).

The worst case is a design that has too many design elements and doesn't have a mobile-optimized version, meaning a mobile device may be loading 1-2MB worth of resources over a 3G connection, just to read your article!

Sharing Too Much

There seems to be a tendency to push the 'share' links—and to push them hard. It's now normal to see a set of Facebook, Twitter, Google+, ShareThis, etc. links in not one, but three to five (or even MORE) places on a particular page.

In the example of Catholic Hot Dish, there are post-sharing buttons above and below the post (1 & 2), there's a sitewide 'stay connected' set of links at the top right (3), there's a Google+ widget (4), there's a Facebook fan page widget (5), there's a Twitter widget (6), and an extra set of two (redundant) share widgets at the bottom of the page (7 & 8).

Not only do all these widgets cause pages to load more slowly (in the case of CHD, probably about 3-4x longer than if all those widgets were gone—they make up more than half of the page size, and add about 60-100 requests per page), they also clutter the design and make it less likely someone will share something (because there are too many ways to do it!).

Overemphasis Causes Distraction

It's a bit like the sign-emphasis syndrome I encounter quite often when helping Catholic organizations with advertisements and campaigns, especially for printed material or graphics.

People have a tendency to overemphasize to the point of distraction:

Notice how, in the image above, even though we emphasize almost everything in the ad, nothing really stands out (well, maybe the title, but that's it).

There are two things you need to do to make sure you hit people where it counts and make them want to do what you want them to do (on your website, in an ad, on a flyer, etc.):

1. Take away the cruft.
2. Highlight only what's really important.

An Example of Minimal Web Design

I've been focusing on the idea of 'distractionless' web design for the past few years, and I recently rebuilt Catholic News Live's website to try to cut out even more distraction from the site. I had to do a few things to get to the point where I am now:

1. Focus on the features I want people to use:
1. Reading the latest news stories.
2. Finding/purchasing the Catholic News Live mobile app.
2. Cut out everything that doesn't help with (1):
1. I took out all the ads on the site (they weren't really generating revenue anyways).
2. I took out all sidebar and footer information except for links to the mobile app (and a couple 'follow/like' buttons).
3. I distilled the list of the latest news down to the fewest functional elements.

Catholic News Live... before and after a makeover.

Nothing I took away made the site harder to use, or less functional—rather, it made the website faster to load (average page load times are down 30%, and the page size is halved), and made the relevant functionality of the site easier for end users to grasp and use.

Make some Changes

Look at the sidebars, widgets, links, and modules/plugins your site is currently using. Do you really need a 'ShareThis' link in addition to Twitter, Facebook, and Google+ share links, or can you just get by with one or two of those links?

Do you really need that 3D cloud of tags that fly around the mouse when you hover over them?

Do you really need an image rotator that shows the latest pictures you took on a family vacation?

Think about the actual utility of every element of your website, and whether it is essential to your site's functionality, or whether it may be distracting and paralyzing to your website's usability.

Take away the cruft. Keep only what's important.

In Luke 12, Jesus teaches us to guard against greed: "Take care to guard against all greed, for though one may be rich, one’s life does not consist of possessions." However, it is a longstanding tradition for Catholics and non-Catholics alike to give and be given simple gifts.

While not espousing the vice of greed, I'd like to offer some gift ideas for Catholic techies, bloggers, and podcasters. All the items are things that I have found help me in my ability to spread the Gospel through the technologies I interact with every day.

For everyone:

	The Church and New Media This book, compiled and edited by Brandon Vogt, features some excellent commentary on different new media initiatives and practices in the Church, by some of the most well-known and influential Catholic bloggers, social media users, and priests who use new media.  Buy The Church and New Media on Amazon for $11.00
	Catholocism (DVD Series) The Catholocism DVD series brings any Catholic into a fuller understanding of the amazing breadth and beauty of the Catholic Church throughout the world. The series has great Catholic teaching and beautiful imagery. Buy The Catholocism DVD Box Set from Amazon for $112
	Amazon Kindle If you want to save a few trees, but still have a great experience reading books and news, the Kindle is a great way to do this. The screen is easy on your eyes, you can find almost any book you want to read, and the price is pretty affordable. Buy a Kindle from Amazon for $79 and up
	Catechism of the Catholic Church Every Catholic should have a copy of the Catechism on hand for pressing questions, or just to read through on a slow day. This edition handily fits into any bookcase, and lasts a very long time due to its sturdy hard cover. Buy the Catechism of the Catholic Church from Amazon for $10
	Daily Roman Missal - Leather Edition Since 2011 is the first year with the revised translation of the Roman Missal, what better time to have an excellent Roman Missal to accompany you to Mass? This book contains the readings and other liturgical texts for the daily Mass. Buy the Daily Roman Missal from Amazon for $60

For podcasters and mobile video producers:

	Audio-Technica Lavaliere Mic This handy little lavaliere microphone is useful in many situations; in one-on-one interviews, use one for the host and one for the interviewee; in monologues, just stick one on the person talking, and you're good to go! Buy the Audio-Technica ATR-3350 Lavaliere Microphone from Amazon for $21
	The Glif - iPhone 4/4S Stand and Tripod Mount For most mobile podcasters and producers, the iPhone is the weapon of choice when it comes to quick interviews and recordings. The Glif will keep your iPhone mounted securely to a tripod while filming or getting B-roll for your project, and it's tiny but durable. Buy the Glif from Amazon for $20
	Sennheiser HD-280 Pro Headphones These great-sounding headphones are also quite comfortable. Making sure you have a great soundtrack (voice, effects, music) helps you ensure that your video or audio podcast sounds great everywhere; having headphones like these helps you hear exactly what's recorded. Buy Sennheiser HD-280 Pro Headphones from Amazon for $80

Can you think of any other gifts to add to this list? There are many different things that I know could make my life as a blogger and podcaster easier, but I'm already happy with my MacBook Air and my iPhone, so I can't think of too many other things right now.

Plus, in this economy, I only want to offer suggestions that give a really large amount of substance for the dollar—and all of the items above are things I think will enrich your life and make you a better blogger, developer, and media producer.

As more Catholic websites are adding comment forms and feedback forms, the problem of form spam (where you get submissions that are either obviously not written by humans, or submissions that are simply opportunities for people to link back to their own websites) increases.

I wrote a post on user-friendly spam prevention techniques that I employ on my websites over on Life is a Prayer.com, and in that post, I talk about the importance of making your spam prevention user-friendly. I specifically write about how detrimental CAPTCHAs are to usability and user happiness.

After you read the article, do you have any other ideas or techniques that you use to stop spam and make your users and commenters happy?

Pope Benedict XVI tweeted the launch of News.va, the new news website from the Vatican.

The site takes a while to load from my iPhone's data connection, but I don't know if that's because (a) the site isn't using a US-based CDN (looks like I'm connecting to Amazon Web Services' western-EU servers), or (b) my iPhone has a 1.5 Mbps connection...

Here's a link to the Pope's (first?) tweet »

Also, it looks like they're using Silverlight or Flash for some content. But at least most of the content is plain-vanilla HTML!

One of the last major projects I was privileged to work on (along with some other awesome colleagues) while I was working as the Director of Web Development for the Archdiocese of St. Louis (see 'A New Job' on my blog for more info) was the Eucharistic Congress website and video.

One of the major benefits of using a robust content management system like Drupal (which archstl.org uses) is that you can actually build 'special sites' that highlight certain events or causes without building an entirely separate website. For example: Every organization in the Archdiocese has it's own website, with its own content managers, its own forms, news pages, articles, etc. through the use of Drupal's 'Organic Groups' module.

For the 2011 Eucharist Congress, instead of building a separate website, and then linking back to the Archdiocesan website, we built a single page template for the Congress home page (using a standard Drupal template (.tpl.php) file), and then set up all the rest of the content (a registration form, some information pages, etc.) in Drupal.

The results are pretty impressive (you have to visit the site to see the jQuery-enabled page load effects, which look great on any device—no Flash here!):

In addition to this awesome website (the front end was designed by Ben G., who works in the Archdiocese's Catholic Youth Apostolate), an excellent video highlighting the Eucharist was produced, and is visible (in HD!) on YouTube:

Kudos to the team who helped with all of these promotional materials for the Eucharistic Congress! I think this raises the bar, or at least pushes it a little, for Catholic dioceses hoping to spread the word about their larger events!

Yesterday the Vatican held its first-ever summit of Catholic bloggers, just a day after the extensive celebration of the Beatification of Pope John Paul II. Many Catholic bloggers from the U.S. attended, and you can view a pretty exhaustive play-by-play in Lisa Hendey's Twitter stream (view the hundreds of tweets from May 1!).

From a report by the Catholic News Service, Richard Rouse said the following on the purpose of the summit:

The Vatican meeting, he said, was not designed as a how-to seminar, and it was not aimed at developing a code of conduct, but rather to acknowledge the role of blogs in modern communications and to start a dialogue between the bloggers and the Vatican.

This is exactly the kind of meta-level view that I think is important to the Church's development of a strong online presence. Many people are too focused on the 'ooh, that's fancy! How do I do that?' way of doing things.

On the Pope's involvement in social media and online communications, Fr. Lombardi had the following to say:

Jesuit Father Federico Lombardi, Vatican spokesman, told the bloggers that while Pope Benedict XVI "is a person who does not Tweet or have a personal blog, he is very attentive and knows well what is happening in the world" and supports Catholic media efforts, as seen by his Good Friday television interview and by his book-length interview with the German writer Peter Seewald.

This is a great model for many of our spiritual leaders to follow; their primary mission is the care of our souls. A person in a sacramental position in the church may, but not must, participate in online communication activities... but never at the forfeit of his mission to care for the souls of God's people—only in support of that mission.

I'm encouraged by what I've heard so far about the summit... but I'm also waiting to hear more personal accounts of the summit, mainly from some of the many American bloggers who attended (Lisa Hendey, again, has a concise list of those who attended in this post).

One question I'm often asked by many other diocesan web development teams/individuals is how we put together our online Mass Time search (also used for searching adoration and reconciliation times). We also get questions about how we do our online mapping—but I've already covered that (see: Beautiful, Easy Maps in Drupal using Views and Mapstraction).

The Archdiocesan Mass Times search interface (click to enlarge)

We already have a database provided by the Archdiocesan IT department (they maintain it with the help of our diocesan Parish Support staff, and parish secretaries who can update their own schedules and information), so we needed to do the following on the web:

• Import all the Sacrament time information and attach it to a parish node (so times/days could be affiliated with parishes).
• Display the time information on parish node pages, in a meaningful way.
• Allow users to search by Sacrament times, showing parishes on a map, and showing the Sacrament times in a list under the map.

I'll cover each of these important aspects of our website's functionality below.

Preliminary note: much of this code was provided originally by the great folks at Palantir, who helped us set up this and many other features on the Archdiocesan website...

Importing time information, attaching it to Parish nodes

The first step in the process is importing some 3,000+ parish event nodes (which contain data for each 'event' - the event time, the event type (Mass/Reconciliation/Adoration), whether the event is a 'Normal Service' or a special kind of Mass, the location of the event (often in a side chapel or somewhere else), the event day, and the reference for the parish to which the event is attached.

Our site uses the Migrate module to import all the data, and we have the module set up to import all the events first, then import the Parishes, attaching the events to parishes (through custom code) using a node reference. Continue Reading »