An Example of Effective Complex Website Navigation

Published in Widgets that Work on Wednesday, May 31st, 2006

Besides being a very pretty website, The City Church provides a great case study for dealing with some complex navigational requirements.

Check out the website and have a click around (screenshots for posterity 1, 2, 3). Nicely done, no?

A lot of people are using tabs, and triangles and arrows and all that jazz on their navigation, but here we see them used together, and done beautifully. Then, when you get to the bottom of the page, almost all you need is there: a great footer site-map (see Cute Navigation for more) and the pertinent contact information. No doubt both of those help save users a few clicks around the website.

Congrats to the City Church and the Team at 31three for building something beautiful and possibly very functional. Thanks to wisdump for pointing it out.

Comments and Feedback

I agree. I've been struggling for a while to come up with a second layer concept that looks and works as well as this. I guess my long over-due reboot is about to take a slightly different direction! Nicely done indeed.

Definately, it's the good example of combination of simplicity and good style. Visitors don't need unuseful items on the site.

Home » Blog » Widgets that Work

Check out the blog categories for older content

The latest from my personal website,

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..