Great Ideas for School Website Design

Written by Pano Savvidis // January 18, 2018

Your school website design is an important part of your school’s presence in the world. It’s a line of communication with parents, a way of celebrating your achievements, and a tool in attracting both pupils and staff. So how can you make the most out of the design?

 

Clear Navigation

It may not be glamorous, but the first thing you should think about is making your website easy to navigate. It affects the structure of the website, and so is fundamental to its design.

To do this, group pages together in a logical hierarchy that fits what people are used to seeing on the internet. Address, phone numbers, email, and a map to find the school should all come under “contact us”. Information about subjects can go together under “curriculum” or “what we teach”. Information about events should start with what’s coming next. A calendar with links to individual event pages can be a great way to tell people what’s going on.

Minimise how much effort it takes to find information. Whenever possible, visitors should be able to find the information they want within three clicks.

 

Accessibility

A few simple measures can make your website more accessible for a variety of users.

Use font colours that stand out well against the background. Black text on a background that’s white or pale is usually best. When making text stand out through different colours, avoid those that might be indistinguishable to the colour blind.

Use alt text for images. Make it describe what you want the picture to convey, as blind or partially sighted users will rely on this text.

Use clear, descriptive text for links, to help those using screen readers.

Some website providers, like School Jotter, include a translate option. If your school serves a diverse community then this can be a huge help by communicating with parents in their first language.

 

Use the Layout

Use the layout of each page to make it clearer and more accessible. For a page with lots of content, include jump links to each part at the top of the page, so that users with limited mobility can get down the page without much mouse use. Include drop down menus and links to break up text and provide extra options.

Because of the way people read, more information is absorbed from what’s at the top and left of each page. Focus the most important information here, to make sure that people see it.

 

Pick Your Font

The font you use can make a huge difference in how easy your website is to read. Avoid quirky choices like Comic Sans or old-fashioned ones like Times New Roman. The best fonts for online reading are sans serif fonts like Arial and Verdana, which are easy to read while looking elegant and modern.

Size matters. The best font size for online reading is 16px. You’ll also want to use other sizes for headers. With these, keep to the same font and to no more than three different sizes, to avoid mess and clutter.

 

Get Visual

Images are great for getting people’s attention and creating variety. You can use them to make pages more attractive and to draw readers to important parts of the page.

When using photos, take care in your choices. To keep them safe, children should not be identifiable from photos, so be careful with faces and don’t match them with names. Photos of eye-catching work can provide an interesting alternative.
Slideshows are another way of making the site more interesting. The movement they provide draws the eye, and they can show visitors a variety of images and text without taking up lots of screen space.

Bright colours create an emotional response and so can be good for drawing attention to important information. Use them sparingly so that they have more impact when they appear.

 

Use White Space

As you try to make the website more eye-catching, it can be tempting to fill it full of images and text. But too much can be overwhelming. Don’t be afraid to leave plenty of empty background space. Then, the text and images you provide will stand out better, and it will be easy to see what’s important.

 

Clear Writing

The content of your website is as important as the way it is presented, so think carefully about what you’re saying and how you say it.

Wherever possible, use plain English to make your message understandable. If you can choose between two words with the same meaning, pick the simpler one.

Break the text up into small paragraphs. It might feel odd as you write it, but simpler, shorter blocks of text are easier for a reader to take in. Where possible, limit paragraphs to around three sentences and don’t let those sentences run on.

 

Break it Down

Divide the writing up with headings and subheadings. Like small paragraphs, this makes the text less intimidating and easier to take in. It also makes it easier for users to navigate the page, skipping to the relevant heading to find what they want.

 

Keep it Relevant

It can be tempting to cram in a lot of information, just like it’s tempting to go overboard on the visuals. This might seem like a good way to tell people more, but in reality it’s often overwhelming.

To avoid this, think carefully about what the important part of your message is and how you can get it across. What do you want people to know after each page? How much extra is going to be interesting or useful?

If you want visitors to do something after reading a page, make this clear through a call to action. For example, a page about an upcoming school trip might end by suggesting that parents fill in the booking form, and then provide a link to the form.

 

Learn by Example

You don’t need to reinvent the wheel. Check out other schools’ websites and learn from what works for them. For some examples, check out our School Jotter website. There, you can also find out how School Jotter can help you make your own great website.

Get In Touch:

Your Full Name *

Your E-mail Address *

Your Telephone *

Enter your message here *

Thank You, your message has been sent.

Academy Schools

access

access device

Activities

advice

affordable

anti bullying

anti bullying month

Anti-Bullying Week

app

apps

assembly

assignments

Attainment

attendance

auditory

Augmented Reality

authentic learning

bbc micro bit

beatrix potter

Becta Guide

behaviour

Behaviour Management

behaviour management software

bespoke lesson content

best

Best Practice

BETT

BETT 2014

better

birthday

blog

Bloganywhere

blogging

blogging in school

blogging tools

Blogs

Bradford

brainwashing

budget

bullying

careers

ceop

charles dickens

children

christmas

Christmas message

class

classes

classroom

Cloud Computing

Collaboration

communication

Competition

confusing

continued professional development

CPD

Create your own character competition

creative school resources

cyberbullying

cyberbullying in school

Department for Education

Derbyshire

design

design your own egg

