monitor with Go, Bulldogs to represent school website

Six steps to a professional school website

There’s a young family moving into your part of the state. While choosing which neighborhood to settle into, they research one of the most important factors in their decision: the school district. How will they conduct their research? A primary way will be visiting school websites.

With the options afforded by school choice, your district must consider how it is positioning itself as an educational leader. You have an important service to offer. If you want parents to choose your school, you must evaluate the effectiveness of your image and message, including your online presence. Your website is the core of your school marketing.

Many schools are unprepared for this culture of choice. Simply having a website is not enough—sites that look outdated or haphazard don’t inspire confidence. If a parent visiting your site doesn’t get the impression that you value excellence and are current in technology, they may wonder if you can meet the needs of today’s students. If your message doesn’t resonate, they have the option of sending their children elsewhere.

Since we are educators, consider this article a crash course in web design. Your first assignment: take a benchmark assessment. Check your current website against the rubric below. Then take the course—and do your homework!

wi-school-news-icons-300x300-01

Lesson 1: Determine your rhetorical situation

Every type of communication has a rhetorical situation: audience, purpose, and context. Good design is built on a thorough analysis of these fundamentals.

Audience

Who visits your site? Your list might include parents, grandparents, community members, students, staff, organization leaders, potential new student families.

Purpose

Purpose is closely related to audience. Your purpose may include conveying information (e.g., lunch menu), connecting people with other people and programs (staff email addresses), and appealing to potential new student families (list of Advanced Placement classes).

Context

How will users connect with your website? Will the majority be on PCs or smartphones? Knowing the answer will affect your layout and design choices.

wi-school-news-icons-300x300-02

Lesson 2: Determine your content.

Once you’ve analyzed your rhetorical situation, plan the content for your site. Determine what information the different groups are seeking. For example:

  • Parents: School calendar, lunch menu, staff contact information, etc.
  • Community members: How to request space in the facility, how to connect with the parent/teacher organization, why we are going to referendum.
  • What do potential new student families want to know? What does the staff need from the site? Students?

When gathering this information, don’t merely guess or assume. Talk to your audience. Know what they come to your website for and how frequently.

wi-school-news-icons-300x300-03

Lesson 3: Organize your content.

School websites have massive amounts of content. The structure of your site should lead the different segments of your audience on a pleasant, logical (to them) journey.

A practical way to lay the foundation for site navigation is card sorting: Write content topics on index cards and ask various users to organize them in a way that makes sense. Working with actual site users will make the final product more user-friendly—and you will be enlightened by the differences in logic you observe. Accommodating these differences demonstrates you practice what you preach regarding differentiation.

Create a visual representation of your information architecture (a site map). This is a great tool for collaboration. It also enables you to see how many clicks it takes to get to any information on your site. To create this structure, you can use free online wireframe software, a large whiteboard with plenty of colored markers, or index cards and an empty wall or floor.

When creating the navigation for your site, consider these tips for better user experience:

  • Limit the categories in your navigation bar to seven or fewer. More than that is overwhelming.
  • Organize content so users do not have to click more than four times to get the information they need.
  • Create a quick-links section for information that is sought most frequently.

wi-school-news-icons-300x300-04

Lesson 4: Design your site.

Finally, we are getting to the actual design in this web design class!

First impressions matter—website users make snap judgments on whether your site is worth their time or not (you’ve made those kinds of decisions yourself). You don’t want to irritate or frustrate your users. This is why the home page design is core to your site’s effectiveness. Colors, typography, images, white space, and content must all work together to create a page that’s appealing, welcoming, and informative.

Decide the color palette, layout, typography, and images for the entire site. Create a style guide that has all this information. Include the specific site colors; the typography styles for headings, subheadings, paragraphs, and links; and specific logo and mascot images to use and how to access them. Many schools have different people in charge of various sections of the website. A style guide ensures that the team maintains consistency across the site—an important aspect in looking professional and building trust with your visitors.

Design cannot work effectively apart from content. Keep readability and usability in mind when making decisions. For example, if you have a lot of content on a page, break it up with subheadings, lists, and white space so users can scan for the information they’re seeking. Keep PDFs to a minimum—or make them accessible for all users. Left justify large amounts of text —centered text is hard to read (don’t frustrate your visitors).

Consider the context of your website—how users will interact with it. Let’s say a mother is going school supply shopping. Is she able to find the supply list without navigating a series of dropdown menus on her smartphone? Can she access the supply list online without having to download it? Is your site mobile friendly, or does she have to enlarge the screen and swipe to see the entire list?

See the rubric for more details on the finer points of website design.

wi-school-news-icons-300x300-05

Lesson 5: Test your site.

Make sure your site displays correctly on all browsers and on all screen sizes. Test all the links.

Check your site for readability, accessibility, and color contrast. See the Resources sidebar for more information.

Conduct an informal usability study. Select members of your audience groups and give them tasks, such as, “Find out when the next school board meeting is scheduled.” Then take note of the process they go through to find that information. Have them speak what they’re thinking—you will gather valuable information on how users navigate your site.

wi-school-news-icons-300x300-06

Lesson 6: Maintain your site.

Congratulations on your website makeover! But the work is not finished—the site needs to be maintained and updated.

If you are dividing these responsibilities among team members, invariably something will be forgotten (and you know what they say about too many cooks). Designate one person to be in charge of the website. The site go-to person can manage all the details, maintain the style guide, and do behind-the-scenes maintenance. This leader can also provide training and support for other website editors, such as teachers who want to update their classroom pages and administrative staff responsible for various sections.

Now take another assessment of your site and be proud of the improvements you’ve made. Who doesn’t love a good makeover?!

Keeping your website effective, functional and accessible is an ongoing process. While the work continues, keep that young family in mind—you want them to visit your site and be confident that yours is the school district for their children.

website-rubric