The possibilities on the web have changed drastically since we built our first school website back in 2007 (the Ampleforth College website which is still live despite being designed and built over 8 years ago), but the key principles of what makes a good website have remained.
Judging a good school website should go far beyond taking a quick look at the homepage. Far too many web design agencies fall into the trap of producing a great looking homepage – often with a beautiful photo that takes up the whole screen – but neglect the design and usability of the rest of the site. Inside pages are often a traditional fixed-width layout of 3 columns (one for the side navigation, one for text and one for teasers) and are the same throughout the site. This makes the site boring, makes the content hard to take in and doesn’t make the most of the user’s screen size.
Here’s our guide to the key features that make a fantastic school site that not only looks great (excellent design is taken as a given), but also works well for users.
1. Reflect the true ethos of the school
The best school websites give the user an accurate sense of what the school is like through the design of the website. Obviously, in order for us to do this, it’s important that we first get to know the school and understand its true character. While on the surface schools are often trying to communicate similar messages, the character and ethos of every school is different and that is what the website should show.
Often our research identifies one key differentiator that is unique to the school and reflects its overall character. The overall concept for the site is then devised to communicate this in the best possible way.
For example, the King’s School Canterbury go further than any school in promoting the use of technology throughout the school including in the classroom. Pupils are encouraged to use iPads and lessons routinely involve the use of an iPad. For this reason the website we produced is based on an iPad app whereby users swipe through the content to get a presentation of the school. It’s a unique approach to a school website but is true to the ethos of the school.
2. Make the navigation simple, but interesting
An important part of any successful website is the navigation. Careful thought needs to be given to the pages that will be in the website and how they fit together in the site architecture. If a user is looking specifically for a certain page or item in the site, they need to be able to find it quickly using the main menu. Our advice is always that the main menu should be as concise as possible and there should be no doubt about which section a given page will be under.
Having put the sitemap together, our aim is to ensure that using the menu is interesting and engaging. We always avoid long, boring, traditional dropdown menus, in favour of using imagery in the menu such as on the Sherborne site, or combining the main menu and the sub-navigation to free up space on inner pages like on the Pinewood School site.
“Navigation is intuitive and well thought out. It is very user friendly, which I like.”
Sherborne website visitor
3. Pull users into the site
As I mentioned in the introduction to this post, many school websites feature full-screen imagery on the homepage, and on the first visit to the website this does give the user a fantastic view of the school through the excellent photography. A prospective parent however, will visit the website on average 10-12 times while reviewing their options and making their decision. The impact of the homepage image decreases on each visit so there needs to be something to pull visitors into the site.
Too many websites don’t have anywhere on the homepage to present some recent news, or a call to action for an upcoming open day. What if an alumnus has just won Olympic gold and you have nowhere on the homepage to say it?
Users often ‘browse’ websites, and are not looking for specific information when they arrive, so it’s important to present them with interesting relevant content on the homepage and throughout the site. The Elstree School website features full-screen imagery on the homepage but users can click or scroll down to quickly access recent news and teasers into key pages within the site.
We’ve still got 6 more key things to bear in mind, so check out the blog in 2 weeks time for the next instalment!