8 Best School Websites On Mobile [Reviewed]

UX

authenticstyle-8 Best School Websites On Mobile [Reviewed] 24

In this post we’re going to look at 8 amazing examples of school websites, but more specifically what makes them outstanding on mobile devices.

In fact, if you are thinking of redesigning your school website, then utilising these same techniques will ensure that your new school website will be extremely user-friendly on mobile and as a result convert more visitors into open day visitors and new pupils.

With more and more parents first checking out school websites from their phones – making your school website easy to use on mobile is critical.

So, let’s get started looking at 8 examples of school websites and what makes them brilliant.

* We have to admit websites marked with an asterisk are school websites that we’ve created.

St Mary’s School*

authenticstyle-8 Best School Websites On Mobile [Reviewed] 1

Fairly recently we redesigned the website of a leading independent girls school in Dorset, all within a tight 4 week schedule.

One of the goals of this project was to ensure that the new St Mary’s website was a delight to use on a mobile device, as the school had noticed a significant increase in the number of parents visiting the site from mobile devices.

What makes this school website design great on mobile?

Quick load times

With the time it takes your school website to load on mobile being a ranking factor (e.g. it will affect your SEO), it’s essential to ensure that your website loads quickly.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 21

The St Mary’s school website was designed and built with this in mind so all the pages are nice and snappy and you don’t have to wait an age for images to load up.

You can see from the screenshot above the St Mary’s school website gets a nice 87/100 for it’s time to load on mobile, and 95/100 for it’s desktop load time.

Video is cleverly incorporated for mobile

Video is a great addition to any website, but it has to be carefully considered – especially on mobile.

With St Mary’s school website, rather than having a video playing in the background as the first thing you see (as many school websites and non-school websites tend to do), we added a play icon to the hero banner that must be tapped on in order to play the video.

This is good practice because integrating the video this way means it doesn’t impede the load time of the homepage. If the video occupied the full hero banner and started playing automatically, it would definitely increase the time it takes the website to load.

It’s super obvious that you need to scroll down on homepage

Ever heard of a “false bottom”?

If you haven’t a “false bottom” to a website is like a “soggy bottom” is to baking – nobody wants one!

A false bottom is basically when the content on any given page of your website ends ‘within’ the height of the devices viewport. Here’s an example;

authenticstyle-8 Best School Websites On Mobile [Reviewed] 20

As you can see, you could be forgiven for thinking that what you see above is the entirety of the page, when in fact you can keep scrolling down to see much more content.

You’d be surprised how many websites homepages fall into this trap, so on the St Mary’s homepage we added a simple “Learn more” button with an arrow that makes it clear you need to keep scrolling down the homepage to see more. You can also tap on it to be automatically moved down the page too.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 19

Footer links are hidden to save space

A good rule of thumb on mobile is to keep things simple – don’t show content if it’s not needed, or provide a way to hide/show content if it is needed but is not essential.

That’s exactly what we did in the footer of St Mary’s website by hiding all the links in the footer underneath their respective headings. The only way to view them is to tap on the headings.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 18

The benefit here is that we keep the footer as small as possible and don’t over clutter.

What could they improve?

It’s tough to critique one of your own websites(!), but if we had to, we’d probably look at changing the effect we’ve used when you tap on the navigation icon, and instead go for something that looks a bit smoother.

We could also animate the way the navigation items get revealed when tapped on too.

Both very simple changes that would help make the interface feel slightly smoother.

 

Hanford School*

authenticstyle-8 Best School Websites On Mobile [Reviewed] 2

Hanford School’s website is clean and clear, pairing serif and san-serif typefaces in a sparing way, helping link the website with Hanford’s overarching ethos of being “traditionally modern”.

What makes this school website design great on mobile?

Easily scannable contents section on internal pages

On Hanford’s site, rather than showing all the pages that exist within a particular section of the site at the bottom of the page, we implemented a horizontally scrolling contents section.

The works great on mobile as the user can easily get to other pages within a section of the website without having to scroll to the bottom of the page.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 17

Persistent links for downloading prospectus

It’s important to think about what actions you want your visitors to take on mobile and desktop and then make these actions super-easy for them to find and carry out.

We did this on Hanford School’s website by having a really simple bar at the bottom of every page with the four main actions presented front and centre. This is the same on mobile too.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 16

What could they improve?

One of our recommendations to Hanford was to make the size of the body typeface slightly larger to make reading the content as comfortable as possible. This is something we hope to implement for them soon.

 

Port Regis School

authenticstyle-8 Best School Websites On Mobile [Reviewed] 3

