Journal
Stonebriar Relaunch
3 May 2007 › 19 comments
I am happy to report that the redesign of Stonebriar Community Church has gone live. It was designed by Chris Merritt, so all credit goes to him for the amazing visuals. David Lanier was responsible for implementing everything in the enterprise CMS, TYPO3. Last, and certainly not least is the IA + project management guru Jason Reynolds who was the anchor holding this whole project together. That man has the patience of a saint.
Me, I played code monkey and had the privilege of turning Chris’ amazing Photoshop mockups into XHTML and CSS. I also wrote the JavaScript for the site, with the help of jQuery and the innerFade plugin. It was quite a challenge getting all the PNG alpha transparency to work, especially in IE6. This was by far the most richly textured and layered site I’ve coded yet.
For the most part, the site is web standards compliant, with the occasional table or iframe output here and there due to some CMS extensions which were utilized to support legacy content. Overall, I am very pleased with how the site turned out. I am also glad that the Web Empowered Church initiative is working hard to make the next iteration of TYPO3 even better.
Let me again say that the guys involved were great to work with. Countless, humorous Skype chats were had late into the many nights involved in this project. If you’re looking for a designer, PHP ninja, or project-managing IA, I would unreservedly recommend Chris, David or Jason respectively. Depending on the size of your project, you might consider all three!
Discussion + Dissension
Comments closed after 2 weeks.
#1 beth
Great work guys!
#2 Nate Klaiber
Nathan,
I have said it before – but I think this site is incredible. Congrats on getting it launched!
Now you can sit back and relax – and chalk up another victory against IE6. hehe.
#3 Yannick
Really nicely done Nathan. Great job by all involved.
#4 Spencer
Wow, that is an amazing site. You are so talented with taking Photoshop stuff and making it into HTML and CSS code… unbelievable. I wish I could be your web design disciple… ha ha.
#5 Ben
Congrats to the whole crew who worked on this. Looks great. Out of curiosity, how do you decide when to use png and when to use gif?
I noticed on the about page that each of the small images were png and couldn’t think of why to go that route versus just using gif since support in IE is such a pain in the neck (well, at least for the transparency).
#6 Nathan Smith
Ben: On the about page, those PNGs were output by the TYPO3 extension. I am uncertain as to whether that conversion happened on the server side, such as re-sizing a larger image, or if the PNG files were uploaded in that format specifically.
As far as how I personally choose whether to use PNG – That decision is usually made based on alpha channels. If partial transparency is not needed, then I use JPG (for color depth) or GIF (solid colors) instead.
#7 Michael Montgomery
As I’ve mentioned before: beautiful design, and great work on the front-end coding and scripty stuff.
Thanks for everything; we’re all learning together.
#8 Sean S
Outstanding. Simply outstanding.
I love the news and events section. Feels very much like a hub of information for members.
#9 Ian Smith
I love the design, not the bloat. In my humble opinion, this site is too heavy. Load time and optimization was either ignored or overridden by the wishes of the clients.
As reported from Firebug:
51 requests totalling 1.15 MB
I see several opportunities for slimming down; the greatest of which would be to get rid of the 64k non-tiling background image… at least come up with a tileable solution…
http://www.stonebriar.org/fileadmin/templates_3.0/framework/img/content_home.jpg
Overall there are seventeen images over 30k. One image is 86K.
http://www.stonebriar.org/fileadmin/templates_3.0/framework/img/corner_overlay.png
In all humility, I think that many would agree that good web design encompasses the whole user experience, not just what a page looks like to the unaided human eye.
#10 Nathan Smith
Ian: I agree with all your points. In this case, my responsibility was that of developer, not designer, so I cannot speak to that part of it. I have optimized the images as much as possible, while still retaining the integrity of the original visual design. While my personal aesthetic style tends to lean towards minimalist, on this project those were not my decisions to make.
#11 Ben
Nathan, thanks for the response. That’s my process as well so I was puzzled by the png thumbnails on that page. Glad to know I’m not missing something.
#12 Jason Reynolds
Ian, thanks for your feedback. I mean that… we love help. As the PM on the project, I can speak to the lack of a perceived concern for bloat.
We spent over 300 man hours on studying our audience for this redesign and one of the things we learned was that 94.6% of our site visitors and target audience are on DSL or faster connections. 25% are on T-1 or larger connections. As such, we feel our site currently falls within the definition of “usable”. The study of our target also taught us that this audience has different expectations than other web audiences, and a rich, colorful site design was a baseline starting point. This came with some overhead that is unavoidable.
Also, with nearly 600 pages on the site, we pragmatically realized we could not do it all perfectly… and that if we wait until we are perfect, we’ll never release the site. So, this is a starting point for us. Sure, we would love to have faster page rendering for those hitting our home page for the first time. Sure, we would love to have all the links working, the calendar reformatted, and the blog launched. Still, we have the patience to understand that the release is the hardest part. Since we have launched on a great platform with great front-end code, we’ll be able to optimize over time while the site is more useful now than our old site ever was.
If anyone can add to Ian’s ideas for improving things, please lemme know. We only plan to get better with the critical help of guys like Ian.
#13 Brent O'Connor
FYI, when you click on the photo in this post it links to http://stonebriar.org/ and doesn’t come up in FF but when I add a www to the url it works.
Other than that it looks really good. I especially like all the content they have for new people and the selector they have for finding a small group.
#14 Ian Smith
I’m on cable and the page loads in about 30 seconds…. pretty slow, but then again a web designer is not the target audience. (we’re always going to be more picky than the average web user.)
I think given the parameters of the project, decisions could have been made in the design phase (it helps when the designer knows how to break something out into CSS and XHTML himself) to lighten the load.
One example is like this: I may initially want to put a soft edge in somewhere, but I know that it will take a 24-bit png + code to make it work or degrade gracefully in non-supporting browsers. So, I show them something else and they never see it as an option. There is always another way in design.
I don’t mean to question the parameters handed to you, but my personal feeling on this is that just because someone is on broadband, we shouldn’t make them max it out.
That said…
I am a realist though: when it comes down to it, the person signing the checks are the ones with the power. It is all about making a living, first and foremost. If their definition of “rich and colorful” translates to a page over 1mb, then by all means, do what you are hired for :)
#15 Robert Spangler
Love it! I probably clicked the ministry index tab about 50 times.
#16 Nathan Smith
Ian: In Chris’ defense, I want to point out that as a designer, his initial mockup would have been a lot lighter from a file-size standpoint.
http://chrismerritt.carbonmade.com/projects/13704#2
Based on the discussions and feedback from the church staff, it evolved to include more texture and depth. I specifically told Chris not to feel hindered by design constraints, and to just let the burden of coding it fall to me.
http://chrismerritt.carbonmade.com/projects/13704#3
So, after those two design iterations, it became what you see now. Anyway, I just wanted to point that out, lest Chris be painted in a negative light. It’s not like he immediately jumped into a design requiring a heavy download. He was simply facilitating the church’s vision. If good designers decorate, but great designers communicate, I’d say he did the latter.
According to Cameron’s list, Chris met just about all the “great” criteria…
+ Communicate
+ “Less” and “more” co-exist
+ Inspired by total environment
+ Selective iteration
+ Treat text as UI
+ Good use of typography
+ Realigned the “brand”
#17 Jared Christensen
I know of this little company in Dallas that would love to put Chris’s skillz to broader use. ;) Great work!
#18 Nathan Logan
Beautiful in design and code. Bravo to all involved.
#19 prolog
Really Congrats for this successful job! It is nice and powerful modern web design and develop sample. I like it so much..