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="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:
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
Comments closed after 2 weeks.