Web Design for

Districts & Schools

Best practices for modern website design and
development from the team at SchoolInfo
 Introduction
A website is a cornerstone of your digital communication strategy. Every organization needs a website. For districts and
schools, your website is how your community learns about the great things you are doing! This is especially important for
potential families and staff who are learning about you for the first time.

If you are feeling overwhelmed by the idea of a new website, we have you covered. This ebook contains a lot of information
about creating a new website. However, our team will manage your initial set-up and assist with any changes you may
choose to make a long the way.

At SchoolInfo, our vision is for every person in every school, no matter how big or small, to have convenient access to
secure, trustworthy, and accessible information and resources that ensures the success of students and the growth of
their community. To do that, we have created the tools everyone needs to make communication simple. Learn more about
creating a comprehensive digital communication strategy in our ebook, Digital Communication Strategies for Districts and
Schools: A guide to developing your communication strategy and tools from the team at SchoolInfo.
Designing Websites for Districts
and Schools
A good website design is not just the look of the site. It’s both usability and aesthetics, including good navigation, layout,
alignment, typography, color combinations, and many other things. Sounds like a lot, right? Don’t worry, at SchoolInfo we
will help you get there through our awesome website builder and content team, so you can focus on education.

Design Thinking
Before designing and digital products, we need to think about our audience first. Some important considerations include:

WHO WHAT HOW

Who is your target audience? What is the goal of your Now that we understand the
For schools, it’s your current site? Things like: sharing goal of your site, we think
parents, potential parents, and distributing information, about what elements should
students, and greater building a good impression, be included. Our website
community. encouraging potential builder has a section-based
enrollments, for example. infrastructure. Admin can
easily add sections that are
carefully tailored to a school’s
needs, and we will keep adding
new sections to continue to
make our product great!

Our website
builder sections
 Navigation
Without good navigation, your visitors can get frustrated and leave because they can’t find what they’re looking for. A
good navigation design provides good usability for your visitor and even encourages them to explore more information
on your site.

Our website builder has 3 common navigation layouts you can choose from: centered, left, and lowered. The navigation
bar has an animated hovering effect so your visitors will know what they’re clicking.

Navigation
positioned left

Navigation
positioned center

In the footer, our website builder auto generates a site map that consists of your subpages, all for visitors to smoothly
navigate themselves!

Website footer

Common Mistakes

Too many menu items in the navigation bar not only

looks bad, but also makes it harder to read. We
recommend 8 items or less. If you do have a lot of
subpages, work with our content team to organize
them into a drop down menu!

A long phrase for a menu item is unnecessary and

inefficient. Each item should be straight to the point,
preferably only 1 word. For example, use “PARENTS”
instead of “FOR PARENTS”. In the dropdown, you can
have more words.
Feeling overwhelmed? Keep it simple. Create an easy sitemap using a bulleted list, with no more than five or six key
headings. Then, add additional pages underneath the primary heading. Here is an example of what your site map may
look like for a district. The same general philosophy can be used for creating school sites.
 Layout
Using a good layout makes the site modern and attractive and the information more organized. There are thousands of
different website layouts out there. Don’t know what to choose? Here are some common layout types that we recommend.

Story Headline

A full-screen image/video right under your navigation bar,

that takes about 80% of the browser viewport! This is a
good option to catch your visitors’ eye by using awesome
pictures or videos to showcase how beautiful your school
is! In the website builder, choose the slideshow or video
section, like this example of Bulldog Middle School.

Columns

Use columns to keep your content organized, whether it’s

2 columns, 3 columns or a hybrid. On our website builder,
choose the “column” section and fill in each column with
different features. Our other sections, like content section,
also auto groups content and delivers beautiful columns.

Common mistake:
Single-column long paragraph is very hard to read because
each line of text is too long, and visitors can get lost and tired
from line to line. Besides columns, you can also center the text,
or add some pictures on the side to reduce the width of lines.
 Color
