design

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.

An issue which is often in the back of my mind, but often not even on the radar of a lot of Catholic web developers (I know this from experience) is online accessibility. Many new/remodeled Catholic Churches have hundreds of new technologies in place to help those with disabilities—wheelchair ramps, wider aisles, larger bathrooms, elevators... and many of these innovations cost a pretty penny.

Shouldn't we develop our websites with the same amount of care for disabled persons' unique set of abilities?

Much time during the design of the current archstl.org website was spent on WCAG 2 and Section 508 compliance, and the web development platform we have chosen (Drupal) goes a long way towards helping in this regard (in fact, Drupal 7 will be almost completely WCAG 2.0 compliant from the start!).

The archstl.org website passes the WCAG 2.0 checklist with only a few minor suggestions (but none that will cause much hassle for users with disabilities). Check it at http://achecker.ca/checker/index.php.

I also try to have 'real-world' persons with visual impairment test my designs, to make sure they can easily:

1. Browse the website
2. Search the website
3. Hear/see the information on the page they'd like to hear or see
4. Know what images are on the page, even if they can't see them

For anyone involved in web development for news publications, one of the most important aspects of the website is its textual layout. Your site must be readable on a variety of devices, and, failing that, you should try to make it look great on at least one platform (usually the desktop browser)—typically other platforms will follow.

There are a few things to watch out for:

1. You can have lines too close together—use line-height to give proper spacing/breathing room between consecutive lines of text.
2. You can have paragraphs too close together—add some margins between paragraphs so they are divided visually.
3. You can have too narrow a viewport for your content, meaning users spend more time scrolling than reading. (However, you don't want to have it too wide either—sometimes a semi-fluid layout can be useful).

I just spent a few hours working on making a better print.css file for the Archdiocese of St. Louis' website, and, imho, it was time very well spent.

In a meeting just last week with the St. Louis Review staff, I noticed that three different people on staff had printed out pages from archstl.org, and those printed pages looked like junk. I had neglected spending much time with the Archdiocese's print styling (in a print.css file) when I originally designed the site, and I decided it was time to work on it a bit.

I first hid all non-essential elements (graphics, search, navigation, sidebars), then worked on styling the main body of the page a lot nicer. Now, it prints relatively well across Safari, Chrome, FireFox, and Internet Explorer. However, there's a weird bug in FireFox that causes some pages to print with a blank leading page, then with cut-off content on the second page.

At least it looks pretty :)

I think you'd be surprised how many people print out articles and pages from your website—especially if your site is heavy on written content. It's a good idea to cater to them just as you would to mobile readers and those using less-than-ideal browsers (<cough>IE</cough>).

Reposted from Life is a Prayer.com:

Today Google announced they'd help advance web typography by hosting open-sourced fonts on their CDN, and by giving the code to easily embed fonts on websites on a new website, the Google Font Directory.

It was amazingly simple: just copy the <link> code and paste it in your template's header, then set any element on your page to use the Google-provided font(s). I started using OFL Sorts Mill Goudy TT, and I like the look (except for the lower-case y, which seems to be cut off).

(The code simply adds an @font-face declaration via a Google-hosted CSS file... I wonder if it's legit to self-host the CSS and font file; I haven't read through the terms and conditions yet).

I'm thinking of using this library for a few other projects on which I'm working. Much easier than Typekit, and it doesn't require any javascript or flash overhead, like alternatives such as Cufon and sIFR do. (Source).

I finally had a little time today to update the Archdiocese of Saint Louis' 404 Not Found page. Drupal has built-in 404 handling, so I simply created a new node, added in the content of the 404 page in the node body, and went to the 'site information' page to set 404 errors to that node.

In redesigning the page, I wanted to fulfill two goals: Continue Reading »