Building a Great School Website: The Homepage

“The Home page,” says Steve Krug in Don’t Make Me Think, “is the waterfront property of the Web: It’s the most desirable real estate, and there’s a very limited supply.  Everyone who has a stake in the site wants a promo or a link to their section on the home page…”  We often see school homepages with so much content that they scroll down four or five feet. 

A page with that much content does two things: (1) it gives a disorganized impression to visitors, and (2) it makes it impossible for a visitor to find what they are looking for. Paring down to the essentials, here is the short list of key content that should appear on your school’s home page:

1. A Great “Hero” Image:  A picture is worth a thousand words, and a carefully selected and well-produced banner image on your schools web page can instantly inform the visitor about your school community and culture.
2. The Calendar: Even though the calendar is in your navigation, it should appear  on your homepage too. It’s that important.
3. News Feed/Announcements: Visitors want to see regularly updated announcements about the most important things happening this week.
4. Parent Corner: Include a link to a page of helpful resources for parents. (See our profile of Drew Academy’s parent page here.)
5. Staff Corner: Add useful resources/links for staff. (Note: some of this information should be kept private in an intranet available only to logged-in users.)
6. Principal Image: It’s welcoming to have an image of your school’s leader, but please don’t include a lengthy letter or statement—that goes elsewhere.
7. Header Elements: It is helpful to include links to the district homepage, social media accounts, and logins for key applications in the top or “header” of your site.
8. Footer elements: People are accustomed to looking in the very bottom, or “footer,” of your site for address, contact, and “help” information.

Homepage content, like navigation, will vary from school to school, but the elements above are almost always necessary for a good school site.  Other content is usually best kept on sub-pages.

Here’s an example we especially like at Drew Charter School: 

Drew Charter School in Atlanta, GA. 

The homepage is clean and draws your eye immediately to the most important content. By limiting the content on the page to the essentials, Drew has made their website much more inviting and usable for parents, staff and visitors. 

This next school has opted for a highly visual, "brochure style" website with an arresting central image. Important information is found as the visitor scrolls down (sometimes referred to as "below the fold"). 

John Jay High School (Cross River, NY), "above the fold". 

John Jay High School, "below the fold".

John Jay High School has made great use of the "long scroll" approach to their homepage. This is a very modern approach to web design that works well for both desktop and mobile devices. 

In both examples, the design is clean and the number of elements is kept to a minimum to keep the visitor's focus on the important information. Not everything is stuffed into the homepage; these sites allow good navigation to do a lot of the work. 

Looking for more school website ideas? Check out our last blog on navigation. Next time, we'll explore some more of the "do's and don'ts" of school website design.