Port Regis, another independent school in Dorset have a lovely site with beautiful visuals and some nice effects that add to the user experience.

What makes this school website design great on mobile?

Parallax background effect removed

On Desktop, when you scroll down the page, the background scrolls up over the main hero image – this is called a ‘parallax background’ and is a nice effect in the context of their site.

However, on mobile effects like this can be a bit too much and can oftentimes be a bit ‘laggy’ if left when viewing the mobile site too.

Port Regis have recognised this and removed the effect when you view their site on a mobile device so as not to cause any loading or lagging issues, keeping their site responsive to use.

Clear visual queues for sliding content

Another nice mobile design best practice that Port Regis’ website utilises is letting the calendar content flow outside of the viewport to indicate that in can be scroll horizontally.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 15

This is a really simple technique but again a great visual cue to indicate to the user that they can interact with this calendar content and scroll left and right on mobile.

Beautiful menu that fits in one screen height

School websites tend to have LOTS of pages, so ensuring that the navigation on mobile looks nice can be a challenge!

Port Regis have managed to arrange and consolidate their navigation beautifully on mobile so that when you tap on the menu icon it fits perfectly into the height of your mobile screen.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 14

What could they improve?

For us, one of the main things that could be improved is the layout of the internal pages.

On Desktop the content is boxed in and overlaid on top of a lovely photo, which looks lovely as you have enough space around the site to see the image. However, on mobile, where space is at a premium it means that the content has to be very narrow.

We think it might be better to get rid of the image and give back some width to the content.

 

Pilgrims School

authenticstyle-8 Best School Websites On Mobile [Reviewed] 4

The Pilgrims School site has a really strong style to it, one which we love. It’s big, it’s bold and it comes across confident and different from other school sites that perhaps play it a bit safer.

What makes this school website design great on mobile?

Animated effects

As you scroll down the homepage, each piece of content subtly animates into view, helping the user notice and engage with it.

Now, you have to be careful with effects like this, but if used subtly then its definitely something we would recommend to help dwell time on your school website as it will encourage people to explore further pages.

Really comfortable font sizes

Mobile screens are getting larger, but they’re still obviously much smaller than a Desktop computer or laptop, so as such, you need to ensure your school website has a nice comfortable font size.

Pilgrims site does this really well with the body copy being large, but not too big, which makes reading the content on their site so easy. It’s something so simple, but something that will keep parents on your school website.

What could they improve?

One thing we noticed on the Pilgrims site is that it’s difficult to access the secondary pages from the main navigation. There’s a small ‘plus’ icon, but it’s difficult to ‘tap’ accurately on mobile because it’s so small – it’s also easy to miss because visually it doesn’t look like a button.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 13

One quick fix we’d recommend for Pilgrims is to look at placing the ‘plus’ icons within square boxes and placing them at the end of the navigation items. We think this makes it clearer visually that these icons are tappable.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 22

 

Bryanston School

authenticstyle-8 Best School Websites On Mobile [Reviewed] 5

Bryanston School in Blandford, Dorset have a lovely looking website and like most schools, they go for that initial impactful, immersive image that greets you when you first load up the site on a desktop or laptop computer.

What makes this school website design great on mobile?

On mobile they simplify the content

When you scroll down the homepage on Desktop you’ll see lots of engaging images which act as sign-posts to different areas of the site.

If this was simply translated to mobile as big image blocks that stack on top of each other it would make the page very long (as they do have a lot of content on their homepage) and mean the user has to scroll a fair bit.

Instead, Bryanston replace the images for simple blocks. Sure, they don’t look as good, BUT it’s more user-friendly as it takes up less screen real estate and allows the user to quickly choose which part of the site they wish to visit.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 12

They utilise a sticky menu

When navigating a site on mobile it’s often a pain when you start scrolling down to find you have to scroll all the way back up to the top of the page to access the menu.

Bryanston’s site has a “sticky menu” that is pinned to the top of the screen, meaning wherever the user is within the site, and at whatever point they are on a page, they can navigate quickly and easily to another page.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 11

What could they improve?

We think one of the downsides of the Bryanston site on mobile is that with the reduction in images, the homepage does look a little bit bland. The introduction of an accent colour might help with this (if of course their brand allows for that).

Also, when you get into the content pages on their site the size of the body copy is quite small. Making the font size a comfortable size on mobile is extremely important and will encourage people to engage more with your written content.

 

Russell House School

authenticstyle-8 Best School Websites On Mobile [Reviewed]

