« How to Supercharge Your Advocacy Campaign With a Story | Main | 5 Questions for...Craig Barrett, former CEO and Chair, Intel Corp. »

Content Strategy and Copywriting for Social Impact

March 30, 2017

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:

Ccd_image01_reference

via TutsPlus

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!

Ccd_image02-10_reference

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.

Headlines

  • 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.

Intro Text

  • 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.

Ccd_image03_reference

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

  • 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

Ccd_image04_reference

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.

Ccd_image05_reference

Conclusion

Proper structure is just one component of an effective content strategy for the Web, but it can be very powerful

Headshot_quinn_macrorieHave 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.

Quinn MacRorie is a user experience designer and content strategist at Constuctive.

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been saved. Comments are moderated and will not appear until approved by the author. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Comments are moderated, and will not appear until the author has approved them.

Contributors

Quote of the Week

  • "[W]hat struck me was the startled awareness that one day something, whatever it might be, was going to interrupt my leisurely progress. It sounds trite, yet I can only say that I realized for the first time that I don't have forever...."

    — Anatole Broyard, book critic/editor/essayist (1920-1990)

Subscribe to Philantopic

Contributors

Guest Contributors

  • Laura Cronin
  • Derrick Feldmann
  • Thaler Pekar
  • Kathryn Pyle
  • Nick Scott
  • Allison Shirk

Tweets from @PNDBLOG

Follow us »

Other Blogs

Tags