Color is the most exciting part of a website! It conveys emotional meanings and represents your school’s branding.
Besides black and white, we recommend 2 more colors, a theme color that represents your branding and an accent color
to add a little spice. Choose the colors to match your logo! For example, here, for Bulldog Middle School, we chose red as
the theme color, and turquoise as the accent color.

Color picker in theme setting Color overrider in section setting

Once you’ve picked your color in the theme settings, the rest is just magic! We auto-color your site with the colors you
pick, while you can always override these settings in each section, too.

Common mistake:
Although we all like it colorful, too much theme color makes your website visitors feel fatigued. We recommend your
theme color to take around 20-50% space on your site, and accent color to be less than 10%. The rest should be a
neutral color like white or light grey.
 Typography
Typography is another interesting topic in terms of website design. We understand there are so many options out there,
but keep in mind this one general rule: use san serif font families for paragraphs because they’re easier to read on a
digital product, and serif font families can be used as titles or headers to grab attention. On our website builder, we call
them “primary font” and “secondary font” that you can chose in theme setting, then everything should be auto generated
on your site.

To maximize consistency, you usually don’t need a third font. However, if you do feel the need, you can always override it
on each of the section’s editor.

Multimedia
With the popularization of technology, we’re now in this multimedia era where visualization is the key to success. Videos
are always better than pictures, and pictures are always better than words. Our website builder is full of sections that
encourage multimedia, and you should utilize this as much as you can. For example, upload profile pictures for your staff
and create an awesome-looking directory section!
 Accessibility
When creating websites, it is important to consider accessibility. While this is primarily important for individuals with
disabilities, it is also beneficial to those using mobile devices or those with slow network connections.
Your website should be built with the following in mind:

• Semantic HTML to improve accessibility and SEO - but don’t worry, we got you covered! Our website builder uses
standard HTML so that you have nothing to worry about. We also auto generate meta tags using your school name and
logo and there are no extra steps for you at all!

• Best practices that improve accessibility make your site more usable by everyone - for visually impaired users, the
browser can read the content out loud for them, but multimedia can’t be read. That’s why all image content should have
alt text. On our website builder, wherever there’s an image, we have a text box asking you to provide a description for the
image, which will be used as alt text. When you’re about to publish a new version of your site, our system will alert you
if there are images without alt texts, and you can add them in bulk and never miss this important step. Alt texts are not
required to publish on our website builder, but pleases make sure you can them, to be fully compliant.

• Legally in many places (including the United States) it is required for websites to be accessible - when you have a video
embedded on your site, make sure it has closed captions for hearing impaired users. If you have any concern, consult
with our content team, who are the experts for ADA policies!

Mobile Friendly
In the past 5 years, the percentage of mobile device website traffic increased
from 20% to 50%, which means half of people are visiting your website on
their smart phones! That is why any website today must be mobile friendly to
fit any size screen. The good news is our website builder does everything for
you. All the sections we mentioned above, are designed to be responsive. You
only need to set everything up once, then your site is instantly mobile-ready
with a classic mobile website design (for example, like the hamburger menu
that everyone loves).

Call to Action Buttons

Now that we’ve built a beautiful static site with cool info, what’s next? Keep in mind, one of our final goals is to encourage
interaction with our visitors, whether they’re exiting or current parents, students, or faculty. Use CTA buttons to encourage them
to click a link, call a number, or send an email.

Call Us Follow Us Email Us

 Final Thoughts
While website designing is always a fun thing to do for some, we understand educators have quite a bit more on their plate.
So, don’t feel overwhelmed by this task. Our website builder is very easy to use, but we also have an amazing content
team that is well-trained in design, if you don’t have time to do it yourself. In fact, if you prefer a more hands-off method
of website creation we will complete the entire process for your team!

Integrated Communication Platform

Remember, a website is just one piece of a unified communication platform. Effective communication is essential for any
educational communication. Unifying these tools is important for two primary reasons:

1. Keep your message consistent across platforms

2. Save time and reduce potential errors by communicating from a single platform

With SchoolInfo, you can access all major communication tools in one place.

Interested in learning more about our unified platform? Request a demo from SchoolInfo.