High School WebsitesHigh School websites are important for students, parents, staff and the community. Undeniably, a high school’s website is vital asset. High schools can use a website to communicate internal and external messages, news, events and help further drive fundraisers and sports programs – if utilized properly. As well, social media integration allows websites to provide additional forms of communication and interaction with their student body. In 2013, many high school websites are revamping their websites and utilizing these new technologies – but not enough as you can easily see.

Do a quick Google search for high schools in your area and you will see what I mean: the majority of the websites will be hard to navigate and equally as hard on the eyes.

Then and Now

Years back I did a post highlighting a few high school websites I thought had nice designs. To this day that post gets a lot of attention so I figured it’s time for part 2. Web design trends have changed a lot since my original post and in my search for nice high school web designs I found a number of updated and modern websites.

This year the top list is dominated by private schools. We are almost through 2013 and the majority of high school websites I reviewed were very outdated and non-engaging. I encourage high school nationwide and internationally, public or private, to start web design and development clubs. Encourage students to use WordPress – or any CMS for that matter – and study up on UI, design and development.

Part II of 15 High School Website with Nice Designs:

The following websites are not ‘ranked’ by their design and appear in no particular order*

1. Mater Dei High School – Santa Ana, California

Mater Dei High School Website

Website Design Review

This website features a nice main menu with icons that allow nice visual representation of each item. The main slider features various layers that provide a depth to the content and

School Information


2. Bellarmine College Preparatory – San Jose, California

Bellarmine College Prep Website

Website Design Review

This website features a nice blue layout with a logo that overlaps the header element. It has a number subtle drop-shadow and the homepage layout features a decent slider. The main navigation has a uber-like menu (uber is a plugin for WordPress) – meaning it has images and content rather than just plain menu items.

School Information


3. Saint Ignatius College Preparatory

Saint Ignatius College Preparatory website

Website Design Review

Textured patterns and subtle background images make this layout flow and appear nice visually. The main slider on the homepage features a collage of images that rotate every couple seconds. It would be better if the images main slider images faded rather than hard-flashed and the main navigation had actual text rather than images.

School Information


4. Wesleyan School – Peachtree Corners, GA

wesleyan-school-website

Website Design Review

Everyone loves a fullscreen slider! This site features a nice slider with high-quality images and a very unique sidebar fixed navigation element that uses AJAX to reveal additional pages/content. The content is designed in an engaging structure that’s complimented by well-spaced typography and unique image borders and widget style.

School Information


5. The Dunham School – Baton Rouge, LA

The Dunham School

Website Design Review

Nice overlays feature content on this website so it’s easy to view and clear to navigate. The background provides a nice color for the eye but not too much as to overstimulate. I would like to see the background image cover the entire width of the browser at higher resolutions, but other than that… it’s a nice website!

School Information


6. Ballard High School – Louisville, Kentucky

Ballard High School

Website Design Review

The Ballard High School is a nice example of a public high school that has taken some time to think about the design for their website. The technology in use on the website is a little old, but the execution is there. No Flash on the homepage and a decent dropdown menu.

School Information


7. BC High – Boston, Massachusetts

bchigh-website

Website Design Review

BC High website has a design featuring a nice homepage slider and a three-column bottom widget area. The functionality of this website is what really makes it shine. The header features links for Alumni and Parents – immediately allowing parents and past students to access areas of interest. I would recommend placing the phone number in the header for added convenience. As well, moving the social media links from the footer to the header would be a good idea. I applaud the school on having a wealth of updated school information and dates online as well as engaging students with social media.

School Information


8. Western Alamance High School – Elon, North Carolina

Western Alamance HS

Website Design Review

Soft grays with bold blues make up the colors of this well done public high school website. A centered logo fits well between two useful widgets above the main full-width navigation panel. The main slider features nice images from past and present. This website is very content heavy and also features updated information for parents and students.

School Information


9. Academic Magnet HS – North Charleston, SC

acadameic-magnet-hs-website

Website Design Review

Various green gradient backgrounds mesh well with the school badge and logo. The header image is encompassed by slight gradient lines, a nice touch. The main navigation is a classic top-bar with suckerfish-like dropdowns. After the header, the site content needs a bit of help but it provides students good information and the site is easy to navigate. Please, please, remove the hit counter. Other than that relic of 1999, the site looks nice for a public high school. I found this site while browsing top-rated public high schools in the USA.

School Information


10. Hillard Davidson High School – Hillard, Ohio

Hillard Davidson High School

Website Design Review

This website features a very clear layout with full-width logo and blue gradients. The logo design fits nicely with the page and the navigation is easy to use and contains description walker text. It’s no surprise this website is using WordPress – we love WordPress – and the customization of their theme is impressive. The content on the site is well constructed also with an easy to understand sitemap and relevant widgets in the sidebar. Schools looking to use WordPress as their platform should look at this website as good example.

School Information


11. Westfield High School – Westfield, Indiana

Westfield High School

Website Design Review

The branding between district and school websites is nearly flawless in Westfield. This website features a nice green pattern and main image fader. It’s not really a slider, it’s more original. I commend the designers and developers for their originality there. The site also has social icons in the footer – further engaging students, alumni and parents to connect.

