Trinity United Methodist Church

5 comments | Posted: 8 April 07 in Featured, by Nathan Smith


This site is nicely done because it balances a liturgical feel with the human factor of using photography of real people from the congregation. It tastefully uses pictures of the building, namely the unique stained glass windows, to accentuate the underlying history of the United Methodist Church tradition (I only mention it because the seminary I attended is also in this vein). It also has numerous photos of kids, including one with a face painted as a clown.

Trinity’s site was designed by Mark Steinruck, who credits Brandon Steiger of Synergema with some help on the development process. Mark has done an amazing job mixing color and texture. I love the way he carries the starburst background at the top of the page, through the info box on the left. This pattern makes an inverted appearance in the footer as well.

Speaking of the footer, I would have stacked the phone numbers, instead of spreading them all on one line. There already seems to be a generous amount of space afforded for the textured background, so it seems a shame not to put it to good use, instead keeping the numbers scrunched together.

While I’m making critiques, let me also say that leaving value="" to allow for an image to show through in the background of a Submit button is bad practice, because the button is not viewable in Camino (my favorite browser) and more importantly screen reader users have no way of knowing what the button does. Oddly enough, Safari catches the empty value and corrects it by rendering it as “Submit” – drawing a logical conclusion based on the input type.

<input type="submit" value="" ... />

Considering, however that the background image actually reads “Search.” This is something that should be consistent across multiple browsers for best-case usability/accessibility. Here is a comparison of Camino, Safari and Firefox:

Camino, Safari + Firefox

This could have just as easily been done with the image itself as a button, which would have allowed for a correct alt attribute-value pairing, and would have had more consistent cross-browser rendering. Granted, a CSS rollover effect couldn’t have been applied, but the accessibility tradeoff necessary is not worth the visual benefit. Code for an image button would look like this:

<input type="image" src="/img/search.gif" alt="Search" />

Aside from the problem with input buttons throughout, this really is quite a nice site. I really like the way Mark has implemented the ExpressionEngine CMS to handle all of the site’s content. He has given every ministry area of the church its own blog, to keep their information and activities up to date. This is cool, because each blog has its own RSS feed, allowing church-goers the ability to track news pertaining to a particular ministry.

I am also quite fond of the Worship section, because each service has a slideshow that lets you see what to expect when you attend. This helps to passively answer the age-old problematic question, “What should I wear to church?” without setting an explicit dress code.

Along those lines, there is also a Map of the church’s interior, so that you can easily find your way around if you are a visitor. This uses Cody Lindley’s ThickBox which I instantly recognized by the loading animation I’d done for it. To quote Yoda from Episode 2, that “brings warm feelings to my heart.”

I love the pastor’s welcome letter, with the personal (albeit digitized) signature. That greeting speaks to the human yearning to feel a sense of belonging:

As one young adult put it, “Coming to Trinity was like coming home.” It is our hope and desire that you will feel ‘at home’ here. – Source

I think that Mark has done a wonderful job of capturing this endearing message, and presenting it in a visually appealing format for people of all ages. Through his design, he has shown Trinity UMC to be lively and upbeat, while still giving the historical church traditions of ceremonial liturgy their due respect.

Discuss This Topic

  1. 1 Rob

    This is a great site. Aside from what was already mentioned, I like the fact that they have separate blogs for each of their departments (Kids, Youth, Adults).

  2. 2 Robert Spangler

    Again-nice work with the starburst effect, it has become such a big trend, it’s nice to see someone putting so much time into it and breaking the mold a bit.

    I’m honestly impressed with the entire site. Amazing work and amazing attention to detail!

  3. 3 Web designer in Australia

    Nice work thanks, thanks very much for the article.

  4. 4 Nicholas Kerzman

    This is a great site. The design is simplistic yet striking and very effective. The color palette is great! What I find especially nice about the site is the Information Architecture. This site is very well organized and easy to navigate. The designer/developer (s) definitely had the users in mind when putting this together. Well done!

    This site will definitely be a reference point for my church site I am about to embark on. One question, is this site managed via a CMS? I couldn’t gather this from the code. I was curious if this site is self managed by the church or the church contracts with someone to manage the content.

    Nice work!

  5. 5 Mark

    Thanks for all of the kind remarks everyone.

    Nicholas, the site is managed with Expression Engine. Getting all of the blogs working correctly was a big of a challenge, but overall EE made things very smooth. I also used EE’s Wiki module to write instructions for updating each piece of the site so that the client now has full control over the site management. Anytime that they have a question, it’s just a matter of looking it up in the Wiki.

    Feel free to shoot me an email if you have any other specific questions.


Comments closed after 2 weeks.