High School Athletic Website Design

High school web designs have changed from what was once a glorified bulletin board — where admins copied and pasted lunch menus and prom dates — to a crucial marketing tool for schools and districts. After all, the website is the first impression made on a prospective family and a window into your district's brand.

Nailing that first impression drives enrollment too — which of course, drives your budget. Nowadays half of parents are exercising school choice; they're more inclined to make real estate decisions factoring in neighboring districts than leave their child's education to chance.

In short, there's a lot at stake with your website. In the world of public schools, specifically, that doesn't just mean your district homepage. It also means the individual school sites for your elementary, middle, and high schools need to tell the unique story of the education and opportunities available. Public high schools, in particular, are stepping up to improve the way they market the content families care about, such as academics, athletics, and college counseling.

The following five high schools have been able to distance themselves from the competition with award-winning websites. While each of these websites is different, they all possess a few key design elements, including:

• A truly mobile-first design, one able to keep its potency on any device a visitor may use to access it.
• Purposeful content that communicates a school's brand and speaks to its target audience
• Creative navigation patterns which lead a visitor to the most vital information first and let the school communicate a high amount of valuable info without feeling cumbersome.

In addition to these design elements, great high school websites:

• Have their own unique branding identity
• Offer a similar or identical navigation experience to their district homepage and other schools within the district
• Are equipped with their own unique content

With the above in mind, here are five of the best high school sites:

5. Cary Grove High School

Cary Grove High School was one of five schools belonging to the Community High School District 155 in Crystal Lake, IL to take home for IAC award for best school website in 2019.

Their website is lean and concise, making it easy for prospective families to find what they're looking for in just a couple of clicks. By making use of sleek modules (such as Finalsite's Calendar Manager, Posts, and Feeds and rich infographics, they're able to catch a parent up to speed on their district and tell its story before navigating to any subpages.

Some of the best aspects of this site:

An embedded hero video showcases the highlights of the high school's campus, athletics, and day-to-day life:

The "Our School by the Numbers" infographic tells the high school's story in a way that's quick and digestible:

Regularly-updated social feeds capture a slice of life for curious parents and improve school to home communications:

An accessibility toolbar allows equal access to content for all users and provides a certification to the high school that reassures prospective and current families that accessibility and equity matter to them:

4. Booker T. Washington High School

Booker T. Washington High School is one of Tulsa Public School's nine high schools to take home gold from the MarCom awards. The website is an ideal balance between eye-catching content that shares the school's story as well as important content that families need to know.

Some of their most effective aspects:

A minimalist sticky navigation consisting of three key website pages allows a visitor to take action if and when a piece of the site piques their interest, all without bogging down the homepage:

The "explore our classroom" section uses a grid-style layout with imagery to draw in visitors to learn more:

Simple calls-to-action make it easy for website visitors to quickly find important content:

3. Burnsville High School

Burnsville High School (BHS), part of Burnsville-Eagan-Savage School District 191, is located just outside of Minneapolis, Minnesota. The district is made up of thirteen schools and a virtual academy, all of which have their own individual websites, yet together convey a visually-cohesive, unified district.

The high school's mascot, Sparky, and team name, Blaze, make for great wordplay throughout the website — and "ignites" inspiration for key messaging on the elementary and middle school sites, too, with headers like "Blaze Your Path" and "Spark Wonder."

Best features of the Burnsville High School's website:

BHS does a great job with the content on its interior pages — providing key information in easy-to-digest sections so that visitors can easily find what they are looking for.

The "Student-Run Clubs" page, a subsection of Student Activities, uses accordions to segment information about all 20+ clubs. Each drop-down also provides contact information for the club advisor with Finalsite Directories, which makes web updates easy; one need only make a change to name or contact info once in the database and BOOM! the page automatically updates.

Similar use of strong headings, directory integration, call-out boxes and tabs can be found on the "Welcome to 9th Grade!" page, which helps to ease the transition for students (or perhaps more importantly, parents!) into high school.

These and other detailed interior pages are easy to access from calls-to-action panels on the school homepage and call-out boxes throughout the site.

The high school's efficient use of space is evident, and the clean mega-navigation increases website accessibility and allows for an enjoyable user experience.

2. Divine Child High School

Let's take a moment to look beyond district websites and into the private school realm for inspiration. Divine Child High School received recognition in the form of a gold W3 award for its website, and it is well-deserved!

An embedded video greets website visitors and showcases the beautiful parish campus. The high school's excellent use of visuals means the text is minimal — keeping the homepage engaging and focused on selling the value of the school.

Like a public high school, Divine Child High School understands the importance of both marketing their school to prospective families, but also providing information that matters to current families. They do so by sharing a value proposition, recent news, the calendar, and calls-to-action to key pages on the homepage.

One notable component of their "news" section, in particular, is their use of branded graphics. This makes the homepage feel more cohesive.

Some features that make this site effective:

The admissions page is historically where schools fall into the trap of long bricks of text full of forms and PDFs which can be quick to lose a parent's interest. Divine Child mitigates this with a panel of clearly defined admissions steps, complete with appropriate links to additional content. For districts not worried about admissions, a similar layout would be helpful for re-enrollment or first-time families.

For most high schools, athletics are a huge part of the culture — and Divine Child High School recognizes and embraces this with an athletics page that engages and informs families and athletes. The athletics section of their website features athletics news, schedules, rosters, and scores (all managed via Finalsite's Athletics Manager) as well as videos and live tweets.

1. Spring Lake Park High School

Spring Lake Park High School's brand is all about its community and their site does a great job communicating this. They opted to have a site which visually focuses on individuals, using its people to draw in the viewer.

Here are a couple of key elements that Spring Lake Park High school uses to humanize their school:

The district is fairly active on Facebook which is used to its advantage in social and news feeds. These content streams are thematically consistent because they focus on members of the community while they keep the landing page fresh.

The use of community testimonial on a school site is not in and of itself groundbreaking, but few schools chose to make it the centerpiece of their designs. Rather than tucking away these stories into a subfolder, the school chose to display them on the front page in a way that is both visually appealing and compelling to prospective parents.

Key Takeaway

High schools (both public and private!) are tasked with the job of keeping current families informed while attracting prospective families. This delicate balance isn't always easy to achieve, but when done right, can lead to an award-winning design! Content management and social media integration are important to gain exposure to your high school, and having the most up-to-date information can enhance the user experience.

Wondering would it take for your school to make the list? Start with a Free Website Report Card today to see where your website can improve to better-sell the value of your district, too!

This blog has been rewritten from its original publish date in 2019.

---

ABOUT THE AUTHOR

As Finalsite's client marketing specialist, Leah promotes new school websites and content marketing examples from schools around the world. She's also writer and editor of numerous blog articles and eBooks on best practices for digital marketing, social media, and school web design. Leah found her passion for international education at Arcadia University, where she earned her BA in Global Communications and studied abroad in England, Greece, Vietnam and Australia. When she's not exploring new places, she's either blogging, doodling, or dreaming about it.

High School Athletic Website Design

Source: https://www.finalsite.com/blog/p/~board/b/post/best-high-school-websites

Posted by: parksmaland.blogspot.com

Share this post