School Information


12. New Hampton School – New Hampton, NH

New Hampton High School Website

Website Design Review

A full screen slider with main content overlay greet the visitor on the homepage of New Hampton School’s homepage. The footer navigation is very similar to the dock navigation on Apple’s iOS. The site logo is opaque and allows the various backgrounds to display through the text – an effect I like very much. Social media is integrated nicely into the site in the form of dock icons in the footer and fixed sidebar on interior pages. I would remove the website’s ability to move and close the content elements and add responsiveness to the site to support various devices. Other than that, this website showcases a great example for other high schools to follow.

School Information


13. De La Salle – New Orleans, LA

De La Salle High School Website

Website Design Review

When a website is designed and developed with the appropriate end user in mind it shows. Point and case: De La Salle High School. The homepage has everything a parent, alumni or staff member needs. What’s really cool too is they showcase Students of the Month on the homepage in a sidebar widget. How inspirational for students to see themselves on the front page! This website is also running WordPress – so major plus points there! Go De La Salle.

School Information


14. St. John Vianney High School – St. Louis, MO

St John Vianney High School

Website Design Review

St. John Vianney High School’s website has one of the more unique designs that we’ve seen. The color scheme is gold and black and elements display fold lines and angled shapes. Personally, I think they pull it off well. The slight opacity looks good also above the full screen homepage slider. The homepage has good information in the first two widgets, but the content lacks a bit in the main element. I would suggest simplifying the main menu so it’s not two levels – which is slightly awkward. Also, removing the web design company and proprietary CMS information in the footer would be a priority.

School Information


15. Dos Pueblos HS – Goleta, CA

Dos Pueblos High School

Website Design Review

This public school’s website features a nice full-width homepage slider and main menu with suckerfish dropdowns. The images appear to lazy load for faster load times and the layout is well-spaced visually. As you click into the interior pages you will notice a lot of navigation links take you off site, which is not good. I suggest bringing this content into the site more and they appear to have started to do this in sections. As you will see, the school has made an effort to embed some Google calendars. Overall the site is a good showing for a large public school.

School Information


Bonus Schools

Since writing this article a few additional high school websites have been shared with me that I believe are worthy of being on this post.

Grossmont High School – San Diego, CA

Grossmont High Website

Grossmont HS is displays that public schools can indeed have nice websites. This website has a nice design and neat fade effects. Do I spot some CSS3? Take it one step further Grossmost, build in responsiveness! Visit Grossmont High School’s website: http://grossmont.guhsd.net/

Do you think that your school’s website is worthy of this list? Share it in the comments below!

What’s Coming Next?

Learn of CodeIn a future post reviewing top high school website designs I would love to see more responsive websites. High school students use smart phones and tablets everyday, even more than computers. It’s important to engage students on the devices they use and a responsive website is a great way to do just that. Check out this great article: Public School Websites Don’t Have to Suck for more information on how a better public website can engage your students, parents and staff.

I hope you enjoyed this update to my original post from 2010! It was fun reviewing hundreds of high school website to select the top-15 above.

If you are a high school staff member, parent or student who believes your school should be included in the next post, please post in the comment section below! As well, if you have any questions, comments, or feedback then let your voice be heard in the comments below.

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

11 Responses to “15 Top High School Websites with Great Design and Functionality Updated – 2013”

  1. Leland

    Good Info. Working for a website development company, it’s great to see an article on school website design and functionality. Very few out there. Nice!

    Reply
  2. saraswathi

    Nice information.

    i like to share one think happy recently i brought the Nokia Lumia 520 in Ezeekart with 20% discount.Its amazing i love the way they make the client comfortable.

    http://www.ezeekart.com/p-30384/nokia-lumia-520-(yellow).html

    Reply
  3. saraswathi

    Great information.Keep going

    http://www.idlyvada.com/

    Reply
  4. Charlie Chiarelli

    Great sites, I will show them to my web design classes that I teach . Our schools site is entirely student created, certainly not in the class of these sites but you may be interested to see some neat ideas that grade 11 and 12 students are coming up with.

    http://sjbchiarelli.org/board/index.html

    Reply
  5. Travis Bower

    …every time you use ‘nice’, then you owe 10 push-ups, deal?

    Reply
  6. Cathy

    Great list of sites! Have you checked out Hutchison School’s site?

    Reply
  7. RJ

    How about St. Benedict’s Prep in Newark, NJ. – Has transformed their entire CMS over the last couple of year and now includes a full alumni directory (for alumni only), which includes job listings, etc., to go along with daily updates (full stories) from a former journalist. http://www.sbp.org
    I believe this site is just as good and even better for latest news than any site mention in your Top-15..

    Reply
  8. Shannon D.

    Check out the site for Grace Christian School in Anchorage, Alaska. The site is run using WordPress on the Genesis platform. http://gracechristianalaska.org/

    Reply
  9. Stacey Kramer

    http://www.kirksville.k12.mo.us
    Kirksville R-III School District in Kirksville, MO

    Reply
  10. Ifechinyere Onuoha

    Hello, I really love what I see. I am going to design an alumni website, please how do I go about it using WordPress?

    Reply

Leave a Reply