Here at School Webmasters, we work for various school website providers. We are often hired to help schools that have switched vendors or are getting a redesign to migrate their old website onto a new design or platform. This is an often overlooked but critical role in designing an effective school website for several reasons:
- Moving over old content, images, and layout onto a new website is a bit like putting lipstick on a pig. You still end up with a pig! So, any problems, unintuitive navigation, bloated and outdated content, or poor-quality images are simply placed onto what you hope will be a better website. Nothing will have changed, but you will have paid good money for no benefits to your website visitors.
- Outdated information that is not removed sends the wrong message about your school and administrative leadership. It is not only a waste of time for your site visitors, which is disrespectful, but it will destroy their trust that your website will be a reliable and informative resource for them in the future.
- Bloated websites, which happen when content is continually added over the years but nothing is removed, make navigation impossible. Finding the specific information sought can be overwhelming as your site visitors get lost in a morass of accumulated and untimely information. Parents and other website visitors will quickly give up and click away from your school website, further eroding their trust in your school site as a resource.
So, what are the website design best practices for updating or redesigning your school website? What do we train our staff to incorporate into the school websites we design? Let’s dive right in!
Clean up your act!
This is the time to clean up that old content and take a good look at what parents need from your school’s website. Over the years, especially with multiple staff and administrators adding content to the school website, things can get quickly out of control.
Download your FREE website redesign checklists.
You know what they say about too many cooks in the kitchen ruining the broth? Well, that is true of websites as well. So, a redesign or a new website is the ideal time to streamline, strategize, and improve your website. Don’t rush it; don’t plan to do it later because later never arrives. Here’s how to take advantage of this opportunity:
- If you’ve had multiple departments adding content to your website, involve them in updating it. One of the easier ways to accomplish this is to have each department send in a list of the content that should remain and give them a date after which all other content will be deleted. Giving everyone a deadline assures that you have some help in streamlining content.
- Get input from the department heads who focus on your parent-facing services. This would include enrollment, recruitment, human resources, and marketing. They will be invaluable resources for what forms and information should be placed online for your parent’s benefit. Making all of these processes available online will improve enrollment and recruitment, make parents’ lives easier, and save your staff time.
- Use this opportunity to review forms, curriculum, and policies and remove outdated ones.
Be diligent in removing unnecessary content. A bloated site is not only difficult to navigate but also decreases site speed and is challenging to update, and getting to the information being sought becomes overwhelming for your target audience.
White space and its benefits
Part of creating a pleasing UI design (user interface or how your site visitors use your site) means an effective use of white space.
White space in website design best practices refers to areas of negative space. It is the portion of a page left unmarked or blank. It is the space between graphics, columns, images, text, and even margins. Even the space between each letter (called kerning) constitutes white space.
It is often not noticeable when handled well, but negatively impactful when overlooked. What are some of the benefits?
#1 Increases focus
White space in web design helps to remove distractions and helps readers focus on the text in front of them. It can even help them remember and understand the content they are reading.
White space is less distracting. Clutter on your web pages creates a distraction. Less distraction means visitor concentration is vastly improved.
Keeping your website visitors from becoming distracted means they are more likely to stay on your school’s website, and that benefits your school with improved branding, higher conversions, and better-informed parents.
#2 Adds balance
Effective use of white space, balanced with visual elements, gives your content room to breathe. It is part of web design best practices and helps to create a balanced interface that’s easy to read and doesn’t overwhelm your visitors.
Balance and symmetry on each web page of your site adds user appeal and ease of use. White space in web design creates a balance of negative and filled space, creating a pleasing harmony on your website.
#3 Adds beauty
Visual elements add beauty to your website. This includes placement of color, images, and blocks of text.
White space establishes the ideal proportion between design elements and empty spaces. Creating balance and visual hierarchy will produce an appealing design while improving user experience.
Web design that effectively fills space well and creates a visually organized layout makes your web pages look professional and inviting.
Symmetrical, consistent design elements
Experienced web designers will utilize web design best practices by applying consistent design elements across your website. Avoid changing page layouts from one web page to another; you will create ease of use for your site visitors.
Here are a few more valuable tips:
#1 Avoid home page clutter
One of the more challenging aspects of managing the design process is avoiding the notorious ‘cluttered Home page.’ Oftentimes, those submitting content want to put everything on the homepage.
This ends up looking messy and confusing and makes finding information nearly impossible. So, clean up that home page!
#2 Clean web page layout
At School Webmasters, implementing 21 years of school website design best practices, we encourage simple, clean layouts. Typically, that translates to a wide main section and slimmer sidebar section on most sub-web pages. It is visually appealing, provides consistent branding, and satisfies site visitor expectations when searching for specific content.
Web design can be confusing, but one thing that will keep it simple is to select a clean sub-page template (layout design) and apply a consistent color scheme for each page.
Remember that while you might look at your school’s website every day and it might seem a bit boring to you, your customers (parents and students) do NOT get bored with consistency and reliability. The layout makes it easy for your site visitors to quickly understand where to look for the information they seek.
Maintain consistent branding
Your brand is your school’s identity and expresses what you stand for.
Brand consistency ensures the identity you have created remains consistent across all channels. This would include your website, each web page, and your social media, marketing, print materials, and signage.
This consistency is important because it means when your customers see your brand, and when they have a positive association with it, they are more likely to feel trust and confidence in your messaging, your programs, and your services. Here are a few tips to create consistent branding:
#1 Create and ensure a consistent visual identity
Define your brand’s identity, which includes your school’s mission statement, school colors, mascot or logo, and any other frequently used visual elements.
We recommend a “branding bible” that you make available for your staff to refer to. This includes descriptions and formats for your logo and mascots, in various formats, and require that only those versions be utilized. It describes your school colors, including hex codes, as well as required font styles.
#2 Maintain a clear brand voice
Determine what brand voice resonates best with your target audience. This includes language, personality, and style. Consistently apply your brand voice in all written communications, which includes your website, social media, newsletters, and marketing.
Is your brand voice formal or informal? Is your focus on college-bound parents and students or vocational fields? You can’t get all things to all people, so pick a brand voice that your targeted audience would most likely relate to and go from there.
#3 Train and educate your staff
Now, train your staff on your school brand’s identity, target, and messaging. Teach them how to use the brand bible to keep your visual branding consistent. Give them examples of your brand voice in materials your school has previously published.
Make sure your guidelines are clear and there are plenty of examples to inspire your staff.
To learn more about branding and public relations, download our Crash Course in Public Relations for School ebook.
Website Navigation
Keep it simple!
We recommend limiting the number of top navigation links for intuitive searching purposes (we suggest 5-7). Then, under those main navigation landing pages, we categorize the sub-pages using logical association.
The next step is to create what we call our category navigation, sometimes in the sidebar, referencing the pages that each group would need to access. For example, we recommend pages for Parents, Students, Staff, and Community. The most commonly accessed pages we then link to from these category navigational pages. This keeps the navigation clean, concise, and intuitive.
Another valuable navigational tool is using a search bar at the top of every web page on your site. This is a must-have and part of today’s web design best practices. Your web visitors can quickly type in what they are seeking, and assuming your search feature is effective, a list of pages with those search terms will appear within the page. Within a few seconds, they can find what they are searching for. So, add a search bar and make it easy to access from every page (so put it in the header or footer)
Optimize your photos
Use good quality photos. Almost everyone has a great quality camera in their pocket at all times (their phone). A quality photo that is not pixelated really helps add to a web page. With that, sending in high-quality photos is key. Sometimes when photos are downloaded to email or uploaded to a customer service portal the user will choose to send a smaller photo. The higher quality, the better. A pixelated photo just looks bad and not professional.
It also helps to know how to take a photo for certain areas on your website.
We tell clients that when they need a great header photo, they should turn their phone sideways and take a few steps back before taking the picture. A landscape orientation versus portrait orientation is much better for header photos. Sidebar photos are great using portrait orientation.
Personalized photos are the best way to improve a school website. Use your own photos. Parents and students want to see the pictures of the students, facilities, fun activities, etc. Take photos of everything from kids playing during recess to eating lunch. Those really end up being some of our favorites. (Of course, get photo permissions from parents.)
Website design best practices also mean that your images are responsive. This means they will scale in size depending on the device upon which your website is viewed. You’ll want to be sure your photos will scale large enough to be viewable but not so large they are beyond their 100% size (or they will become pixelated).
Your website’s design is impacted by the quality and placement of your photos. They should add to the information on your site and support that content. They can also validate your content, especially when you use photos of your school, staff, and students whenever possible.
Make it accessible
Be sure you hire web designers who can ensure that your school website is accessible. Not only is this desirable so everyone can access the information your site provides, but it is also the law.
Accessibility features include ensuring that you have removed common barriers to those who are disabled. A few of these features include:
- Using the keyboard to navigate the website, also create keyboard accessible links;
- Eliminating color contrast issues;
- Providing alternative text for images; and
- Assuring that videos include captions; and
Another area we see regarding website design practices is how to post flyers or newsletters on your school website. Keep in mind that simple flyers are best. Sometimes, they contain so much information that they become troublesome when applying accessibility features.
What we recommend, or what we do for our clients when we are their virtual webmasters, is:
- Create simple newsletters that we remediate for accessibility and post them as a PDF;
- Take all the pertinent information on the newsletter and post that content on the appropriate location on site;
- Post news articles on the news page;
- Post any events on the calendar; and
- Link to this information from the home page for easy access, and parents can stay current.
This turns a highly inaccessible newsletter into great content for your site that is fully accessible and easily found.
Mobile-friendliness
A mobile-friendly school website means having a responsive design.
A mobile responsive website aims to create a website that will provide the optimal viewing experience for your site visitors, regardless of their device type. That would mean easy reading and navigation with minimum resizing, panning, and scrolling.
Potential customers, or those prospective parents using your website, will use many device types and sizes. The use of mobile devices increases every year. Your website’s design must reflect that usage, and that means being designed to be mobile friendly.
If you are looking at a website redesign, making it mobile friendly should be at the top of your list. You’ll do your website visitors a favor by developing a responsive site.
Search engine optimization
If your school is doing any marketing, including recruiting staff or attracting more students, you will want to make sure you optimize your website for search engines. The way parents, and all of us, find information online is to use search engines. So, your school must come up at the top of the list when they type information into the search bar.
Search engine optimization, referred to as SEO, is necessary for any school looking to improve student enrollment or attracting quality staff. It is part of web design best practices, so don’t ignore this important strategy.
Getting some help
All of this may seem a bit overwhelming but don’t become discouraged. If you don’t have the expertise on staff to manage all the various aspects of web design best practices, reach out to School Webmasters.
We are your one-stop-shop for website design and development, website management, responsive design, website accessibility, parent notification systems, and maintaining web design best practices.
Contact us anytime at 888.750.4556 or request a quote and Jim will get right back to you!