The backbone of a church website is its navigation. A poor navigation obscures the content and loses visitors, but a well-designed navigation will streamline the user experience by giving what they need when they need it.
Here are the latest trends in good church website navigation and headers.
Logo: Horizontal orientation. On the Left. Links to Home.
Most websites place their logo in the top left corner. The center (with navigation on either side) is also a viable option, such as in the case of Terra Nova. Tips include:
- Link logo to home page: Even if you choose to have “Home” as a navigation element, the logo should still link to the home page. Users expect this functionality.
- If you have both horizontal and stacked versions of your logo, you will want to use the horizontal version in most cases because it uses up less vertical page real-estate, which allows room for more site content before users have to scroll.
- Stacked logos still can work if (1) you have a longer name (Celebration Church), (2) your navigation bar is higher than normal for another reason such as subtext (The Chapel), or (3) your logo is compact (City on a Hill).
Dropdowns: No Longer a Best Practice
Dropdowns are still popular, but user experience architects, designers, and SEO experts are increasingly discouraging their use. Reasons why include:
- Studies have found that many people find dropdowns annoying.
- By not having them you drive people to higher level pages first which give them a broader context before drilling down further.
- You can still have subpages, just display them on the section page instead of in the website’s global navigation.
- Dropdowns dilute rather than focus the “link juice” from the home page. If not coded properly, Google may struggle to understand them at all.
- Dropdowns tend to encourage the creation of too many pages (I’ve been guilty of this in the past). Not having them encourages clarity and brevity through combining of the most important information up front.
Creative alternatives to the dropdown menu include:
- Longer home page with the subnav included in each section (see Hillsong London). University of Colorado Denver (where I’m attending grad school) takes this a step further and adds a floating nav bar which jumps you up and down the page.
- Provide the user with the context of an entire page simply through hovering over the navigation. For an example, hover over the main navigation on Gateway Scottsdale’s website.
Secondary Navigation: Use to Cut Down on Main Sections
The secondary navigation is used as way to cut down on primary navigation sections by moving a few frequently sought after pages into a smaller secondary nav bar. Common examples are Give, Contact, Login, Search, Calendar/Events. Tips include:
- Use smaller text
- Try to limit to 3 (not including Search)
- Also a common place to find a locations dropdown or campuses button/link.
Social Icons: Move out of Header
Though a number of sites still displayed social icons in the headers, more and more of them seem to be moving them to the footer, a sidebar, or beneath the slider.
Navigation Subtext: Use Only When Truly Helpful
Subtext is an option, but it runs the risk of making things unnecessarily cluttered. Tips include:
- Only use it if additional context is truly needed.
- Avoid using if you have more than 5 sections.
GOOD USAGE: The subtext is helpful and allows for the condensing of sections without loss of understanding.
- JESUS It’s all about Jesus
- VISIT Locations : About
- CONNECT Groups : Ministries
- SERMONS Training : Music
- GIVE Donate : Serve
POOR USAGE: The subtext provides no real additional value and makes things unnecessarily busy.
- ABOUT Who we are
- CONNECT and get involved
- NEXT STEPS for your journey
- EVENTS to enjoy
- GIVING back to the Lord
- CONTACT Drop us a line
Church Website Navigation Examples
Fairhaven (Centerville, OH) – 4 sections
Gateway Scottsdale (Scottsdale, AZ) – 4 sections
Note: Great use of subtext with fewer navigation options. Upon hovering over navigation a page-wide dropdown with a contextual large image and list of subpages appears. Feels like visiting a new page without having to click on anything.
Grace Community Church (Simi Valley, CA) – 4 sections
Austin Stone Community Church (Austin, TX) – 5 sections
Note: Example of a “Show Campuses” link.
Brainerd Baptist Church (Chattanooga, TN) – 5 sections
Note: Though their sections built around vision/mission are creative, their meaning is less intuitive to the visitor.
City of Grace (Mesa, AZ) – 5 sections
Eagle Brook Church (Minneapolis, MN) – 5 sections
Note: The campus links in the upper left above main nav work well with this simple header. On a less simple header, you might want to use a single dropdown, link or button.
First Baptist Concord (Knoxville, TN) – 5 sections
Rock Church (San Diego, CA) – 5 sections
Note: Another great use of subtext.
The Chapel (Chicago, IL) – 5 sections
Celebration Church (Jacksonville, FL) – 6 sections
Central Christian Church (Mesa, AZ) – 6 sections
Christ’s Church of the Valley (Los Angeles, CA) – 6 sections
Christ Church of the Valley (Peoria, AZ) – 6 sections
Church of the Highlands (Birmingham, AL) – 6 sections
City on a Hill (Melbourne, Australia) – 6 sections
Elevation Church (Matthews, NC) – 6 sections
Glide (San Francisco, CA) – 6 sections
Highpoint Church (Memphis, TN) – 6 sections
Imago Dei Community (Portland, OR) – 6 sections
LifeChurch.tv (Oklahoma City, OK) – 6 sections
Potential Church (Fort Lauderdale, FL) – 6 sections
Terra Nova Church (Troy, NY) – 6 sections
Central (Las Vegas, NV) – 7 sections
Central Baptist Church (Jonesboro, AR) – 7 sections
Christ Fellowship (Miami, FL) – 7 sections
First Baptist Church (Woodstock, GA) – 7 sections
Glad Tidings Church (Omaha, NE) – 7 sections
Scottsdale Bible (Scottsdale, AZ) – 7 sections
The City Church (Seattle, WA) – 7 sections
For more church website inspiration, check out Church Relevance’s list of Great Church Websites.