How to Build a Powerful College Website

Picture this: a high school junior is in an office with an academic advisor. They’re not sure where to apply to school; they know the big public institutions around them, but they don’t know all the options available. The advisor mentions a few with good programs in areas the student is interested in.

As soon as the student walks out of that office, they’re on their phone looking up the college website.

A college website is the single most important piece of marketing the college has, beyond TV commercials or speaking at high schools. The next step for any of those tactics, and the first step for most college searchers, is the college’s website.

Table of Contents

• History – How Far We’ve Come
• The State of the College Website
• Creating a Plan
• Content Architecture and Development
• Web Design
• Web Development
• Managing a College Website Post-Launch

History — How Far We’ve Come

The concept of higher education itself is long and storied — in the US alone, the schools of colonial times would be near-unrecognizable from the research-driven, economy-driving institutions of today.

The web’s heritage is much shorter, but with the rate of innovation driven by new technologies and increasingly creative uses for existing technology, it has plenty of history of its own.

Higher ed institutions were some of the first adopters of the World Wide Web (W3, as it was referred to). It’s no surprise to see Stanford, Ohio State, and the University of Birmingham leading the way in the early 1990s with the first college websites.

Of course, when we look at some of these early adopters of a modern technology, some of the looks are…well, less than modern.

This is the digital presence of the illustrious Stanford University in 1996. We’re not quite sure where the handwritten-style Eaglefeather Bold version of the logo came from but hey, it’s unique!

Here at the turn of the century, we see Ohio State on the front lines of a new trend toward condensing navigation into one spot, to focus on visuals with the rest of the screen real estate. The website even includes updated news and events – a signal of more than just a static site.

Since we’re headquartered in Gainesville, we couldn’t help but check out what the University of Florida used to look like. UF celebrated 150 years with this…gem, in 2003.

In 2008, the University of Texas gives us an example of design and structure moving closer to what we might call modern style for that time. Somewhat clear sections, and move to better organize information through both top and sidebar navigations.

Harvard, which lays claim to the title of the oldest institution of higher education in the United States, boasted this website in 2009, including a large background image of its well-known seal. It may be interesting to note that one of its most well-known dropouts, Mark Zuckerberg, had already landed on a homepage similar to what Facebook still uses today.

All this to say, college websites have come a long way. A long, long way.

Now that we’ve seen some not-so-modern designs in college websites, how do today’s universities stack up? Well, turns out it’s sort of a mixed bag.

The State of the College Website

It may come as a surprise to know that higher ed overall isn’t quite as up-to-date as the modern web demands. Some gorgeous, well-organized websites just pull you in to want more. Some, not so much.

A far cry from the ‘96 version, today’s stanford.edu is clear and inviting. The navigation is simple and clear, the scroll CTA at the bottom “Explore Stanford” is great, the whole thing makes the user want to see themselves at Stanford.

Somewhat lower on Nebraska’s homepage is this somewhat underwhelming content area. While the content is clear and navigational, it’s anything but exciting. The photography has a classic stock style, and the colors seem bland.

As an Ohio State alum, the college’s web presence consistently disappoints me. A whole lot of content is in a very small space, what little photography there is comes across as uninspiring, and headline copy is very bland.

OSU did confront us with a popup asking to complete a survey to help us understand how to create a better website experience. So here’s hoping a better experience is coming!

The Florida Gateway College website is that of a small school with a big digital presence. It doesn’t let its size hold it back. The website is big and bold, warm and inviting, and very clear.

Harvard, on the other hand, is a big name and a prestigious institution that certainly doesn’t look the part.

Overall, higher education is spread across the board when it comes to websites. What that means, then, is that there’s a huge opportunity to stand out and be a light in the college website space.

Here’s how.

Creating a Plan

A little planning goes a long, long way.

Any successful website is built around a plan, way before there’s even a single discussion about design or features.

One of the biggest sins we consistently see in higher ed is an overgrown website.

We wrote about this when we wrote about how we create a sitemap for a new website, but it bears repeating here:

Often, different departments each want to add pages for different subcategories of content that they think merit their own home. That, and everybody wants to be on the homepage.

The result is the shell of a once beautifully-planned structure that’s been bogged down by more and more content placed in the wrong spots by people with entirely good intentions.

Sound familiar?

It’s not a problem that’s specific to colleges. As any organization grows, as new initiatives are launched, as new services are added, websites can get out of hand.

It’s easy to let this happen at larger organizations, where different departments create too many hands in the pot, without a plan to guide them. For that reason, colleges are common offenders.

So what does that plan look like, and how do we put it together?

Identify Your User Groups

User groups are similar to buyer personas. They’re the people who you expect to use the website, the people who currently do, and the people you want to.

They’re distinct from buyer personas in that they tend to have more diverse goals. Whereas buyer personas have distinct needs all served by your product, user groups interact with your brand in a variety of ways.

For a college website, these might include:

• Prospective students
• Influencers of prospective students (their parents)
• Current students
• High school advisors
• Faculty and staff
• Community members
• Patients
• The press

That’s a short, general list, you may make yours much more detailed.

