A Guide to Responsive School Website Design

Published: October 29, 2018

One of the most difficult decisions parents make is choosing which school their children will attend.
We all want the best for our little ones. We all want to know they’re learning in a safe, productive environment that will help cultivate their development and, ultimately, give them the right skills to build a successful future.
Researching any school your child may be able to attend is a crucial step, and the first port of call for the majority of parents is the school’s website — which is why it’s so important to get it right.
A website is a school’s chance to essentially shake the parent’s hand and prove why it’s the perfect option. Building a responsive school website is essential to deliver the best browsing experience and demonstrate everything that makes your school special.
But what does that mean and how can it be achieved?
In this guide, we’ll explore the power of responsive school website design, beginning with the basics.

What is Responsive Design?

Responsive Web Design (RWD) is an approach to crafting websites that provide a high-quality experience across multiple devices. We live in a world of 24/7 connectivity now: we’re not just browsing the internet at our desks anymore — our smartphones and tablets allow us to go online at any time, any place.
As the number of searches performed on handsets has overtaken those through desktops, websites have to perform to a high standard on any screen a visitor may use. Responsive Web Design focuses on running a single site incorporating elements which respond in a different way to suit the device in question.
An old-fashioned website might be made primarily to fit large monitors but is totally unaccommodating for mobile users. For example, if a page displays a table containing multiple blocks of data, this would have to be adapted to suit a smaller screen to prevent a cumbersome layout. Anyone trying to scroll across the page to read the table’s contents could become frustrated and look for the same information elsewhere.
Responsive Web Design ensures websites present visitors with the most user-friendly experience every time. Responsive design is vital to give parents the most accessible gateway to your school, offering an effective way to discover everything they need to know without a single moment of irritation.
The more you embrace this approach, the less reason you give parents to leave the site.

Key Features of a Responsive School Website

Responsive school websites tend to share certain elements. These combine to create a browsing experience that suits parents and prospective students alike, catering to the mother who’s researching your school at her office computer just as well as the child doing the same on her tablet.
So, what are these features and why do they matter?

Lots of whitespace

Whitespace is not just the empty parts of a website — it’s actually a major aspect of great design. Whitespace helps to make your text and images appear less cluttered, allows visitors to understand what they’re reading better and makes scanning for relevant information much easier.
Responsive school website design ensures your whitespace will remain proportionate and content will appear formatted just as well on tiny screens as bigger ones. This makes browsing far more comfortable.

Optimized visual content

Images must be optimized to display properly on all devices and load as quickly as possible. Loading times can make or break your browsing experience: if parents or children are searching for information but can’t access text because your images are slowing the site right down, they’re unlikely to keep waiting. If they do, they’ll become frustrated and be reluctant to return in future.
Image sizes must be reduced to facilitate fast load times.

An intuitive approach to navigation

Good navigation matters. Users will never appreciate having to constantly click back and forth through slow-loading pages because they tapped the wrong button or were misdirected.
Your visitors want to find exactly that they’re looking for with the bare minimum of hassle. Your school website should be built to allow for smooth, simple, intuitive navigation on all devices. Clear menus are a must, with obvious category titles and page layouts.
These key elements should guide you in building or overhauling your school website. Always keep the parents or children visiting your site, and their journey, in mind. Put yourself in their shoes and consider what would help you get the most out of the experience.

Helpful Pages your Responsive School Website Must Have

Your website should look and feel unique to your school. It should reflect your school’s values and goals as much as possible.
The tone of voice, images and colour scheme all need to capture the character of your school. Providing all the information parents and students require throughout the year is crucial, and there are certain staple pages you should incorporate to do so.


Always keep your school calendar updated with relevant events, such as holidays and special occasions. Give parents at-a-glance information they can find within seconds.
Letting your calendar go out of date may indicate to visitors that your school is unprofessional and disorganized.

Teacher profiles

Parents want to know who’s teaching their children. Include a brief bio and pictures of your teaching staff to help build a closer bond and cultivate a sense of community.


Who should parents call if their child is too sick to attend school one day? Who is in charge of organizing field trips or a school event? How can parents reach the head teacher?
Make sure you always carry up-to-date contact details on your school website, to give parents exactly what they need to reach your team. This is vital in emergencies.

School Jotter is an innovative platform allowing schools just like yours to build custom websites. More than 3,000 schools across the UK work with School Jotter, creating and maintaining their own domains with simple, user-friendly tools. Upload images and videos, reach out to parents with emails, host quizzes and more to engage with your community.
Please don’t hesitate to contact Webanywhere if you wish to learn more about how School Jotter can help you create the perfect website for your school.