Journal
Christ Fellowship Redux
15 January 2008 › 13 comments
Like most people, I was quite busy during the Christmas season, but perhaps for different reasons. Due to an unfortunate circumstance my wife and I were unable to travel to visit my family as planned. However, I ended up being quite productive, because I was able to work on the front-end templates for the redesign of Christ Fellowship – a 20,000 member church in Florida.
Shortly after the relaunch of Stonebriar’s site, my friend Jason Reynolds was hired on as the CIO at Christ Fellowship. While I was sad to see him leave the Dallas area, it was a huge career opportunity for him. One of the first things he needed to tackle at the new job was overhauling the church’s old site. He assembled a solid team that made it happen on a tight timeline…
- Jason Reynolds — PM
- Chris Merritt — Design
- Ron Hall — TYPO3 Template
- Jeff Segars — TYPO3 + PHP
- Myself — XHTML, CSS + JavaScript
As far as technical implementation, Jason was concerned that without yet having hired any full time front-end developers, the code be easy to manage in the future. Initially, he suggested YUI Grids because he liked the modular approach. Shortly thereafter, Jeff Croft pointed me toward Blueprint.
This was my first project using Blueprint CSS, and for the most part I found it to be pretty well thought out. I don’t agree with all the presuppositions it brings to the table (namely 10px gutters being too narrow), but it helps speed development in a team. Overall, here’s what went into the site…
- Blueprint — CSS framework
- jQuery — JavaScript library
- hoverIntent — jQuery plugin
- innerFade — jQuery plugin
- TYPO3 — Enterprise CMS
I guess that wraps it up. Hopefully you’ll find the multi-campus approach to be intuitive as a whole. It was a cool project, one that afforded me the chance to build some pretty fun JS widgets. If you have some feedback to improve things, Jason would be happy to hear any constructive suggestions.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Jeff Croft
Looks great, man! Such tasteful use of the JavaScript effects. Well-done!
BTW, you do know about the Blueprint CSS grid generator, right? It’ll let you override those 10px gutters (and the column widths, too), if you want. :)
#2 Aaron Alexander
The site looks great and the use of hoverIntent is perfect. After seeing it here, I definitely plan on using it for a current project. Thanks for the info!
#3 beth
Hey the site looks great, congrats guys on a job well done!
#4 Nate Klaiber
Nathan, that looks incredible. Very well put together. Tasteful styles and use of JS make the interface easy to use and navigate.
Great work to all that were involved.
#5 Andy
Your creativity and skill at front-end development gets better every time I see something new you’ve done. Way to go!
#6 David Sutoyo
I was confused for a moment because the home page looked nothing like the screenshot, but that was quickly remedied when I clicked on a campus link.
Great work, though! I like the different colors for the different campuses. Subtle, and pleasing.
#7 Damien Buckley
Nice, clean as a baby’s bum. Excellent, tasteful use of js too.
#8 Daniel Marino
Very clean design/layout. Also, great use of JS. I think I would find it difficult spreading out the task of building a new site across a group like that, but you guys did it extremely well. Kudos!
#9 Ian Smith
Love the design!
#10 Micah Choquette
A very good website, Nathan! Superb use of the jQuery and the colors and design really flow together nicely. Love it!
#11 David Russell
Oh snap! That is brilliant!
I’m just loving every second that I’m on this site. I don’t know if this phrase will translate well, but it is sweet as all get out.
#12 Nathan Smith
@All — Thanks for the overwhelmingly kind words about the site. I want to reiterate that Chris Merritt did a great job on the visual design. In case there was any confusion, I was responsible solely for the client-side code.
@Jeff — I’m aware of the Blueprint CSS Grid Generator, but don’t really care for the multiple class names required. It seems to me that .column could be combined with .span-N, and that .last shouldn’t really be necessary with a bit more planning. Yet, all things considered, it’s still pretty slick.
#13 VJ
The site really looks excellent!