High 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
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
Website: http://materdei.org/
Public / Private: Private
Founded: 1950
2. Bellarmine College Preparatory – San Jose, California
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
Website: http://www.bcp.org/
Public / Private: Private
Students: Men
3. Saint Ignatius College Preparatory
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
Website: http://www.siprep.org/
Public / Private: Private
Students: Coed
4. Wesleyan School – Peachtree Corners, GA
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
Website: http://www.wesleyanschool.org
Public / Private: Private
Students: Coed
5. The Dunham School – Baton Rouge, LA
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
Website: http://www.dunhamschool.org/
Public / Private: Private
Students: Coed
6. Ballard High School – Louisville, Kentucky
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
Website: http://www.jefferson.k12.ky.us/schools/high/ballard/
Public / Private: Public
Students: Coed
7. BC High – Boston, Massachusetts
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
Website: http://www.bchigh.edu/
Public / Private: Private
Students: Men
8. Western Alamance High School – Elon, North Carolina
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
Website: http://www.abss.k12.nc.us/wah
Public / Private: Public
Students: Coed
9. Academic Magnet HS – North Charleston, SC
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
Website: http://amhs.ccsdschools.com/
Public / Private: Public
Students: Coed
10. Hillard Davidson High School – Hillard, Ohio
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
Website: http://hdv.hilliardschools.org/
Public / Private: Public
Students: Coed
11. Westfield High School – Westfield, Indiana
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
Website: http://whs.wws.k12.in.us/
Public / Private: Public
Students: Coed
12. New Hampton School – New Hampton, NH
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
Website: http://www.newhampton.org/default.aspx
Public / Private: Private
Students: Coed
13. De La Salle – New Orleans, LA
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
Website: http://www.delasallenola.com/
Public / Private: Private
Students: Coed
14. St. John Vianney High School – St. Louis, MO
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
Website: http://www.vianney.com/
Public / Private: Private
Students: Men
15. Dos Pueblos HS – Goleta, CA
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
Website: http://www.dphs.org/
Public / Private: Public
Students: Coed
What’s Coming Next?
In 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.
The post 15 Top High School Websites with Great Design and Functionality Updated – 2013 appeared first on WordImpress.