Once you’ve identified your user groups, identify your 3-4 most important ones. “Most important” may be tied to your college’s strategic goals. Then, brainstorm, research, consult, and record answers to these two questions for each group:

1. What are their goals?
2. What are your goals for them?

Their goals are specific content that they need to be served with. Prospective students may need to find a list of programs and study abroad opportunities. Current students may look for class scheduling and a sample four-year plan. The press is looking for statistics, statements, news, and contact information.

Your goals will again be tied to something higher, such as a strategic plan. But it will also be closely tied with the user group’s goals. After all, no matter what, a primary focus will always be serving users with the content they want in the format they want it.

Why Audience Is the Most Important Element of Your Story

Knowing your audience is key to good a good story. Recognize that your audience is made up of individuals, and begin to strengthen your brand.

Run a Focus Group

If your institution is in the mindset of continuous growth and improvement, you no doubt have substantial evaluations baked into every initiative, every class, every instructor, and more. Your college website should be no different.

It’s possible to put together a good plan by simply thinking about how website users think – but unless you go directly to the source, you’ll never be certain. The worst thing you can do is build an entire, multi-faceted digital experience around a bad assumption.

Focus groups are great ways to test hypotheses, challenge assumptions, and gather open-ended data straight from the source. Ask how people use the current site, what content they need, what’s important to them, and how the site is failing to meet their needs. Gather a lot of data, and use that to modify your plan.

Content Architecture and Development

Once user groups are defined and fleshed out, the next step is to plan the content. Remember, the goal of defining user groups is to define how to best serve them – that means content. A gorgeous college website without an easy-to-find list of programs is useless.

Have a Clear Organization

Think about the way we speak about a website project. Typically, we say we’re building a website. The building process, when we talk about something physical, typically involves gathering a list of wants and needs, putting together a blueprint, creating mockups, and only then touching a single tool.

Websites work the same way. Crafting a sitemap is the website equivalent of a blueprint. It defines how everything is laid out and organized.

At its most basic level, a sitemap looks like this:

Not the most glamourous chart in the world, but it’s a blueprint.

At a high-level, the steps to creating a sitemap that organizes content well and serves users are:

• Map out existing content.
• Match existing content to user goals.
• Notate user goals that aren’t served by current content, or that are buried deep within the website.
• Get to work organizing.

We typically have four or more different directions on how to organize content before we decide on one. Getting feedback and perfecting organization at this stage is important because it lays the blueprint for everything to come.

What’s the most important content?

As part of the content architecture, denote particularly important pieces of content. Lists of programs, the application process, how to schedule a tour, and more might make this list.

How We Create a Sitemap For A New Website

Creating a sitemap involves up-front planning, strategy, and insight into the user’s mind. Here’s how we go about creating a sitemap for a new website.

Define a Messaging Strategy

One question we always ask clients is if they have a defined messaging strategy in place.

You should.

As the college’s brand grows, both in its usage in a new digital environment and in the minds of its audience, it is essential that everything speaks with one voice. A consistent and coherent brand delivers a strong, clear message at every touchpoint.

We always want to know if there are any external campaigns the website’s messaging needs to tie into – recruiting, fundraising, research, or marketing on anything else.

If an institution doesn’t already have a messaging strategy, we help create one. This is another opportunity to use focus groups and various other means of research. In the end, a complete messaging strategy includes:

• What the school does, how it does it, and why
• A brief definition of who the brand is
• The brand rationale
• The brand promise
• Writing goals and principles
• Voice and tone
• Headline tone
• Shared messaging
• Detailed grammar and mechanics

Consider Content Format

One of the most engaging forms of content today is video. The possibilities are endless – from recruiting, to informational, to welcome videos, to just a video tour of a dorm room.

Consider how alternative formats may better suit specific content.

Find Some Fast Facts

Students have a lot of options when applying for colleges – I mean a lot. What is your school doing to stand out?

Make the uniqueness of your institution immediately clear, and put it in metrics. Colleges that can grab attention with easy-to-understand differentiators stand out in the crowd.

Use Social Proof

Your TV commercials do it, why should your college website be any different?

Tell the stories of your students, your faculty, and community members. Gather powerful experiences and feature them!

Web Design

The plan is set. The blueprint is set. Now comes the fun part – design.

Design gets all the glory, and for good reason. I don’t need to tell you the value of design – how it impacts how people feel, where they look, how they consume information.

Every single college, university, or other higher education institution has a distinct brand, and no two websites will ever be alike. For that reason, instead of diving into creating an on-brand website, here are five big points of consideration in the design phase.

Declutter, Declutter, Declutter

As we talked about before, an overgrown website becomes a huge issue when users are trying to scroll through. That applies to design as much as it does to content architecture.

White space provides direction and gives the user something to focus on.

Ah, sweet clarity.

Choose High-Quality Photography

Photography is one of the most common ways to “show them, don’t tell them.” Photography can say anything you want to, much more powerfully than words. It can say professionalism, lifestyle, celebration, innovation, and more. The trick is defining what it should say.