Russell House is an independent prep school for kids aged between 2 and 11. They’ve got a nice looking website that uses vibrant photography and colours to provide an engaging experience.

What makes this school website design great on mobile?

Breadcrumbs on internal pages

Many school websites comprise of a massive amount of content, with sections sometimes having a few layers of sub-navigation.

Russell House’s school website does a great job of letting you know exactly where you are within a section by showing a simple ‘breadcrumb’ navigation. They also include an ‘In this section” block at the bottom of the page to direct the user to pages they might also be interested in.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 10

They save space with carousels

On Desktop, the site shows three upcoming events and three latest news items. This would be the same by default on mobile, but in order to save space only one of each displays. However, the user can still easily slide through the carousel to get to more content.

As mentioned in another example, space saving is extremely important on mobile.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 9

What could they do better?

On the mobile navigation of Russell House’s website, the sub-pages appear when you tap on the main navigation links, but they are extremely small and condensed. This may potentially make it difficult for users to accurately tap on each item.

Back in the early days of mobile phone apps, Apple published a set of guidelines that stated tappable elements have 44 pixels space around them to avoid the potential for users to tap a link in error. Russell House may be better off implementing a menu where the sub-pages slide into view.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 23

 

Radley School

authenticstyle-8 Best School Websites On Mobile [Reviewed] 6

Radley is an independent boys boarding school in Oxfordshire with a beautifully clean and elegant website and strong brand.

We particularly love the interactive main hero banner on desktop, but what about the Radley site on mobile?

What makes this school website design great on mobile?

Persistent header with ability to share the website

Having a header that follows you down the page means that wherever you are on the website you can easily navigate to another section without having to scroll back up.

What’s also great about Radley’s website header is that on mobile there is the ability to share the website on social media and more importantly Facebook messenger. This gives a parent browsing the site the ability to ping a quick Facebook message with a link to the Radley site to their spouse to have a look at, or even to their son or daughter too.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 8

Interactive hero banner on homepage

As mentioned in our intro to this website, Radley utilise an interactive header which is different and provides the user with more information about the 3 key areas of importance – people, place and purpose.

authenticstyle-8 Best School Websites On Mobile [Reviewed] 7

The way this is executed visually makes it immediately obvious that each of these 3 elements are tappable on mobile and can be interacted with. Once tapped on, each one provides additional information and a supporting video.

Doing this is sure to increase interaction when someone lands on the site, and in turn this would help with SEO.

What could they do better?

Looking at the homepage, there’s possibly a little too much content as you do have to scroll quite a bit. We wonder if much of the social media feed information could be removed from mobile so the focus is on the content and not pushing visitors away from the website to their social media channels.

 

So, what makes a great school website outstanding on mobile?

From reading through our reviews of these eight school websites offering an outstanding experience on mobile devices, we can see some trends that clearly help a website become successful on mobile devices.

If you’re thinking of redesigning your school website then he’s a quick checklist of mobile considerations.

  • Optimise for speed
  • Ensure font sizes for body copy are comfortable to read
  • Don’t use auto playing video backgrounds, instead have videos play when tapped on
  • Use persistent navigation with a sticky header
  • Use animation effects to increase engagement, but use them sparingly
  • Carefully consider your navigation and make sub pages easy to get to
  • On internal content pages, make it easy to access other pages within that section
  • Save space on mobile by using carousels and horizontal scrolling content
  • Avoid a ‘false bottom’ on your homepage

 

Does your school need a new website?

If you would like to discuss how we can help you design and build a mobile optimised, content managed, bespoke website for your school, give us a call on 01747 852298 or send us an enquiry and we’ll give you a call back to discuss.

At Authentic Style we’re able to design and build bespoke school websites for a fraction of the cost of the big players in the school website industry.

Start A Conversation

Here’s what two of our school website client’s had to say about working with us;

St Mary’s Testimonial

Here’s what St Mary’s marketing director had to say about working with us;

“The Authentic team were great at listening to and understanding our requirements, developing concepts for the site which were exactly in line with what we had in mind. During the build, communication between us and the team was easy and efficient. We were all extremely pleased with the outcome and, thanks to the training provided we are now able to easily update and maintain our own site. Staff, students and parents are all delighted with the new St Mary’s site.”

Hanford School Testimonial

And here’s what Hanford’s marketing director said about her experience working with us;

“Highly recommend Will and the team at Authentic Style. They are a talented bunch who took our brief and over-delivered. We are delighted with our new website which is fast, responsive, easy to use and beautiful to look at.”

Would you like to be notified each time we post new digital media?