Website design trends come and go. But, schools don’t typically do a complete website redesign to reflect fads, simply because of the complexity and expense involved. However, some trends are not simply a fad and are moving from trend status to best practices status. Let’s take a look at those to see how your school website measures up. Check out what’s trending and what is here to stay to see what your focus should be for your next school website redesign.
#1 Responsive School Websites
This must be at the top of every school administrator’s web design priority. Not only does it affect your search engine rankings (because Google gives priority to mobile-friendly websites), but it makes a huge difference to your primary audience—parents! Your site visitors are using their smartphones for more and more of their information gathering, and that means they are looking at your school sites on a tiny phone screen. Between phone and tablet usage, our school analytics show as much as 50%. What do they see? If it isn’t responsive, they will likely find navigation difficult or impossible, reading your content cumbersome, and your high-quality images take forever to download. And guess who they are frustrated with when they are just trying to see if that early release day is today or tomorrow?
To learn more about responsive design and the benefits and challenges, read our Responsive Web Design information. Check out your school’s responsiveness with Google’s mobile-friendly test tool.
#2 Accessible Designs
With the latest accessibility guidelines recently released by the U.S. Access Board, website accessibility is at the forefront of every school administrator’s mind (at least it should be!) From color contrast to keyboard functionality to moving elements, accessibility will be a huge focus moving forward. The laws requiring website accessibility have been on the books for more than 15 years, but until recently they were not being enforced. In the past two or three years, this has changed. The Office of Civil Rights has put many schools and education departments on notice with audits. To find out what you need to do and how to begin, check out some of our tips and blogs on this important topic: ADA Website Compliance Part I, Part II, What School Administrators Should Know, or School Website Accessibility Tips.
The quickest way to find out where your school website development stands is to run it through one of the free website accessibility checkers, like WebAIM. Type in your school’s URL (web address) and see if you get any errors on your home page. This just gets you started, since you have to check the items listed on each page manually, but it gives you an idea about where to begin. An example of a school website that is fully accessibility is Morristown School District. They selected a clean design, avoided non-compliant moving elements, and even included a form to help individuals with accessibility issues to get help. Get more tips on ADA website compliance or website accessibility requirements or get help with an accessibility audit.
#3 Clean, Bright Designs
Color choices and design trends do vary from year to year, but gone are the days of complex designs using a ton of drop shadows, textures, and background patterns. Flat design was a popular trend in 2016 and 2017, and we see things continuing down that path, although a few subtle effects (like a soft shadow, for example) will make appearances. An example of a clean, bright school website design is Synergy Public School. It also maintains its brand image on the mobile-friendly website view as well.
#4 Scrolling and Parallax
Thanks to popular social media platforms like Facebook, Twitter, and Pinterest, the adage of keeping important information “above the fold” is becoming less and less popular. Users have become accustomed to scrolling down, so it is no longer frowned upon in a school web design.
Parallax scrolling is where background images move slower than items in the foreground, creating an illusion of depth. They create an interesting way to add color and dimension to websites. This design element adds variety and interest without compromising page loads. An example of this style is on this visually attractive church/school website.
#5 Modular Design
Modular design is just what it sounds like—portraying information in different “modules” or boxes (think Netflix or Pinterest). While we don’t recommend designing your entire home page in a modular pattern, it does add interest to have sections of information laid out this way. A nice example is the USC Caruso Catholic Center (scroll half-way down the home page to see the modular area).
Using areas of modular or grid design, sometimes called cards or tiles, are also effective because of their flexibility. This is helpful when trying to optimize a website for various devices and to accommodate mobile-friendly versions of your school’s website.
#6 Fewer Stock Photos
People know a canned stock photo when they see one. We aren’t fooling anyone. If you are trying to portray what your school is like, it is better to hire a professional photographer and use actual students rather than images of fake classrooms and the same student models used everywhere else. With the high quality of digital cameras and even a smartphone camera, it is no longer difficult to get these great quality photos. For great tips and guidance on using photos effectively on your school website, visit our blog post on the topic.
Also, because Internet speeds have increased dramatically in the past few years, larger images can and are being used on some of the more beautiful school websites. This has drastically changed our website design options, and designers are taking advantage of that. You still need to keep a close eye on your load times, so be sure to optimize your photos and graphics to avoid search engine penalties and site visitors who won’t bother to wait for your page to load.
#7 Big & Bold Typography
Using big and bold typography is a great way to grab attention while being aesthetically pleasing to the eye. The bigger the font is, the easier it is to read. This doesn’t always mean using a super huge font size, but it’s about dedicating a clean space to the message you want to portray.
Also, now that responsive designs allow screen size reponses, we don’t have to worry so much about being limited to small text to make use of our screen real estate.
#8 Streamlined Navigation
With everyone accessing information on their phones, it is important to keep navigation streamlined and simple. It is overwhelming to present your site visitors with a super-long menu of choices on a tiny phone screen, and as attention spans become shorter, the faster a site visitor can find information, the better.
#9 CSS Animations and Transitions
Movement on websites isn’t a new idea, but in the past it was accomplished using javascript. Javascript is still incredibly powerful and a necessity on most websites. But, great leaps have been made in the functionality of CSS3 and what we can now do with animation and transitions.
#10 Gradient Imagery
Gradients are one way bold colors are being used, with duotone gradients being the most popular. A year or two ago, when flat color designs made the trendy list, gradients disappeared. Well, they are back and are used as backgrounds, image overlays, and subtle textures. What is different from old-school gradients is how they are being used. They might radiate from the center, include multiple colors, or be a bright pop of color using a single hue that fades to light or dark. Gradients add a level of depth and reality when done well. For a subtle example on a small rural school’s site, look at the background image gradient imagery of Superior USD.
What’s Important
When it is all said and done, the best school websites focus on the trends that provide real value. That means, does it help their site visitors achieve their goals? So, given that priority, spend your time and money on the things that will provide ease of use and positive branding, like:
- Responsive and mobile friendly sites to make it easy for your visitors to find the information they need quickly and intuitively
- Clean and intuitive layouts using colors, images, and content that proudly represent your school and make a great first (and second) impression
- Website accessibility that allows full access to everyone, regardless of disability, browser, or device used (This, unfortunately, excludes some cool features that are trendy but simply are not yet website accessible.)
Put your focus on your audience needs. They don’t come to a school website to be impressed with the latest jazzy technology. If some cool new trend doesn’t help them solve a problem or represent something your school has to offer, it might not be where you should focus your efforts. Put first things first by concentrating on meeting your audience and your school needs. For example, if you say your school offers the finest STEM curriculum in the state, your website will need to reflect that and shouldn’t look like you designed it in 2003. If your school promises to provide a nurturing, inclusive, and encouraging learning environment, let your website colors and content reflect that brand image.
Your school website is a critical part of your communications and school marketing strategies. If you ignore the importance of communications, customer service, and marketing to your targeted audience, you will pay the price later with low trust, declining enrollment, and a tarnished reputation. Your website strategy is definitely worth your effort. If you need some help, we happen to know a nice bunch of website and communications geeks who would be happy to help you out!
Melanie Guymon, Chief Operations Officer, School Webmasters, LLC.