Particularly with the generation coming into college now, they want to be able to picture themselves at the college. High-quality photography is no longer optional – nothing drives a student off of a site like low-res, poorly cropped, or otherwise low-quality photography.

Keep Navigation in Mind

A college website, no matter the size, has a lot of content. With such a diverse set of users and so much important information for each of them, making that information accessible is crucial.

This goes beyond just organizing content well. It has to be easy for users to find and get to.

No, that does not mean stuff all 600 pages in the navigation. Rather, use consistent visual cues in several forms – main navigation, potentially a second navigation bar, sidebar, footer, any even more in-page navigational elements on important pages.

In this example from Florida Gateway College, you see masthead navigation, quick links, search, main navigation, expandable side navigation, sidebar CTAs, three top box CTAs, footer links, and three footer CTAs… all without being overwhelming.

Focus on Mobile

Remember our high school junior from earlier, who started looking up colleges on her phone?

The ones that don’t offer a good mobile experience frustrate her, and she leaves within seconds. The ones who are easy to use on that phone stay in consideration.

That’s how users in just about any group use the web, and with the generation researching colleges today and in the next decade, that’s not going anywhere.

Accessibility

The more accessible your website is to users, the more people will understand you more easily. Web accessibility isn’t about disability, it’s about universality.

There are four principles of web accessibility. A website must be:

• Perceivable
• Operable
• Understandable
• Robust

Besides being a good idea overall, web accessibility can get legal for educational institutions. For that reason, there are a few design consideration that help make a website usable by all users:

• High enough contrast level between text and its background (4.5:1 if you’re curious).
• Minimum standard text sizes.
• Help users avoid and correct mistakes, especially in interactive elements such a forms.

Much of accessibility is also on the technical and development side. We’ve written a more detailed guide to web accessibility here.

Web Accessibility: The 4 Principles of Inclusive Design

Web accessibility is about making the web a technology that can be used by as many people as possible. It’s about universality.

Web Development

In all likelihood, a college undergoing a major website overhaul isn’t doing it themselves. They’re likely using a web design agency as the team of experts.

That said, it’s important to have a basic understanding of what – and why – the team developing the website is doing.

Search Engine Optimization

Search engine optimization, or SEO, is the process of optimizing a website to rank well in searches, primarily in Google.

There are way too many pieces of the SEO puzzle to go into here, but there are three big ones to ensure that a site is set up for success.

Redirects

When the new website officially goes live, it’s likely that URLs will change. The Visit Campus page might change from /futurestudents/admissions/visitcampus to /discover/visit, for example.

As a college, it’s likely that other websites are linking to your page. If a third-party website is talking about how to visit your college, and they link to the Visit Campus page, when the new site goes live, that link will be dead because it will no longer exist. That’s a very poor user experience, and a signal to search engines that the new site may not be trustworthy.

Enter redirects. Redirects can be set up so that if a user lands on (or is linked to) the old URL, they are automatically redirected to the new URL. Most of the time, the user won’t even realize anything changed.

Planning for and setting up redirects is a critical part of launch success.

Title Tags and Meta Descriptions

When you search something in Google, you get three main parts of any search result: the blue link, the green URL, and the grey description.

You likely see these daily and don’t give them a second thought. But you also likely see less professional versions:

Which one stands out to you more? Which do you want to click on?

Setting these elements (title tags and meta descriptions) help users understand what each page on the website is about, and help search engines do the same. Plus, your brand needs a level of professionalism demonstrated in well-crafted language here.

Image Descriptions

Image descriptions, or alt tags, provide a text alternative for an image file. Google is smart, but it can’t entirely read images yet. Alt tags give it a description of what the image is, which leads to a better understanding of what the page is about.

In addition, if an image doesn’t load for a user – possibly because the user has a poor internet connection, the alt tag displays instead, so they can still get some of the meaning even without the image.

Responsiveness

Even after designing with mobile in mind – or even mobile-first – there’s a lot that goes into making a website look and function great on screens from 2” to 60” wide. From how menus work to how tables are treated, everything needs to be thought through and tested for mobile.

Accessibility

A large part of accessibility is technical. Image alt tags are a great example of this. They’re not something that comes up in content or in design, but they need to be implemented in the development phase.

Other accessibility measures include making all functionality available from a keyboard, giving users enough time to view content on scrolling features, and cross-browser compatibility.

Managing a College Website Post-Launch

When the testing is done, the optimization is complete, and the website is live, there’s still work to be done. Specifically, the administrators who will be using the site need to know how to manage it.

As we’ve noted several times, the worst thing a college can do to its own website is let it get overgrown.

Two main ways to combat this are:

1. A clear structure of who you allow to do what on the website, including robust user management.
2. Educating administrators on how to best use the website.

Management includes how (and how not to) use headlines, how to use the college’s messaging strategy, and modern web management practices. Be sure to train on any approval process you set up for managing the new website.

A website is the most powerful marketing, branding, and information tool a college has. With careful planning, a thought-through process, and a good understanding of users and modern web practices, an effective college website can be built. However, if you need guidance with creating and executing a plan, PHOS offers an array of web design services to make the college website you want a reality.