Because people tend to read differently on the Web than they do offline, content for a website should be structured differently than it is for an article or print piece.
Online, people tend to scan for keywords that correspond to the information they are looking for and only read further if they come across them. You can't count on your audience to read as deeply on your website as they would with a long-form document, which is why it's important that your Web content is properly structured to promote engagement. Breaking up, or "chunking," your content into shorter sections also helps readers retain information. Therefore, a proper content strategy for your website should focus on both how your writing is presented on the page and how you craft individual content elements such as headlines, subheadings, and captions.
Formatting Your Text
Using a typographic hierarchy on your website is one of the most effective ways to ensure that your content is structured properly. Typographic hierarchies use formatting elements such as size, color, and font effects to establish an order of importance for your content. When done correctly, the result is much easier for your readers to skim, find the information they are looking for, and retain what they read.
The two-part example below shows how powerful a typographic hierarchy can be in terms of effectively structuring content:
The list of bands in the above example is difficult to scan. Imagine trying to find your favorite band's upcoming concert on an entire page of listings like this!
Here we can see the power of typographic hierarchy. Readers can easily make out that the names of the bands are in larger bold text and the date and time of the concert is in green italic text, which helps them scan the list and quickly find the information they need.
Proper text formatting not only helps readers find the information they are looking for, it also encourages people to spend more time on the page and engage more deeply with your content. But text formatting can only take you so far. Structure also extends to the content itself. In all likelihood, your organization uses a content management system (CMS) to produce, edit, and store the content on your website. Typically, CMSes have fields for entering specific types of content that are then displayed in a certain way on your website. Following a few simple guidelines for your content fields can help ensure that your content is optimized for the Web.
Structuring Your Text Fields
While most CMS templates are designed to produce customized content layouts, think of the following guidelines as best practices that work for a wide variety of Web content, especially text-heavy pages.
Page Name & Navigation Title
- Page name is the heading used for a page. The navigation title is how that page is named within your site's navigation scheme.
- These fields do not necessarily need to match, but keep in mind that page titles will be truncated in search engine results after 55–60 characters. If you can't fit the complete title within those parameters, make sure the most important keywords are included.
- Use a straight-forward descriptive term to communicate to readers what they can expect to find in that section of your site (e.g., "Communications Office" vs. "Welcome to Communications!"). Using language your users are familiar with eliminates the need for them to guess.
- For easy scanning and comprehension, make sure your headlines are descriptive and short (5–10 words).
- Readers may not encounter your headline in context (they could see it in a social media post or on a newsfeed, for example), so make sure it makes sense when not properly contextualized.
- Front-load your headline with keywords that grab readers' attention and convey what you want readers to take away from the page. This not only helps readers get to the content they are looking for more quickly, it also will drive traffic to your site.
- Introductory text, usually found at the head of a page below the title, should provide a basic description of the content on that page, giving readers a basic idea of what they can expect to find there and helping them decide whether or not the page is likely to have the information they are looking for.
- Introductory text should be limited to a single paragraph (two at most) and be about 20–30 words in length.
- Intro paragraphs also are important to search engine optimization (SEO), so be sure to incorporate keywords that people are likely to associate with your content and/or organization.
In this example from our client the Regulatory Assistance Project (RAP), we've included introductory text under the page title that concisely explains why RAP is focused on this topic. Readers get the gist of what is to follow, and can read further if they want to learn more. (Also, notice the clearly defined heading in the body content!)
- Body copy for a typical Web page should be 300–700 words in length; if it's longer, make sure to break it up into multiple sections.
- Use subheadings to introduce those sections to the reader. You should be able to set a heading or headings style in your CMS that will make it easier for you and your colleagues to apply them consistently.
- Provide in-page navigation for very long pages with multiple subsections
This example from the ClimateWorks website shows how in-page navigation can break up a long page. Each of the links on the right lead to a different section within the page. To provide further context, the orange bar fills the section as the user scrolls, showing how far into the section they are.
Images & Captions
- Images can help reinforce the ideas in your copy and enhance its readability by breaking up long blocks of text.
- In this article we provide some general guidelines for ways to make the images you select more powerful.
- Captions should briefly describe the image itself and provide any additional context that the reader may need (for example, the image creator's name).
- Because you'll have some readers who are unable to view images (sight disabilities, a slow Internet connection, etc.), make sure to include an <alt> tag in the HTML for each image that describes what the image is about. Using keywords in your <alt> tags also provides SEO benefits.
Proper structure is just one component of an effective content strategy for the Web, but it can be very powerful in terms of its effect on your audience and its engagement with your content.
Have any content strategy and copywriting tips of your own you'd like to share? Use the comments section below. And be sure to check out more great articles in our Cause-Driven Design® series.