As web content becomes a greater part of our lives, website design is playing a more important role in your school community’s experience with your school. People expect more and more from your total web communications, so it’s important you stay out in front of school website design trends.
I’m taking this space to outline what the Campus Suite design and development teams are using to frame what we do day-in and day-out to provide schools with the templates, tools and technology to communicate most effectively. These 5 hot trends in school website design for 2017 already might be part of your website.
You should ask your website provider about these trends, or what they see as what tomorrow’s great school website just might look like.
1. Mobile first
Perhaps the biggest driver in design trends is that – like the commercial and other non-profit websites – schools are seeing most of their users visiting their websites via mobile devices.
According to TechCrunch, in November 2016, marked the first time total website access traffic tipped the scales from desktop to mobile devices. Should come as no surprise, really. Think of your own usage: whether searching, shopping, checking calendars or leaning heavy on that next pushed alert/notification, we depend on our phones and tablets to help run our lives.
So when I say ‘mobile first,’ I’m referring not only to the fact that this factor is at the heart of many design trends, but the very definition: mobile first means designing the website experience for the mobile user first, then the desktop. Your school and your website provider should have a mobile-first approach to all your school website communications. Mind you, mobile first is not a new concept, just not one that’s been universally applied in school districts websites.
If your school website is not responsive (that is, doesn’t adjust for the device it’s being viewed on), Google doesn’t like it either. And we all know how important it is to get along with that ubiquitous force in our digital lives.
2. Clean and simple design
In large part due this trend of people hitting websites via phones and tablets, a clean and simple design is critical for successful websites. Design must be able to respond the the various devices, platforms and browsers, so in order to be able to work well, there’s been a shift away from complicated design.
Not too long ago, I wrote an article titled Tips for A Great School Web Design, and I revisited it before writing this to see if it still holds up. I’m proud to say, the principles outlined in that article still hold true, so you can confidently incorporate those tips with today’s trends in web design.
Complex design, while sometimes beautiful on the surface, is often not user friendly. A term that’s popular these days is ‘flat’ design, which incorporates simple shapes and primary colors to dominate interfaces and graphic elements. Flat (or sometimes referred to as ‘semi-flat’) design help meet the requirements for responsive web design, which essentially means a universal viewing experience regardless of the device or platform used.
Today's trusty tenets for clean and simple design include effective use of typography and scalable images and icons. These help control readability, image size and adaptation to various screen sizes. That also translates into more intuitive navigation throughout the site. (You see a lot of flat design being used in the interfaces for new Window and Apple OS.)
For some award-winning examples of flat design, check out the AWWWards website, which is a consortium of web designers who recognize and judge design creativity and innovation on the internet.
According to WebAIM, the worldwide non-profit organization dedicated to making websites accessible for disabled people, about 8.5 percent of the population has a disability that affects computer use. While a relatively small percentage, this group has big leverage in how websites will be designed going forward.
As far as web design is concerned, the rest of the population can learn a thing or two from those with sight, hearing, physical and cognitive disabilities. Simple fact is, web accessibility is consistent with good design. In just about every case, the adaptations made for the disabled benefit nearly everyone. Well-organized content, crisp navigation, captions and other features (e.g., transcripts of audio or video files) benefit not only the hearing impaired but others as well. Here’s a free guide on school website accessibility and ADA compliance that every school website professional should read.
The law is a change agent in web design too. An influx of complaints from the Department of Education Office for Civil Rights is forcing schools and districts to make immediate changes on their website design. Current proposed rule-making by the Department of Justice is predicting that all schools will be required to be WCAG 2.0 AA compliant by 2018.
Consider this: a recent survey by the Campus Suite Academy indicated an overwhelming majority of district websites are either non-compliant or don’t even know if they’re compliant or not (i.e., likely not). If the turnout for the Campus Suite Academy webinar on Tips for School Website Accessibility is any indication, accessibility will be dictating a lot of decisions about school websites in the near future.
4. Landing pages
You might already be directing your website visitors to your homepage by including the www.yourschool.edu URL on posters, take-home materials and even emails. Good for you. But what kind of useful engagement are you yielding?
Landing pages are website pages that collect a web visitor’s information using targeted messaging and a form. Landing pages can dramatically help how you engage various segments of your school community and pull them closer to your school. They can help promote events, gather information via surveys and forms, and generally more directly ‘engage’ your website visitor rather than simply sending them to a homepage or even a department page.
Landing pages can boost engagement and – because they help measure your website traffic and the success of your various traffic channels (social media, email, non-digital tactics, etc.) – can be a strategic tool in helping your meet specific communications objectives.
5. Full-width imagery and videos
Using large, full-width images is a way to make a big impact on your school’s website. When used properly, you can support specific messaging and reinforce your school brand using powerful imagery.
In most cases, these full-width (spanning the size of the screen) images will be high-res photos, but videos can also be used. Think of them as background art.
In addition, time was when it was ill-advised to have content you want seen ‘below the fold’ or beneath the first full screen. That’s a holdover from desktop-viewing days when designers crammed everything into one screen. Now, long scrolls or single long page provide content managers with design flexibility to link to smaller pages.
Toss in parallax scrolling, which is where the background images move slower than the main image to create a 3D effect, and you can further emphasize and spotlight selected content.
These school website design trends are what I see surfacing or, in some cases, strengthening in 2017 and beyond. It’s important that your entire school website team – your content managers, your IT managers and your website providers – be mindful of and try to get out in front of these trends. Choosing the right web design elements and strategies will go a long way to communicating your school brand and depict your school as responsive, modern and technologically advanced.
What school website design trends do you see on the horizon?
Related articles and resources:
As co-founder of Campus Suite, Steve believes behind every great school is great communication. His tech savvy and passion for design fuel his desire to help administrators understand, embrace and seize the power of web communications.