Here’s a quick quiz for you:

Which two areas of a web page do visitors click around on the most? 

In a recent webinar, Finalsite Chief Innovation Officer Angelo Otterbein shared the answer (based on heat maps):

The top and the bottom.  

It’s no coincidence, then, that the best school district website designs have strong navigational structure in both the header and footer. In this blog, we'll highlight the following nine schools:

• Jackson County Public Schools
• Mansfield Independent School District
• Northshore School District
• Widefield School District
• Madison Public School District
• Highline Public Schools
• Lake Washington School District  
• Lake Zurich Community Unit School District 95
• Hopkinton Public Schools

Tips to Improve your Main Navigation Experience 

One of the most challenging aspects of a school district website design is that it has to meet the needs of several different audiences. Some visitors will want to know about the district overall, while others — such as current families in your district — will want school-specific information. Most school district website designs fill these needs by designating separate landing pages for each school. 

1. Take organization a step further with color coordination.

Jackson County Public Schools, a North Carolina district with eight schools, makes the school navigation pop with separate colored boxes for each school. Each box includes respective contact information, and links to the school page. Each school also has its own color—notice the color coordination continues on the landing pages as well!

2. Separate schools by category.

This is a great way to give each school its own identity while still maintaining the overall look and feel of the district. 

Wait a minute, my district has 30 schools. You want me to clutter the navigation with 30 boxes?

Of course not. The box design above doesn’t work as well for large districts—after all, the idea is to streamline navigation, not clutter it more! This is just another reason Finalsite’s design team is equipped to work with districts of all sizes. 

Take Mansfield ISD Schools, a Dallas-based district made up of 46 schools. To streamline navigation, this school district website design groups the many schools by category. Parents researching on behalf of their six-year-olds can easily find the “elementary” school section, students can find their high school under “high/alternative schools,” and so on.

Oh, and the fun typography is an added design bonus!

Highline Schools, also a large district, categorizes its schools in columns. Middle School, High School, Choice Schools — the labeled sections are visually straightforward and user-friendly, saving parents a few precious seconds! The district also draws attention to its preschool education with a well-placed call-out button.

Is your navigation up-to-snuff? Request a free website audit and find out!

3. Implement a utility navigation to make key pages always accessible.

The Northshore School District uses "District" and "Schools" buttons on each school page that are easy to spot. For example, its Bothell High School homepage:

Widefield School District’s website design has a dark grey “district home” navigation bar that stays constant throughout the whole site. Whether visitors are on Widefield High School’s pages or the Janitell Junior High’s pages, they can always find their way back to the general district information via the header banner. 

Many of Finalsite’s theme designs are equipped with a utility navigation to separate district-level content from school-specific content. Learn more about our theme designs here!  

4. Use infographics and calls-to-action.

Brown Intermediate School, part of the Madison Public School District, uses infographics for some of its school-level navigation, and the header for district-level navigation:

Tips to Improve your Website’s Footer

The footer can sometimes become “the forgotten section” in school district website design—  though it shouldn’t be! In fact, the navigation organization in the footer is arguably as important as any header design treatment. 

The people who see your footer are likely to want to know more about your district.  

Since the only way to reach the footer of your website is to scroll all the way through a given page, we can infer that your footer viewers have spent at least a few seconds on your website (which is pretty great in this age of short attention spans). Perhaps they haven’t found exactly what they’re looking for yet, but they’ve made the investment to stick around for more. 

1. Add a Search Bar

Lake Washington School District addresses this need directly by including a search bar just before the footer on the homepage. The footer also has a drop-down feature so visitors can navigate to any of the district’s respective schools:

2. Always Include Contact Info

Footers must include contact information— visitors expect it. 

Website design— and more specifically, school district website design—-has been around long enough that users are accustomed to certain conventions. For example, logos are almost always located at the top of the page (usually on the left side), hyperlinks links tend to be underlined or a different color to indicate clickability, and pages are often separated by hierarchy. The same goes for footers. 

The Lake Washington School District’s website footer includes the following relevant information:

• District Logo (which is linked to bring users back to the top of the page)
• Physical Address & Mailing Address
• District Telephone and Fax Numbers
• Safety Tip Line
• Social Media Links
• Link to Non-discrimination Policy Statement (and a snippet of the copy)
• Link to Website Feedback Form
• Link to Website Accessibility Information

Usability is a key part of the user experience, especially for mobile users. By following these conventions with your footer, you won’t confuse or frustrate people who want to find your phone number— fast.

3. Add Key Calls-to-Action

Footers are valuable real estate for calls-to-action. 

Footers may signal to users that they’ve reached the end of a page, but it shouldn’t mark the end of their time on your website. Make sure it is easy for visitors to take the next steps you want them to, whether it is to sign up for a newsletter (also in the Lake Washington footer), follow your district on social media, or navigate to another page on your website.

Check out some other school district website designs with great footers: 

The Lake Zurich Community Unit School District 95 footer’s white arrow redirects its users to the top of the page.

Mansfield Independent School District’s website design includes a general “about” paragraph under the school logo, along with links to popular modules, contact information, and the site map. A red heart in the bottom left corner brings viewers to the district’s social media mash-up and the star on the side brings viewers back to the top of the page. (Both of these links are actually part of a sticky navigation that stays for the whole scroll—not just the end!)

Hopkinton Public Schools district website design spruces up the footer with a simple ‘H’ graphic and use of color to break up the copy. The “directions” link is another neat feature— especially for mobile users who use Google Maps as a GPS:

Key Takeaway

If you are in the process of redesigning your district’s website with Finalsite (or if you just want to spruce it up!) don’t forget about the header and footer. They are the primary go-to points when visitors are looking for information, so it’s extra important that both sections are well-organized, easy-to-read, and uncluttered. The more you can streamline navigation, the quicker visitors will find the information they are looking for, and the happier they will be. Plus, since you know all your site visitors will see headers and footers (and many expect to click!) you can guarantee your redesign efforts won’t be wasted.

As Finalsite's Marketing Associate, Leah promotes new school site launches and educates people on all things digital marketing. She’s passionate about global communication, handwritten notes, and sole travel. When she’s not exploring new places, she’s either blogging, doodling, or dreaming about it!