Understanding Content-First Web Design for Higher Education
When most colleges and universities think about redesigning their website, they picture a new layout and graphics, what their logo will look like, and how they’ll incorporate the latest features and functionalities. They envision a visually captivating experience that will grab prospective students’ attention and elevate their brand.
What doesn’t get discussed—or may be glossed over at best—during these early planning stages is content. What will your website say? What will it express to your target and tertiary users?
Up until the past few years, website design has placed visuals at the forefront. Content was relegated to particular blocks on the page, limited oftentimes by word count, and intended to fit in and around the layout and graphics.
But that’s starting to change. Content-first or content-driven website design acknowledges the fluid relationship that copywriting and layout have. While the design frames and presents the written message in a way that connects with the user, words, taglines, and their significance add substance and a clear purpose to the visuals. Collectively, these elements guide the user along their journey, piquing attention from the home page and allowing them to easily navigate to what they need and learn more about what they’re seeking.
For prospective students exploring a college or university, this path entails discovering the institution’s mission from the home page then establishing clear routes toward information about degree programs, departments, campus culture, the application process, and experiential opportunities.
What’s the role of content in website design?
What is your school’s brand? Why would a student want to attend? Although a picture can say a thousand words, words themselves provide context in the form of additional information or an answer to a question.
Every time a user enters a query into a search bar, browses the results, then clicks on one, they’re on a quest. Their goal may simply be exploratory in the early stages, but for higher education, a prospective student may be comparing different degree programs before committing to filling out an application. Visuals and user experience may offer guidance and spark interest, but content—words and other forms like video—delivers the answers.
In terms of website design, if your content doesn’t provide what the user is seeking—whether it’s an answer or substance—they’ll turn back around and look for something that does.
Supplementing this, content is your brand. Now, you may picture a logo or tagline accompanying images, but your story and message will end up stunted, if not fully obfuscated, if the content is minimal. If a user can’t scan your website’s words and images and get a general impression of who your school is, the content isn’t doing its job.
As a goal, strive to educate and inform your user, and provide them with the information—accompanied by a clear pathway through design—to make a decision.
How content and website design intertwine
Anyone who’s taken a creative writing class knows the phrase, “Show, don’t tell.” It’s meant to steer you away from empty adjectives and vague statements: you should describe why something is “good” or “excellent” instead of throwing on this meaningless descriptor.
Yet, beyond the classroom, “Show, don’t tell” is a tenet of content-first web design, emphasizing the way words and presentation shape the user experience together.
The reality is, no matter how well your words flow, no matter how creative your sentences are, a wall of content isn’t appealing when a prospective student clicks on a link and lands on your page. It feels like a sudden and rapid bombardment of information with neither structure nor organization to guide the eye. Unlike with print, the user won’t stop and read. Instead, they’ll click back before exploring anything on your site and continue their search elsewhere.
While aiming to educate and deliver what prospective students would like should be high on your list of priorities, presentation matters. Studies have shown that users can make a judgement about a website in half a second and spend 5.59 seconds scanning content to look for what they need, be it pertinent information or where to go. Considering this, the combination of design and content needs to engage and inform from the start, be easy to process and understand, and direct the user based on what they may be searching for.
Framing and allowing words to emerge are aspects like color, screen resolution, typography, photo and image placement, white space, accessibility, navigation, and the arrangement of elements on the page. This relationship helps communicate your message succinctly, parses the information into scannable sections, helps create a connection with the user, and assists them with finding what they need.
Yet, design can also undermine a message and experience. Users become overwhelmed with the amount of elements present, can’t find what they’re seeking, get frustrated because features don’t work, or browse through pages with next-to-no information.
Considering these factors, content shouldn’t be treated like an afterthought, nor should the role of design be played down in projecting a message. Rather, their interaction should be prioritized early on in any redesign project, ideally from page structuring and wireframing stages, with messaging, location, and user habits addressed.
SEO through content and website design
All marketing and website professionals have heard of SEO at this point, but implementation tends to be uneven.
SEO’s integration emerges through the architecture and content. Restructuring presents an opportunity to eliminate duplicate and low-quality content, address practices contributing to their occurrence, and increase your visibility in organic search. For colleges and universities, 67% of all prospective students conduct most of their research through search engines, and we can safely assume this percentage has grown in the past year due to the pandemic. Downplaying SEO ultimately results in fewer eyes viewing your website.
At the same time, de-emphasizing content simultaneously undermines SEO. Fewer opportunities for adding quality copy and header tags minimize areas for incorporating keywords and providing information on par with your competitors.
When considering where content, design, and development intersect, SEO needs to have room to influence all three. Design should provide the space for creating authoritative, commanding copy that lets your brand and message emerge in the process. Development, meanwhile, shouldn’t turn a blind eye to technical SEO standards, no matter how engaging a website seems. These approaches help combat duplicate content and low-text-to-HTML ratios, resulting in a design that balances user experience with search engine best practices. Furthermore, this method allows both content and design to seamlessly work together rather than having to retrofit wording into the visuals later in the project.
Lastly, content must be optimized for search engine visibility, incorporating keywords into certain areas of a page and utilizing elements such as header text, links, and back-end metadata. Learn more about how to write your website content with SEO in mind here.
How to develop a content-first website
Website redesign will draw in multiple departments and professionals. Designers and developers will focus on the appearance and functionality, copywriters will define the brand’s story, and an SEO team will ensure that all aspects reflect search engine best practices. Through this process, all departments should collaborate to discuss the overlap among these facets.
Plan the sitemap and navigation
A sitemap is the outline of the website—and an opportunity to not only identify and consolidate content but plan where all pages should go in relation to the user journey and how the search engine will crawl the site. This structure determines how all content should fit together, both in terms of grouping and accessibility. From here, a defined architecture plays a factor in delivering your message: as already mentioned, you don’t want to deliver too much up front nor so little the prospective student feels unfulfilled or confused.
Between these two aspects, the sitemap.xml file lists the site’s full architecture. For a college or university, that’s your home page through department, degree, and campus life resources. This skeleton helps you pinpoint potential redundancies and create content groupings that will influence the wording, message, and information presented on each page as well as the design templates used across the site.
The top navigation, meanwhile, pulls from but won’t include the full sitemap. Just as with content, offering too many options leads to cluttered presentation and may irritate the user. Providing a snapshot of your sitemap, the navigation needs to answer, “Where do I want to go from here?” and lay out a defined path for doing just that. Specifically for colleges and universities, consider what your prospective students may be looking for or want to do, and plan both top-level and side navigations to guide their journey and supply them with answers to their inquiries.
Develop the page structure and wireframes
After the site’s structure and groups of content have been established, you need to think about what should go on each page, including information, header tags, features, and side navigation arrangements.
At this point, planning for user experience, design, and copywriting runs parallel to and sets the stage for the designer to create the wireframes. As you think about header tags, how much content should be included, and where all of these elements go, ask yourself:
- What is this page trying to express? From here, you can form your message in line with user expectations. You’ll want to start with broad, brand-based verbiage higher in the navigation and progress with more details the deeper you travel through the sitemap.
- What is the user looking for? Consider this as you structure the elements on the page, from the header tags to the side navigation. This will vary based on content grouping and stage during a prospective student’s journey. You should lean on keyword research tools and data from your current site from Google Analytics and Google Search Console to understand what prospective students are seeking.
- What is the goal of this page? A call to action should guide the student, while other elements should assist them with learning more. Think about the page both in relation to the sitemap and the funnel of accomplishing any macro and micro goals.
Consider design and content together
Sites with content added after the design gets planned tend to feel disjointed and brief, as if something’s missing or intentionally hidden. The design may be beautiful, responsive, and user friendly, but you’re not sure what the site is trying to say. For the copywriter, this system often results in restrictiveness: you may have topic experts or marketing professionals giving you tips to craft a specific story and message, but the word count or location truncates its full effect.
Or, the result ends up mirroring old-school SEO content. The top of the page features a tagline and a few sentences, and the rest of the text, usually in a block, gets pushed down to the bottom of the page so the user has to scroll to find it. Aside from the fact that Google places little value on this strategy, the wording doesn’t interact with the design and likely won’t inform or interest the user. Secondarily, superfluous accordion functionality may be used in parts to intentionally hide the amount of information the page ideally should be expressing.
Yet, thinking strictly about content and not design can result in a page that’s simply text, perhaps with an image or two. White space and appearance aren’t considered, so the engagement and connection become lost. As this occurs, the user gets served with too much at once. The sameness with no variation detracts from its visual appeal and decreases curiosity.
As each page takes form and you consider the relationship among copywriting, images, and design, prepare to address the following:
- What are you trying to communicate? This factor extends from the tone and wording to the colors and font.
- What’s the best way to structure the page? In relation to the message and mission, what should the user be seeing first? What actions should they be taking? How does content farther down the page support the initial message, and what’s the progression among these separate sections?
- How will these factors render in mobile? With mobile now accounting for over half of all searches and Google indexing mobile versions of sites over desktop versions, will the user receive the same message and be able to take similar actions when accessing this page with their phone?
- For future updates, how will someone revise the content in the CMS or utilize this template in a similar fashion? What steps or strategy are needed to ensure consistency with design and branding in the future? If separate fields exist, their roles should be established and recorded for anyone updating the content. If code needs to be entered into an interface, this structure and format should be easy to find and reference.
- Does the design have enough versatility and flexibility to adapt to content changes in the future, or will an entirely new template need to be developed? Will information intentionally be left off because of the physical format? Because content inevitably evolves, it’s recommended that the design be able to adjust with it rather than restrict its progress.
- How will the templates and subsequent design accommodate not only the messaging and information presented but how users may be interacting with the site at each stage? Will the design prevent the user from taking the necessary or most logical course of action, leaving them at a dead end instead?
Design a content-first higher education website with Carnegie Dartlet
Thinking about revamping your college or university’s web presence? For organizing the sitemap and page structure, conveying your message through copywriting, meeting SEO best practices, and framing the site with responsive, inspiring design, get the process started with guidance from Carnegie Dartlet. Learn more about our website design and development capabilities or contact us today to see how we can merge content and website design to capture your prospective students’ attention.Share on Twitter Share on Facebook Share on LinkedIn Subscribe to Our Blog