It’s 2021 award season – Oscars, Grammys, Emmys, et al. But what about award-winning school website design? Is beauty in the eye of the beholder, or can we all agree what is a well-designed school website?
We all know what makes for bad design, for we’ve all been on bad school websites – but not for long, and we don’t come back. That’s the point of this article. It’s easy to spot the bad stuff, but how do you go about creating a great school website?
According to the Web Marketing Association and their annual school website awards program, “Content clarity, appropriateness and freshness, graphic design, usability, functionality and overall depth of information.” What does that mean in practical terms?
What does that mean, for example, to the parent who needs to find contact information on your website in a hurry, but can’t, and leaves frustrated? Or what about the parent who is viewing your website on her phone and is spending more time re-sizing your page by dragging and zooming than she is spending time on homework with her child?
Apple founder Steve Jobs once proclaimed:
“Design is not just what it looks like and feels like. Design is how it works.”
Steve Jobs
Apple gained legions of fans not purely through aesthetics, but because its product design meets customer needs. (Yes, your parents are customers.)
Great design isn’t limited to smart phones and laptops, but encompasses websites too. Creating a well-designed school website isn’t just about flashy photos, multi-media presentations and nice colours. It’s also about how well the website works for your stakeholders: the community, staff, parents and children invested in the school.
- Can visitors quickly and easily find what they’re seeking?
- Does it encourage dialogue?
- Is it easy for your staff to manage?
Everyone’s got ideas – including us at Beyond Web – at what constitutes effective website design. Here are five key elements to keep in mind when planning and designing yours:
1. ‘Useful’ homepage
By useful, we mean get visitors to that next click, quickly and cleanly without a lot of scrolling and manoeuvring. Sure a good homepage should look great and be appealing – there are some great templates built in to many CMS packages – but if your visitors are lingering too long on your homepage, they’re likely confused. By creating a useful school homepage like Prahran High School, you can ensure website visitors get off on a good foot .
Keep it simple – Often the best design is simple design just like Lower Plenty Primary School. One of the common mistakes many schools make is trying to cram too much content on their homepage. The best homepages are easy to read, quickly guiding you to relevant information.
Quick links – Does your site lead users to the most frequently requested features? Quick links can cut through the clutter, saving readers’ time by getting them where they want to go, fast. Richmond High School, a state of the art campus in Melbourne, uses quick links and a slider for a clean look.
News and Calendar of Events pages – The John Monash Science School‘s calendar is the workhorse of school communications, so make sure it’s prominent and always current. School and district news should be fresh. If visitors see stale news, they won’t come back.
Images – Berendale School‘s rotating images (also called a slider) are a nice visual way to keep parents updated on new, important school events. But don’t allow the slider to dominate your homepage. Images are easy to change out using a Beyond Web’s friendly CMS.
2. Responsive design
Responsive design (i.e., mobile friendly) is a crucial element of modern school website design. It means your website can be accessed by a wide variety of mobile devices. Good responsive design assures each web page is readable and usable on a desktop computer, a laptop, a tablet or a smartphone. It automatically resizes and reformats your pages to eliminate that annoying and time-consuming zooming and dragging that serve as barriers to the viewer.
A school website that incorporates responsive design can be shared and viewed through email links, or social media sites like Twitter and Facebook, which more than half of users now access through mobile applications.
Make sure your website features responsive design. Otherwise, if your school website is not set up for mobile users, they won’t be visiting it, much less using it as a regular way to communicate with your school.
3. Meet website accessibility requirements
Ultimately, your website will need to follow the WCAG 2.0 AA standard, see “How to Make Your School Website Accessible” for further information. Some of these items are related to just making sure you complete a couple steps before you publish a web page, and others may require your technical resource to adjust the website template. You can also check out “Designing Accessible Learning Content” by the University of Tasmania for additional details and resources:
- When a page loads for a screenreader, the navigation is the first thing read to the visitor. By adding a skip navigation link, the screen reader will reader bypass navigation and start on the web page content. This is very helpful for visitors not to listen to the navigation each time they click a page. Your navigation will also need to work properly if the user uses the keyword to navigate. All links must highlight as they use the tab and arrow keys. All drop-down navigation must pop open and highlight the links as well. Many times the light blue outline that appears by default by the browser is no suffice, the links must be very distinct when selected.
- Follow HTML formatting standard for your copy. You should use a single H1 for the header and follow H2, H#, H4, etc. for formatting additional headers.
- All images must have a descriptive ALT tag or long description. This is important for the screen reader to communicate what the image is.
- As long as text links are clear on what they are linking to, there is no need for additional description. However, if it is something like “click here” you are required to use the “title” tag for the link and add a description. The idea is to make sure the screenreader clearly reads the links content.
- If you use tables to display data, you will be required to add a table header <TH> tag to the row header. The will allow the screenreader to communicate the information based on the table structure.
- A feedback link in the footer that allow you to gain valuable information to improve the accessibility and address any issues.
- Optional text-only option can provide a non-graphical view of the page.
4. Organised navigation
Intuitive, organised navigation is well-designed navigation. It’s key to a school website’s usability. That’s why it’s recommended to use the 10-Link rule in website organisation. Organise navigation and sub-navigation with ten links like Kyneton High School. Studies show people are most likely to make a decision when they have seven links or fewer to choose from. Anything more can be overwhelming.
5. Streamlined popular pages
In addition to the ever-popular school calendar, pay extra attention to the popular pages on your site. You can easily determine those through a quick analytics review using Google analytics. Generally, we’ve found these content areas are the top pages on any school website.
- Calendar – Make sure your school calendar is readily accessible, contains accurate, current info, and is easy-to-use.
- Contact directory – Make it easy for anyone to find contact information for everyone at your school. A contact directory buried in the website is a common, easily remedied frustration on many school websites. Make sure it’s current too. (If staff members leave or assume new responsibilities, update it.)
- School pages – Make it simple for parents and students to easily get to their individual school page. This can be accomplished through some high-level navigation.
- Teacher pages – Parents and students shouldn’t have to struggle to find their teacher pages. A link to teacher pages should prominently be displayed on the navigation and home page.
There’s much more, of course, to effective school website design than these five elements, but they serve as a great foundation for designing a new website or seeing where your current website stacks up.
Regardless of what criteria you use to determine an ‘award-winning’ school website, it’s important that it be well organised with a killer homepage, be easy to access on the go, and is plugged into the social media landscape. How does your school measure up in terms of effective school website design. Do you have an ‘Apple’ of a school website?
