Hey there everyone, I love looking at lists of nice websites and realized that I never have written an article on that exact topic. So I decided to rate some High School websites since it’s a niche and perhaps could inspire some younger web designers. Do you think your high school’s website should be included on this list? Contact me and be sure to include a hyperlink!M
Trust me, finding website for this list wasn’t that easy… if you’ve looked at many high school websites you’ll know what I mean. They all seem to have been made in 1995, except the ones below (plus many more, I’m sure). Also, I notice many private school’s websites tend to be nicer since they are actually marketing the schools. I thought about excluding those websites but decided not to.
Red Lion Christian Academy

This School’s website shows a nice example of how to use navigational elements properly and I’m impressed they have a favicon. Don’t disregard the favicon! I love those things :] Anyways, they mix serif and sans-serif font typography which is a no no in my book, but the site still looks pretty sweet compared to the rest of the high school websites I’ve been looking at.
Cathedral High School – Indianapolis

The textures used on this high school’s website layout is what caught my eye. The navigation and shadows look great and the rotating images keep the site interesting.
Howe Military School

They used Georgia? Oh wow, this get’s put in my showcase… I love Georgia font if you can’t tell. Besides that, the website looks great and not to mention they are running on WordPress it looks like… I <3 wordpress.
DeMatha Catholic High School

Wow, this site is great looking. It’s got a more modern layout and the look-and-feel of the website flows when you actually get in and click around. They offer a search option, which many of these other sites do not. Search is good.
Albuquerque Academy

I love the background of this website. Maybe it’s just me, but any website with a nice scenic background, perhaps of the sky or mountains like this one… seems to create a nice calming feeling that makes me want to dive deeper into the website.
Adlai E. Steverson High School

This website has a nice jQuery slide show featured on the front page with captions. The background has nice gradients and the navigation is very user-friendly.
St. Andrews Episcopal School

Nice red color scheme with cool logo integration and professional look-and-feel. Very clear navigation probably makes it easy for parents and students to get to the information their looking for… and nice rollover effects make it that much more appealing.
Baltimore Lutheran School

This website’s nice Flash Accordion as the main emphasis of work well and the gradient background is a good subtle backdrop. The website is designed nicely and the navigational elements are in the expected places.
North High School | The Saxons

This site is built on a Joomla platform, and more power to them. Looks like they heavily customized the theme, I can see places where the layout needs some work… but overall it looks pretty cool. Props for using a jQuery slider.
Rancho Bernardo High School

Ok, I admit. I am a bit biased when I post this website, because indeed it isn’t the nicest site of the bunch… but this is the very first website I worked on as a student at RB. Back then it was a table-based layout and there was no Flash on the site. Now I can see they are using a Flash header, and to tell you the truth I’m not a fan. First, it takes too long to load and I’m just moving away from using Flash as a designer.
Mt. Carmel High School

Mount Carmel has a nice site and the color scheme suits their mascot, the sun devils. They have Flash elements, nice textured content background, decent looking footer, and a user friendly layout.
Morris Knolls High School

I included this website because I like it’s simple layout. Although not beautiful per say, it is a nice efficient layout and deserves it’s place among this list.
Hell Gate High School

This website has a nice color scheme and the header features a decent enough graphic of some mountains with trees and the school in the middle. Now, while it’s nothing to go nuts about… it’s subtle, efficient, positioned properly on the site.
Hawthorn Public Schools

The lesson of the day is: Joomla Site’s work for schools. As long as they are aware that they must keep on top of security updates and new releases. Joomla allows schools like Hawthorn and others in this showcase to create very attractive and accessible websites in less time than other solutions.
Olathe Northwest High School
Olathe proves that some high school can and do use Flash properly in their websites. Not to overuse it, but to incorporate it elegantly for it’s purpose into the website’s design. I like how you rollover the navigation on the left the images turn from black-and-white to color… I’ve always been a fan of that and for that they win points and a spot on this showcase.
Please note: I did not include school websites that use third party solutions.
High School Website Directory: http://highschoolhomepages.student.com/
Related posts:
- Google Unveils the Google Font Directory and API Google is looking to help all of us web and graphic designers out there who have been trying to break free of the CSS font-family limitations. How are they doing this? Today Google released the Google Font Directory and Google Font API in attempts to bring a selectable and dynamic font solution to the web. [...]...
- Facebook High School Friend Phishing Have you recently gotten a friend request on Facebook from someone who you have no idea who they are but they have like 100 of your high school classmates as friends also? Well, chances are this 'person' is actually only taking your friends personal information as well as yours (if you accept their friend request). [...]...
- Top-10 Websites to Go To for Web Design Inspiration As web designers, we often seek inspiration from what others have done before us. Not to leech too much off their design, but to inspire our work and get us started on the right path. Here I will share with you my top go to websites for beautiful website listings with great showcases and more. [...]...








I watched your video on dropdown menu. I enjoy it. Easy to follow. I have created it but what I want to do is make the menu automatically slide down when the mouse is over the button and then automatically go back up when the mouse is off the button. I was able to do that using MOUSE_OVER and MOUSE_OUT.. but my problem is, the drop down menu goes away as well when the mouse goes down the list because it is actually off the original button. How can I hold that drop down so the user can go threw the options?
Nancy Jones
10 Apr 10 at 3:19 pm