Differentiation

don'ts

dos

dropbox

e-learning

e-learning advice

e-learning events

e-learning in the classroom

e-portfolio

e-Portfolios

E-Safety

e-safety experts

e-safety in schools

e-safety survey

e-safety training sessions

Early Childhood Education Degrees

Early Years

easter competition

easter egg competition

easy to use

Ebacc

edtech

Education

Education and Technology Conference

education experts

education products

education technology

Education Tools

educational apps

educational technology

elearning

elearning apps

elearning competition

English

Enterprise day

eportfolio

esafety

esafety survey

Events

evernote

evolution of technology in schools

expert

experts

free e-learning products

free moodle events

free resources

free teacher events

free teacher webinar

free worksheets

French

Funding

gamification

GCSE

GDPR

Google

Google Apps

government

government guidelines

grades

Guest Infographic

guides

Handheld devices

Hardware

head office news

head teacher advice

head teacher of the week

help

helpful

History

Holy Family Catholic School

homework

homework block

homework month

homeworkanywhere

how to learn faster

how-to

ICT

ideas

IMLS Framework

improve

influential schools

Infographic

integrated e-learning solutions

Interactive Whiteboards

iPad

iPads

iPhones

jargon

Jobs

jotter

jotter mobile

Jotter Mobile app

Keighley

keynote

kids

kinesthetic

Laptops

laughing

LCMS

learn faster

learn faster advice

learn faster tips

Learn module

Learnanywhere

learner device

Learner Journey

learning

learning experience

learning faster

Learning Light

learning management

learning management system

learning management systems

Learning Platform

learning platforms

Learning Services

learning solutions

learning technologies

learning technology providers

Leicestershire

lesson plan

lesson planning

lesson plans

Literacy

literature

London

m-learning

Maths

mathsanywhere

message

messaging

microsoft

mindfulness in the classroom

missed

mlearning

Mobile

mobile app

mobile apps

mobile apps for schools

Mobile Friendly Websites

mobile learning

mobilegeddon

Modern Foreign Languages

money

MOOC

Moodle

Moodle 2

moodle 3.1

moodle 3.1 new features

Moodle 3.2

Moodle 3.4

moodle birthday

Moodle Conference

moodle experts

moodle lms

Moodle partner

Moodle SIMS Integration

moodle updates

moodle vle

most popular school website

Multi Academy Trust

Multi Academy Trusts

multiculturalism

national curriculum

Netbooks

new e-learning products

new elearning products

new elearning tools

New Ofsted Framework

news

newsanywhere

North East

North Yorkshire

Nottingham

Nottinghamshire

NQT

Numeracy

office 365

Ofsted

ofsted e-safety inspections

ofsted requirements for websites

ofsted school website requirements

online

Online Collaboration

Online Games

online learning

online learning solutions

online rewards system

online safety

online spellings tests

online tools

parent

parent communication

Parent Messenger

Parental Engagement

parents

passwords

Personalised Learning

Persuasive Technology

phishing

phone

Phonics

photos

Pi

pizero

planbook

podcast

Podcasting

poems

Poetry

powerpoint

presentation

press releases

Primary

primary education

primary lesson plans

Primary School

primary school competition

primary school website

primary school websites

primary schools

Prize

Procurement

product

professional development

promoting e-safety in school

PTT

pupil premium

pupil premium webinar

push notification

push notifications

quickvoice recorder

Radioanywhere

Raspberry

raspberry pi

RE

recruitment

reducing stress

Resources

responsive websites

revision

Riots

Safe Social Networking

Safeguarding

safety

save

school

school blogging

school blogs

school broadband

school competition

school eportfolio

School Information Regulations

school internet

School Jotter

school mobile app

school mobile apps

School Payments

school tips

School Web Design

School Website

school website design

school website help and advice

school website offers

school website system

school websites

Schoolanywhere

schools

schools technology

Science

scores

Sean Gilligan

Secondary

secondary learning platform

Secondary School

secondary school teachers

Secure Social Networking

security

SEN

senior leadership team

sharepoint

Shift Fatigue

silliness

SIMS

SKE

smartphones

SMS

Social Media

Social Networking

South Elmsall Carlton Junior & Infant School

spelling software

spellings

St Andrew’s Junior School

Studen

student engagement

Student Jotter

study

studying

studying tips

style

substitute teachers

Sugata Mitra

summary blog

support

tablets

teacher

Teacher Engagement

teacher resources

teachers

Teaching

Teaching Resources

tech savvy techer

technology

technology in education

technology in school

technology in schools

technology in the classroom

Test

text

texting

The Academies Show

The Achievement of Pupils

The Behaviour and Safety of Pupils

The BETT Show

The Quality of Leadership and Management

The Quality of Teaching

timeline

tips

tom starkey

top tips

Totara

totara lms

Tour de Yorkshire

training

training courses

tricks

Twitter

University

USA Moodle Partner

usage

useful

Video

video tutorials

Videocasts

virtual learning environments

virtual learning platforms

visual

VLE

vles

ways to save teachers time

Web Design

Webanywhere

webanywhere birthday

webanywhere events

webanywhere history

Webanywhere new products

webanywhere news

webanywhere office

webinar

Website Content

West Yorkshire

World Citizenship

York

Yorkshire