We talk to a lot of folks at nonprofits who aren’t happy with their organization’s website. Usually, the site is failing to connect with audiences and accurately reflect who they are. Oh, and in almost all cases, it looks dated and stale. As a result, organizations sometimes ask us to “refresh” or “reskin” their website. In other words, they want the design of their site updated so it looks more modern, but want the existing structure, navigation, and technology to remain in place. While there’s nothing wrong with wanting your site to look better, asking for a design refresh like this can be a band-aid fix for much deeper problems.
At Constructive, we believe that an effective website is composed of four things: brand, design, technology, and content. If your site isn’t performing, you need to invest in a redesign that takes all four of these elements into account—assessing how each serves your users’ needs and impacts their experience of your website. Why? Because on average, users only spend 10-20 seconds on a web page before they leave, and according to a 2006 study, they can develop an opinion of your organization after as little as 50 milliseconds of being on your site. That means it needs to make a good impression on all fronts quickly, or else you risk losing potential advocates. If your website has been “refreshed” to look modern, but users still can’t find the information they’re looking for, they’re not likely to stay interested for long.
“Okay,” you’re thinking, “that’s all well and good, but what if I don’t have the budget for such a big overhaul right now?”
Start with something you know. Content is one of the most important elements of a good website, and if you work for a nonprofit, chances are you and the people around you are adept communicators. So why not rewrite the content on your website? We like to call it content design, because the way you write, format, and structure the words on your is site should have as much intention behind it as visual design. This quote by designer Jeffrey Zeldman says it all: “Content precedes design. Design in the absence of content is not design, it’s decoration.”
In fact, if you know your organization wants to more fully redesign its website in the future, getting your hands dirty with content now will give you a good understanding of what’s currently on your site, and in what ways it might be falling short.
So if your site’s visual design isn’t compelling enough to make a quick impression, and you don’t currently have the budget for a full redesign, try putting your communications skills to work by redesigning your website’s content. Here’s how:
Before you start…
First off, you’ll need access to and familiarity with your website’s content management system (CMS). If you’re unfamiliar, most CMS’s offer tutorials for making changes and open source platforms like WordPress and Drupal have plenty of educational resources.
Assuming you’re good to go there, you’ll want to start prioritizing your content. Rewriting the content of your website is no small feat, especially if you’re dealing with a large, information-heavy website. Start with the pages that users visit the most: your homepage, your about page, etc. If your organization tracks analytics, even better! You can check which of your pages are visited most and add those to the high-priority list.
You’ll also want to gather a team to help rewrite the content. Try to choose staff who work in different areas of your organization, with varying areas of expertise so the content is as accurate as possible. Just make sure that one person is tasked with being the final eyes on content, and is responsible for entering content into the CMS. That way, you can better ensure that the content voice and style across pages stays consistent. We typically recommend using a spreadsheet like this one to keep track of the process.
Know Your Audiences
A clear understanding of audiences is the key to determining how you should write and present the content on your site. Who are you writing it for? Keep in mind that this will likely vary page by page.
When your team is prioritizing the pages to rewrite, it can be helpful to note which of your audiences will be frequenting each page. If you’re an organization that provides emergency health services, for example, a ‘Get Help Now’ page would likely be most commonly visited by clients. Think about their content needs when they visit this page of your site. What do they need to know? What content is most important to them?
When we work with clients, we conduct surveys and interviews to learn about an organization’s core audiences. From there, we extensively research those audiences in order to build out in-depth user personas to guide the information architecture, content strategy and visual design of a site. Here’s an example persona:
Scannable Content vs. Long-Form Content
Have you ever stumbled upon a webpage with large blocks of dense text and thought “Wow, this looks SO interesting! I can’t wait to read it all!” If you’re like us, probably not—you’ve likely found it daunting!
One of the simplest ways you can make your website more effective is by breaking up large, dense blocks of text whenever possible. In other words, stop writing so much! This holds especially true for more general landing pages, like your homepage and about page. These pages should be easy to scan, so users can quickly understand who you are, and then learn more by digging deeper into your site.
One of our favorite books on this topic一appropriately named Content Design一details the ways in which the human brain reads and processes text. Spoiler alert: we’re not really reading every word. In reality, people only read about 20-28% of a page’s content online. We look for patterns and words we understand in order to comprehend content as quickly as possible. You can nerd out more about how people read online here, but suffice to say that the less words you can use to inform a reader, the better they’ll retain information and the more interested they’ll remain in exploring your site further.
When users take the time to explore your site deeper than overview pages, you can and should display long-form content, like published research or program descriptions. Such content doesn’t lend itself well to being shortened, so don’t stress yourself out thinking all the content on your site needs to be scannable. While design is a key asset in making long-form content like this more digestible, there are also some content design techniquesyou can adopt to maximize engagement with this more complex content.
The main takeaway here is that by making the more general pages of your site quicker and easier to read, you increase the likelihood that users will be more interested in reading your longer-form content, learning more about your organization in the process.
Formatting For The Win
Rewriting and trimming down your content will only get you so far. Without proper formatting, the text on your site might still be difficult to parse through. By establishing typographic hierarchies, you can establish an order of importance for your content with different text sizes, colors, and/or emphasis. This makes it easier for readers to quickly skim and digest your content. Plus, when text is properly formatted, it encourages users to read more, and engage more deeply with the rest of your site.
Don’t believe us? Here’s an example that makes the power of formatting pretty clear. Which content block is easier to digest?
For more tips on writing and formatting for the web, you can check out part one and two of our complete guide.
Once you’ve revised and reformatted your content, you’ll want to make sure users can find all that great information you worked so hard to redesign. By incorporating hyperlinks into the content of various pages of your site, you can encourage users to explore more of your work in different areas of your site. For example, if someone is reading your programs page, they might also be interested in reading some client stories, annual reports, or learning about ways they can volunteer. Have you noticed us using hyperlinks throughout this article?
By now, you should have all the tools you need to start redesigning the content of your website. Of course, content alone won’t fix all your website woes. Brand, design, and technology are equally important elements of a great website. But addressing content concerns will help make the information on your site more digestible, and increase engagement with your audiences as a result. Plus, the more you work on your content now, the better off you’ll be when you secure the budget to begin a full website redesign project.
Happy writing…or should I say, content designing!
So, your organization decided to redesign its website to ensure your digital presence more accurately represents the impactful work you do. Great! You’ve officially made it through the discovery phase, where new ideas were brought to the table and a cohesive strategy was developed to guide the website redesign. During the information architecture phase, you narrowed in on your site’s overall structure and gained a firm grasp on how users will navigate through your new site.
Everyone is excited to finally enter the design phase of the project, but to keep things on track, you can’t forget the importance of your new website’s content! It’s really easy (and very common) for our clients to overlook this step in the redesign process and assume that the content on their old site will fit seamlessly into the new one. In reality, developing the content and sourcing images for your new site can be quite the undertaking.
Don’t worry—there are some key steps you can take to make this process run more smoothly. We’ve developed a brief guide based on our experience that’ll help you manage a successful content development and image selection process:
Step #1: Establish a Plan
Developing an organized and thoughtful plan for tackling your site’s content needs is critical to ensuring a smooth experience overall. So start this step early! It’s best to begin organizing and writing website content as soon as your site’s information architecture (a website’s content blueprint) is finalized. That way, you can start drafting content for the different pages of your site in advance, using the wireframes as a guide, and finalizing content once the design has been fully fleshed out.
Organize your content:
- Decide what content, if any, you will be carrying over from your old site. This might be less content than you initially expected一when the design of a site changes drastically, so too do the content needs. Once you’ve identified what will be carried over, determine what new content you’ll need to fill in the gaps. We recommend using a content matrix to identify and keep track of all the content you’ll need to enter into your content management system (CMS)一from headers to introduction text, body copy and even button text. A content matrix is basically just a fancy word for a spreadsheet that tracks and organizes the new content your site needs. And don’t worry, we put together a content matrix template that you can download here!
Organize your images:
- Don’t forget about images一they’re content too! The image selection process can take time, and some images might need to be cropped and treated. You can use the wireframes to identify where on the site you’ll need images, and come up with a plan to source them. Does your organization have a big library of photos? Will you need to source new images? There are many resources for free photos online (for example, Unsplash) and purchasing stock images is also an option. Again, we recommend using an image matrix to stay organized. You can download our image matrix template here.
Pick your people.
- You’ll need to determine who will be writing your content, who will be editing and reviewing your content, and who will be responsible for entering it into the CMS. Don’t underestimate the time it takes to develop engaging content and enter it into the CMS. Make sure you have plenty of people on the job!
Step #2: Start Executing
Once you have a solid plan laid out, it’s time to start actuallydeveloping, editing, and reviewing your content. Which, we know, can be a lot easier said than done. We recommend determining when your project is scheduled to begin Quality Assurance (QA)一the phase of the project when you’ll begin testing the site to get it ready for a successful launch一and then working backwards to create a content development schedule that hits this deadline.
- One of the most common reasons for delayed launches for our clients is that final content is not ready. Consider scheduling a weekly or bi-weekly meeting to assess how your content is developing and to stay on track.
Get Your Content Reviewed
- Don’t let stakeholder review creep up on you! Make sure whoever at your organization needs to approve your website content has ample time to review and make changes. This is why we suggest picking your people in Step #1一if everyone’s up to speed on who’s doing what and why, the review process can run a lot smoother.
Step #3: Enter Your Content & Images
Congratulations! You finally have your content drafted, approved, and ready to be entered into your new site’s CMS. At Constructive, we provide our clients with a full CMS training to help orient their team to the backend of their new site, and instruct them on how to add their new copy and images. If you don’t have access to training, or still need some support, here are a few tips to keep in mind:
- Use a text editor to strip content of formatting if you are copy/pasting from another source, such as your content matrix or a word document.
- While most content management systems like WordPress allow you to crop images within them, we generally find it’s more effective to crop images using tools like Sketch or Photoshop first, and then uploading the images into the CMS.
The website redesign process can be an exciting, yet somewhat intimidating time for organizations一especially if they’ve forgotten to prioritize their new site’s content! But by starting early and coming up with an organized plan to tackle your site’s content needs, the big task of developing content and entering it into the CMS can be much less daunting!
Digital communications and social media have had a tremendous impact on our ability to maintain focus and attention — not just online, but in the real world. Online and offline, we are awash in content that’s fragmented and comes at us fast. Distractions are everywhere and, for social change organizations, creating awareness and engagement around complex issues can feel like an uphill battle.
But even as short-form platforms like Twitter increasingly shape how issues are framed by the media, recent studies show that when it comes to audience engagement, long-form content performs better than shorter content. So, while we may live in a world dominated by short bursts of commentary, opinion, and insights, long-form content remains a critical (and effective!) format.
While every organization with a message to communicate has to learn how to navigate this dynamic, social change organizations face a bigger challenge. Because when your mission revolves around a complicated issue, is connected to a problem in a far-away place or the distant future, or is just removed from the concerns of everyday life, maintaining audience engagement is inherently more difficult.
Still, it usually boils down to the same question: How can we elevate our issue or cause and engage our target audiences? The time-tested principles used by storytellers since, well, forever are an excellent place to start.
Leveraging Narrative Structure
Whether presented as narrative or as academic research, all long-form content can benefit from the three-act structure of exposition, confrontation, and resolution familiar to professional storytellers. In general, it works like this:
Invite your audience in.
Whenever you are asking an audience to engage with a longer narrative, it’s important to invite them in to the narrative by stating up front the things you have in common. Establishing a shared understanding and creating common ground with your audience — and appealing to their “better angels” when appropriate — makes it that much easier to pivot to the more complex ideas you need them to engage with and to share new perspectives they are likely to value.
Establish your “characters.”
Establishing common ground with audience members also earns you their interest and attention — equity you can use to deepen their engagement with your issue or cause. In storytelling, effective writers use this equity to establish their “characters” and the underlying relationships that animate them. Keep in mind, characters don’t need to be actual people — they can be a commonly held belief, a way of doing things, or an entire system that impacts your mission. Whether you’re sharing a traditional narrative or specialized academic content, it’s important to establish this framework sooner rather than later, and to supply important details that will deepen your audience’s commitment to, and understanding of, the issue at hand.
Introduce a catalyst.
By this point, your audience should both be familiar with your issue and inclined to commit themselves to learning more about it. It’s time to elevate their interest by revealing the catalyst! For social change organizations, a catalyst could be a new way of addressing systemic inequity or research that offers insights into how to think about social change in a new way. Whatever the case, your goal is to provide a compelling reason for your readers to step up their investment in your work. And the more complex the issue, the more important it is to clearly lay out the related activities and/or outcomes that are part of the catalyst. Done well, you’ll create a connection with your audience that boosts their willingness to engage with and support your mission.
Create a resolution.
For many social change organizations, impact is something that happens in the future (sometimes the distant future). The delay in being able to demonstrate results is a major challenge for social change organizations working to address deep-rooted problems such as poverty, structural racism, or climate change. So if your audience is still engaged with your long-form content at this point (and you certainly hope they are), it’s critical to offer them some kind of resolution. Depending on the nature of your organization, that resolution can take a number of forms — a satisfying conclusion to a story about impact, a roundup of resources they can use to further their own change-related efforts, and/or a list of things they can do to strengthen their engagement with your organization.
Again, whether your content falls into the emotional narrative category or is fact-based research, the key to deepening audience engagement is maintaining an equal focus on both its structure and substance. And the same best practices that work online can be applied to any medium or format.
Tips for Content Creators
Now that you have a better understanding of the principles of effective narrative, here are some recommendations for crafting compelling long-form content that will deepen audience engagement and spur potential supporters to action:
Be consistently thoughtful.
The bar for high-quality long-form content is, well, high. And with so much content so readily available, ensuring that your content is respected, remembered, and returned to means making sure it always speaks to and reinforces your organization’s credibility, delivers meaningful value, and provides a great reading experience.
Editorial creativity is paramount.
To spark and sustain engagement, long-form content needs to be focused and well structured. To keep your audience’s attention, try alternating between simplicity and complexity. Punctuate deeper dives into an issue with simple summaries and key insights. Doing so will not only underscore and amplify what’s at stake, it will make it easier to move on to the next idea you need to communicate.
Empathy is important, but…
Successful communications is about more than just making sure your ideas are clear, concise, and well-stated. It’s about meeting your audience wherever they are (i.e., creating common ground). That said, conveying empathy isn’t about purple prose or being gratuitously emotional. Instead, it requires establishing a genuine, meaningful connection to the people you are hoping to engage on terms that resonate with them, and building trust.
Make sure your audience doesn’t get lost.
Consistency and clear expectations are critical to building trust — especially in long-form content that requires a greater commitment from your audience (and even more so online). Both in the language you use and the actual vehicles you create for your content, cues designed to orient audience members within the reading experience can reduce cognitive load, improve content accessibility, and create a sense of anticipation that keeps audience members reading.
Provide a place to rest.
Giving your audience members conceptual places to take a break is a great way to reduce the fatigue often associated with reading long-form content. Analogy, metaphor, and digression are tried-true techniques that, when executed well, can reinforce context, add needed perspective, and reinforce reader understanding. From a design perspective, creating visually (and conceptually) separate material such as sidebars is also an excellent way to introduce a change of pace into complex material.
Don’t be afraid to pick a fight!
As our name suggests, Constructive is all about positive dialogue. But that doesn’t mean we don’t appreciate the importance of taking clear positions and standing up for what we believe is right. If the issue your organization is working to address requires you to take a stand, you can strengthen your case by contrasting your position with the position of those who see the issue differently and explaining in clear terms what’s at stake.
Leave your audiences wanting more.
Every piece of content you share with your target audiences should leave them better informed and feeling energized. But the next steps are crucial. You need to give them a rationale for wanting to help you advance your cause, including a range of actions and an explanation of why their actions will create more impact when combined with the actions of like-minded people (as always, the whole is greater than the sum of the parts!).
We create content in hopes that people will engage with our ideas. Storytelling has long been one of humanity’s most powerful ways of translating ideas into action. While sharing our ideas through digital communications may be different than telling stories around a campfire, the fundamental principles are the same.
To truly engage an audience, digital content must be meaningful and deliver value — wherever and however an audience chooses to consume it. In a world of too many choices, sustaining online engagement requires that we design and deliver experiences that highlight the alignment of our ideas and activities to the interests of our audience. When ideas are presented in a way that our audience finds to be both accessible and useful, those ideas will be shared with others. At Constructive, we call that a win-win!
Today’s digital landscape is crippling our ability to focus, with people’s average attention span now shorter than a goldfish’s. We also spend over 10 hours a day consuming content from digital screens. Add it up, and our understanding of the world and our connections to it are significantly shaped online while our ability to process and put information to good use are increasingly diminished. In this environment, organizations who publish content online to help make change happen in the real world face significant challenges. How do they build meaningful relationships with audiences, broaden people’s perspective and deepen understanding to increase the impact of their work? And how must they think differently about the ways they produce and publish content?
Matthew Schwartz (Founder & Director of Strategy) and Senongo Akpem (Design Director) of social change design agency, Constructive, you’ll gain insights into strategies and techniques that will transform how your organization produces and delivers content online—and turn your website visitors into readers and website visits into journeys.
Specifically, you’ll learn:
- The principles of content-centric design
- Design’s role in increasing credibility and persuasion
- How to organize & present content for greater clarity
- How to create greater context & deeper meaning for audiences
- How to deliver memorable takeaways and encourage longer reads
- How to produce flexible content that can be reused across channels
Watch the replay below:
Selecting images that capture the spirit of your content and brand has become an increasingly important aspect of maintaining a digital brand. We need to do this to keep our brand fresh, and to make sure that new communications are paired with striking, on-brand imagery. For brands whose communications rely heavily on the use of photography , as opposed to illustration or infographics, this requires constant photo research which can often be stressful and time-consuming. There are, however, some simple and effective techniques you can use to make the process easier. There are types of photos to avoid, and types of photos that will make your content stand out. Let’s take a look at a few of those techniques.
Photography to Avoid
Avoid people staring.
Photography that features subjects staring directly at the camera usually feels more appropriate for advertising. (The general exception to this is headshots of staff members.) While custom photography with “regular” people, not models, is a way to avoid this, the cost is beyond the reach of most organizations. Additionally, cheaply-shot stock photos will typically stand out as inauthentic.
Avoid over-smiling people.
Stock photography is often filled with people having far too good a time doing everyday things, resulting in images that feel staged and unrealistic. Think of how often your audience actually laughs or has “fun” in these types of situations and look for photographs with subjects who have facial expressions that appropriately match the tone of your content.
Avoid staged studio photos.
While studio photos can sometimes be hard to identify, there are a few giveaways that you can look for, and then avoid. Look at the lighting—photos shot with staged lighting will often have too few shadows, brightness on the wrong sides of objects, or feel very washed out. Photos filled with props such as office equipment, construction workers in spotless hardhats, or perfectly staged backgrounds or on white backgrounds rarely feel authentic.
Avoid overly stylized images.
Avoid using images that incorporate unrealistic photo imaging, color adjustments that are likely to be off-brand, or photos that rely on clichés to communicate their concepts. Additionally, after a number of years with stock photo sites on the web, there is a type of image that is a “stock” stock photo. One is the cartoony, “3D business-man” doing different things. Avoid these at all cost. It is better to use no image than one of these.
Avoid cultural clichés.
Another type of image that often is used for non-profits is the “savior” image. It’s of a wealthier donor or volunteer surrounded by smiling recipients, usually African children. These photos feel staged, and display an extreme power dynamic that is almost always at odds with the true nature of the communities being photographed. Speaking from personal experience growing up in Nigeria, scenes of children crowding around a visitor do of course happen in West Africa. But they also happen in schools in the U.S., at playgrounds in Japan, and on streets in India.
Other cultural cliches, like Africans in stark poverty, colorful Mardi Gras/Carnival celebrations in Louisiana, or clogged Indian cities should also be avoided. While these images often reflect realities, it’s important not to reinforce unintentionally negative stereotypes of countries or cultures. Instead, choose images that portray them with the same complexity and humanity we accord our other subjects.
Photography to Include
Make the image relatable to your audience.
Choosing images that are relatable to your audience depends on, well, your audience. If possible, look at your brand handbook and positioning statements for a clue. Also examine your site analytics to see where traffic is coming from, and what articles perform the highest. After this, compile a list of keywords and phrases that describe your content and search for photos with these attributes.
Make the image distinct.
As a brand manager or marketing director, seeing your carefully chosen stock image used on another site or ad can be cringe-inducing. For your audience, it can dilute your brand and message significantly, especially if the image is used on a competitor or related site! If you have an image that you’d like to use, start by doing a reverse image search. While this will never be exhaustive, it tells you generally how others are using the image, and how common it is online. Not happy with what you see? Widen your search parameters and go for something with more personality that is less common online.
Make sure the image is legally available.
It’s easy to grab an image from Google or Bing Images. You can find great high resolution images just waiting to be downloaded and imported into your site or presentation. The catch is, you likely don’t have the rights to them! For nonprofits and social change organizations on small budgets, copyright infringement lawsuits should be avoided at all costs. Luckily, there are a few sites already working on making this rights process as painless as possible. They specialize in high-quality free or no copyright photography.
Make the image accessible.
Beyond ensuring your images are visually appealing, you also must also ensure your images are accessible for the visually impaired. The National Federation for the Blind estimates that around 9% of all adults in the United States have some sort of visual impairment. These users often use screen reader software that translates the text and content displayed on the computer screen as a speech synthesizer or braille display. These programs rely on descriptive text attached to images that describes the actions taking place in them. This is called alt text, since it’s inside an HTML “alt” tag.
Let’s look at an example.
Good example of alt text: Two female colleagues chatting at a table with computer in front of them
Bad example of alt text: Two people at work
Good alt text includes detailed information about the photo, allowing for a more specific search and find. The bad alt text is less specific and therefore less informative about the nature of the photo.
Finding images that keep your brand up-to-date and memorable can be a huge challenge. There are types of images we absolutely must avoid, ones that your audience will immediately note as stock or cliched. Instead, the most effective imagery on your site will be relatable, accessible, distinct, and legally available. While this may feel daunting at first, if you follow a few simple steps, doing this is easier than you think!
Voice & Tone
Determining the right voice and tone for your online writing is essential to making your readers feel engaged with your ideas. Of course different content demands a shifting tone (if you’re discussing a natural disaster, best not to be too light), but generally speaking, when writing content for your organization’s website, aim for a personal, upbeat tone. You do not want to appear too casual with your readers but you also want to avoid sounding bureaucratic or aloof. Your writing should sound like it was created by a human, not a corporate robot. It can be difficult to get your tone right, but studies show that it has a significant impact on your audience’s perception of your organization. Here are a few key points to keep in mind:
- Use the active voice—it helps your writing seem less stuffy and it has the added bonus of cutting down on text length.
- Avoid jargon! Just because a term is common in your organization, doesn’t mean it is well known outside of it. Speak the language of your users.
- Keep your industry’s standards in mind and be cautious when deploying humor or playfulness. While incorporating this into your tone can help your writing seem friendlier, it can also turn your readers off and even damage your organization’s trustworthiness.
- When in doubt, seek advice—a second pair of eyes can be crucial in refining and wordsmithing content.
In previous articles, I’ve discussed how to use a hierarchical system for structuring your content. Content structuring also extends into how you unveil the information you’re conveying in your content, i.e. editorial structuring. The approach that fits best with how audiences read on the web is called the “inverted pyramid” style. In short, using the inverted pyramid-style means that you’ll present the most important information at the beginning of your publication, working down to the more discrete details.
- Stating the main idea of the passage not only helps readers decide whether to engage further with the writing, it also ensures that if they do not read further, they will at least remember the central idea of the passage.
- This style of writing can also help you structure your content effectively by breaking into smaller portions.
- Front-loading your content with keywords not only helps your readers understand the central point of your writing, it also has SEO benefits since search engines rank articles with keywords at the beginning of the article higher.
The inverted pyramid illustrated. From Wikipedia
The” readability” metric refers to the complexity of sentences in individual word choices and sentence structure. Basically, it determines how easy it is to understand your text. While the level of complexity you need to use varies greatly depending on the audience you’re trying to reach, almost all writing can benefit from simplicity and directness.
- Aim for middle school level (7th/8th grade in the USA), if you are trying to reach a broad audience.
- Use Word’s grammar proofing function or Hemingway editorto analyze readability. Seeing the complexity of your writing is an illuminating experience that will help you understand patterns in your writing and be more conscientious about its complexity in the future.
- Keep in mind that writing clearly and intelligibly is your primary goal. Readability tools can only analyze your text, they can’t tell you why your content may be hard to understand. For more information, consider performing a Cloze test on your copy with real users to determine how well readers can comprehend your text.
An example of a piece of text analyzed with Hemingway Editor. Complexity is conveyed through the red or yellow highlight, while suggestions specific words and phrases are given in blue, purple, and green. Example via ShoutMeLoud
Writing with Emphasis
Emphasis is essential to helping your reader understand the relative importance of information within your text, and helps reinforce and build upon the voice and tone established in your writing. Breaking up long passages of text with emphasized words or phrases also supports important points and increases the legibility and readability of your text.
- Let your defined text styles do the work for you. If you have a style guide set up for your headings, styles for emphasis, etc., stick to it.
- Don’t try to emphasize specific text too much, use italics and bolding sparingly—if your copy is well-structured with short paragraphs and well-defined sections, you won’t need it. As a rule, less than 10% of your text should be emphasized.
- It may be tempting to mix emphasis styles (for example, combining bold and italic on one piece of text to show that it’s really really important), but generally this is a bad idea. Combining styles interrupts the reader and looks awkward, which can undermine the credibility of your content. If your readers misunderstand your intent or can’t find important information in your text, it means you have a content structuring problem. If you’re unsure, try getting feedback from your users to find the problems with your content.
- Avoid using ALL CAPS in your body text. All-cap text is much harder to read than mixed or lowercase text. Additionally, many readers interpret all-cap text as the equivalent of yellingand it can be perceived as overbearing or rude, which is the wrong kind of emphasis you want on your writing! Note that all caps text is different than small caps text, which can be used quite effectively for emphasis, often as a heading style (your design team will figure out if this style is appropriate for your project).
This example from Smashing Magazine shows the correct way to emphasize text. Note that italicized text is best for emphasis when the reader is actively reading a passage, while using bold text brings attention to individual words while the reader is scanning a longer section of text for keywords.
A Note About Migrating Content
When you’ve undergone a website redesign, stray bits of incorrectly-styled text often find their way into your content management system (CMS) when content is migrated over from your old site. This text needs to be cleaned up so the appropriate styles are applied and are consistent with your style guide. For example, you may migrate over a blog entry that applies bold styling to the post heading, rather than the proper format for the assigned heading style. Inspect any content uploaded to your CMS to make sure that it fits with your style guide so that your users are not confused.
Effective writing for the web involves more than just stylistic finesse. Choosing the appropriate voice, tone and structure, ensuring your text isn’t too complex for your audience to understand, and emphasizing the right content all go a long way towards ensuring your ideas make an impact on your online audience.
I have certainly been blown away by fancy websites with their well-intentioned and occasionally well-thought-out animations and functionality. Be it a smart filter for a mountain of content, a complex and flashy history timeline or beautifully-fitted tabbed content in a compact space, replete with sliding animations and other eye candy. At best, my mind is blown and I took home an insight I didn’t have before. At worst, I missed the point of both the presentation and the content. Content is King, but you don’t necessarily need a tiger or something crazy like that.
Even a visualization can be represented as simply as a flat image with no animation. A text heading can be just as impactful in place rather than rising up from the ether. A single photograph can be worth a thousand words.
Now, you may already be sensing that I’m here to crush your dreams – and I have to be honest, I totally am.
Let’s take a look at a few popular website features and explore why you might consider ditching them in favor of something else.
The Slideshow Banner or Otherwise Hidden Content
Fairly ubiquitous on the web these days, the slideshow banner typically has at least three slides with an image, copy and a call-to-action button that directs the user elsewhere. One word: outdated. Still, it’s a popular choice for combining a group of different messages in one block.
The same effect happens with tabbed panels or any sort of expanding content. The user is not getting the message unless they take the time to use the controls.
In this Nike example, there are 7 different slides with their own copy, buttons and even videos. A lot of work went into this that perhaps could have been spent on a grid as seen lower on the page. After all, they all lead to a landing or purchase page.
Is it effective? Doubtful. The primary issue with a slideshow is they only allow you to see one thing at a time and most users simply move on and don’t see more slides after the first couple.
Could it be better done better? For sure it could. Sometimes all you need is a row or two of promoted content with headings, supporting text below and a call-to-action button to get the user moving where they want to go (and where you want them to go).
Potential savings? Some savings might be gained by leaning towards a static presentation, but the primary gain by going static over a slideshow is that all your important promoted content and focal points are visible 100% of the time.
The Underutilized Content Filter
Filters are a handy way of getting through hundreds, if not thousands, of content items quickly and effectively. When you’re shopping on Amazon, filtering is a big win. However, when you’re trying to filter through 20 content items, it’s quite possibly a waste.
We recently developed a Drupal site that filters thousands upon thousands of content items of a few types, each with different facets. The system works great and was of high value to the client; it made sense given their goals and content, and was well worth the investment.
However, if you’re dealing with a limited number of content items, it may be worth thinking about if you’ll be adding enough in the near future to justify a filter. You very well may not need a filter if a keyword search does the trick or content can be presented in a way that exposes what people want exactly where they expect to find it.
Is it effective? It definitely can be if the need is there. The big question: is the need there?
Could it be done better? I’d dare say trust that your users can find what they’re looking for if they’re just perusing through five pages of indexed items. The chances that they’ll find what they’re looking for with or without a filter when dealing with a relatively small site should be about the same.
Potential savings? If an unnecessary filter is ditched in favor of allocating budget for content enhancing services, significant savings. No development, testing and retesting are needed for all the important parts it takes for a filter to function.
Non-Interactive Animated Visualization
If you’re selling a luxury product like $200 running shoes or an industrial design laptop, featuring a single purpose animated visualization can make a lot of sense. You can generate hype about the products’ features and create excitement amongst potential customers.
Animation for interactive visualizations can also be extremely effective, however, without the interactive element it’s totally possible to use simple flat images or a very basic animation to pull attention to your visualization and still get the message across.
Apple’s animated presentation of their new Macbook Pro line is definitely smooth and sophisticated. Here it’s showing off the functionality of their new Touch Bar when the page is scrolled. It undoubtedly took a good amount of time to design and develop.
Is it effective? Animated visualizations can be stunning to the eye and mind. However, the end message of the animated visualization versus the static version will be much the same.
Could it be done better? In this case, I wouldn’t say it could be done better, but often a flat image can definitely speak to the same concept as an animated one and will be more easily sharable on the web.
Potential savings? Extra design and development time will dramatically inflate the cost of such a presentation. On a limited budget, it could be a huge loss for your content.
The Proof Is In the Pudding
I think it’s important to take a look at a couple of excellent examples of social change organizations that spent their time and money on quality content (including copy and imagery) instead of expensive dramatic visual features. One is by our team here at Constructive and the other another party.
Bold and Beautiful Content
This site has hardly any moving parts and is static for the most part. The top banner says what it needs to say, directions to the two primary hubs describing the mission (Strategies and Sectors) are presented as beautiful static blocks with all the information you need.
Our own Senongo Akpem took great care to make sure that the content sings while remaining largely static and in-place.
Less Can Be More
This is definitely not the fanciest or most modern site on the web, but the heading on the homepage says it all. This is what we’re doing and why. There’s no giant slideshow. There isn’t a hip video background, fading in and out elements or animated visualizations.
One could easily have loaded the four blocks below the heading into a slideshow, but here the content is available all at once.
Hear My Roar!
Like Shiva the tiger from The Walking Dead, your content wants to let its presence be known. You have important things to say and there are many ways to say them. As a developer, I’m on the tail end of many animation and visual complexity discussions (and intimidating tiger requests) that come up.
It Helps to Know How to Deal with Content Heavy Websites
In my experience, investing in your content is the best bang for your buck. You can enhance your content by investing in content strategy, copywriting, quality stock images to supplement your existing images, and assistance with your overall messaging. When a client works with us on those tasks, the result is head and shoulders above a site whose content didn’t get due attention.
Common reasoning against investing in content assistance might be that “our team can take care of that,” or “it can be taken care of later.” I’d suggest that instead of thinking that way, think of your content first and any fancy features can be added later. The burden of content can be overwhelming for even the most talented and well-staffed internal teams and it shouldn’t be underestimated.
I mentioned previously that serving the content and user experience are sacred goals. Content must be the dominant focus of any website – especially for a social change organization. As much fun as animations and interactive elements can be, content can be more potent and user experience more natural when content becomes the twinkle in our eyes and all else takes a back seat.
I might have said I was setting out to crush dreams, but maybe I should have said my primary message to anyone wishing to redesign their site is that your content almost always will need a redesign as well. When undertaking a website overhaul, find a partner who can look beyond the feature set, but can also help with your content and overall message!
Everything is moving online quickly, if it isn’t there already! Every day, the web holds more and more content—much of it very complex and rich with important information, like online reports, research papers, and reference material. With this volume of content also come all the tags, authors, and other metadata that make it easier for people to find it. And when you think about it for even a second, it truly is unbelievable how quickly we are able to access and explore the world of ideas.
Unfortunately, while we have an embarrassment of riches when it comes to accessing all this valuable content online, too often, the way it’s often presented leaves a lot to be desired. And for organizations whose work revolves around providing perspective and thought leadership, if how content is designed and delivered isn’t on par with the quality of thinking it contains, they’re selling themselves short—and undermining the very ideas they seek to advance.
For organizations whose missions are advanced by publishing and sharing knowledge, the design of that content says a lot about what audiences can expect from it. And research has proven that design has a significant impact on credibility, and that people come to some very quick conclusions about an organization while visiting their website. With an embarrassment of content riches just a click away, if that design does not hold up; then audiences are likely to leave and find other places to get the content they want.
As with all things on the web, usability research and design strategy provides us with ways forward. With well-thought-out design, we can find ways to present content-heavy websites clearly and effectively, encouraging our audience to visit, download, and read what we have to offer. We’ve talked about the key principles for effective content-heavy website design before. Now let’s look at these strategies put into use through design execution that presents complex content so that it’s clear, compelling, and accessible.
Different Types of Dense Content
Complex Academic Language and Text
Academic language and research can often contain complex words, sentence structure, and ideas. While keeping in mind our intended audience, we can still analyze the complexity of the content we are publishing. The Flesch-Kincaid Scale is a tool we can use to measure how difficult it is to understand written content in English; it gives our content a readability and grade level. For example, it seems appropriate that the New York Times is about a 10th grade (US) reading level, offering insight into how it’s editors tailor their content to reach a wide audience. However, not all the content we put online is meant to be read at an easier reading level, especially in the world of research and policy where content is often quite academic and complex in nature. This can mean larger words, scientific context and charts, and other dense, scholarly material that expert audiences around the world need to access.
For example, this introductory text to this report on ClimateWorks, a site Constructive created last year, comes out at a grade 17 on the readability scale.
This means the content is most appropriate for people who read at a post-graduate level. That’s pretty heavy reading, especially for a single paragraph! But in speaking succinctly to the expectations and sensibilities of expert audiences, we establish an accurate, compelling preview of what the reader can expect as they explore further. This creates a better user experience that strengthens the brand.
Large Bibliographies and Linked References
Even when reports and research are specifically written for the web and published in smaller chunks, it’s still important to cite sources by including bibliographies and references. In historical reference sites, or research pages, we can see long sections of links and bibliographic text. While the more casual reader will skip over this, researchers, managers, and analysts not only need to access this material, they may also judge the credibility of the content they’re reading based on what they find here. They have their own papers and content to produce as well, after all! The bibliographic listings on the Qatar Digital Library do a great job with this.
Open and Diverse Tagging and Grouping Systems
Often, the more complex digital content requires more complex tagging systems. Overly complicated tags can be difficult for any team to manage in a CMS, and fiendishly difficult for your audience as they browse your site. In a paper about tagging and usability, HP stated tagging is fundamentally about sense-making, a process in which information is categorized, labeled and, critically, through which meaning emerges.
There are a few ways to bring this meaning to the surface clearly on content-heavy websites, by using proven interaction design patterns, and applying them to a broader UX design strategy. For example, our search features can intelligently display suggested results as users type, letting those complex tagging systems work their magic in the background. Typographic fundamentals of spacing, proximity, and rhythm can create visual relationships between tags and key text. When we arrange tags near content, we make the entire site more easily scannable and heighten reading comprehension. Most importantly, open and clearly designed tagging systems help the audience get a good idea of the types of content on the site, and then select a topic or category to read more about.
Visually Grouping and Reusing Text
In content-heavy websites it’s crucial to establish context and help audiences find and explore content related to their interests. As a designer, it’s my job to create greater meaning from separate or discrete pieces of content by stringing a connective thread across a user’s experience at a website; we do this by grouping those pieces together in a process called “chunking.” In the higher parts of the site, such as the homepage or section hubs, this means designing elements like “teaser” blocks and planning to add short titles and intros to pages with longer titles and more dense content.
It’s important to standardize what these teasers look like, creating a small design system for them. This gives our audience a very good idea of what they will find when they tap one of the teaser blocks and navigate to a page. In order to do this, I reference my design system and typographic choices, unifying similar content and text styles. I keep elements like dates, tags, and author names very similar across the entire site. I want to make sure the audience has a visual pattern to understand – once this has been established, the content becomes more visually aligned with the knowledge it contains.
Provide Breathing Room
With the amount of text and links on these content-heavy websites, the human eye needs a place to rest. Too much content on a page overwhelms the user and means that nothing is readable, a sure way to force your audience to click away. This is where open or white space becomes important to the site experience. By interspersing the content groups we looked at above with open spaces, we increase retention, clarify relationships, and make sure they are visually eye-catching. This is especially true for complicated or technical subject matter, like in this example from academia.edu.
Design-Linked WayFinding Systems
Even after visually grouping content and designing effective white space, we are still left with sites that have a lot of pages and content. Working with knowledge-driven organizations, that is a common challenge. One of our key goals is to design a meaningful path for audiences to follow as they navigate around these sites. These paths, often called wayfinding systems, are the same as what you might find in a large museum or tourist-friendly city. They operate the same way, too.
Digital wayfinding patterns focus on the main menu, breadcrumbs, faceted navigation, search bars, and clear site links in the footer. Dennis Kardys calls this network of available pathways the circulation system. If there is a chance your audience will get overwhelmed in content-heavy website, designing a clear wayfinding system saves them time and energy.
It’s an extra layer of context that we deliberately design for, giving your audience a memorable experience as they navigate and read through dense content. Careful design choices in the main menus and navigation of a site elevates the brand in the eyes of your audience, making the site a credible place to revisit and learn from.
Content-Heavy Websites Conclusion
Design can serve a key role in the spread and readability of content online. When creating or updating sites that contain a lot of text and dense content like reports and bibliographies, we have established user-friendly ways of designing for them. Whether it is grouping like items clearly, designing open, accessible tagging systems, or even navigation and wayfinding systems that promote easy exploration, we can make these information-dense sites welcoming and engaging.
Yes, it’s unbelievable how much content is moving online. But we can rely on years of usability research and design strategy to show us how to accommodate it all. Carefully-thought-out visual and UX design enable us to discover ways to present dense content clearly and effectively, encouraging our audience to visit, download, and read what we have to offer.
Writing for the web can be a daunting task. Even experienced writers need to learn how to effectively convey information on their website for an audience with different needs and expectations than those reading print content. This article will focus on structuring and formatting your content to capture and retain your online audience’s attention.
Content Strategy & Structure
Structuring content for a website is much different than for an article or print piece because people tend to read much differently on the web. Online, for the most part, people are scanning for keywords that match the information they are looking for, only reading further if they come across something that matches their expectation. You cannot rely on your audience reading as deeply on your website as they would with a long-form document, so it’s important that your content is properly structured to promote reading on the web. Breaking up, or “chunking” your content into shorter sections also helps readers retain information. Proper content strategy includes both how your writing is presented on a page and how you write individual pieces of content such as headlines, subheadings, and captions.
Formatting Your Text
Using a typographic hierarchy is one of the most effective ways to ensure that your content is structured correctly on your website. Typographic hierarchies establish an order of importance for your content by using different text formatting such as size, color, and/or emphasis. This system makes it much easier for your readers to skim, find the information they are looking for, and comprehend your content.
This example shows how powerful typographic hierarchy can be for structuring content:
This list of bands is very difficult to scan quickly. Imagine trying to find your favorite band’s upcoming concert on an entire page of listings like this! Via TutsPlus.
Here we can see the power of typographic hierarchy. Readers can easily understand 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 find the information they need.
Proper text formatting not only helps readers find the information they need on the page, it can help encourage longer reads and deeper engagement with your text. 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 store the content on your website. Your CMS will have various content fields defined as areas to enter specific types of content that will be 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 display on the web.
Structuring Your Text Fields
While most websites will have templates designed to accommodate special content layouts, the following guidelines can be considered best practices that work for a wide variety of web copy, 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 the navigation.
- These fields do not necessarily need to be identical matches, but keep in mind that page titles will be truncated in search engine results after 55 to 60 characters. If you can’t fit your title perfectly in the space provided, at least make sure the most important keywords are visible.
- Use a straight-forward descriptive term to communicate to your reader what they will find in that section of the website (e.g. Communications Office vs. Welcome to Communications!). Using language your users are familiar with eliminates their need to guess.
- Make sure headlines are descriptive, and short (5-10 words) for easy scanning and comprehension.
- Readers may not encounter your headline in context (they might see it in a social media post or on a newsfeed, for example), so make sure it makes sense out of context.
- Front-load your headline with keywords that grab readers attention and capture what you want your reader to take away from the article. This not only helps readers get to your content quicker, it also helps 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 page’s content, which provides context for readers and helps them decide whether or not the page has the information they are looking for.
- Text should be one paragraph (two at most) and around 20 – 30 words in length.
- These paragraphs can help with SEO, so be sure to use keywords that you want people to discover you through.
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 focuses on this topic. Readers get the gist of the content, 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 page should be around 300 – 700 words in length, if it’s longer, make sure to break it up into multiple sections on the page.
- Use subheadings on your sections to help readers scan. You should be able to set a style in your CMS for your headings that will make it easier for you to be consistent.
- Provide in-page navigation for very long pages with multiple subsections. This will help your users get to the section that is relevant to them in addition to providing a model of your content.
This example from the ClimateWorks website shows how in-page navigation can break up a very long page. Each of the links on the left 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 web copy and enhance readability by breaking up long blocks of text.
- Previously, we outlined 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 is needed to understand it (for example, the creator’s name).
- Make sure to include an <alt> tag on the image that is descriptive, so that readers who cannot see the image for any reason (slow browser, using a screen reader, etc.) they will know what the image is supposed to mean. Using keywords here also has SEO benefits.
This example shows how to create alt text that accurately describes the displayed image. A reader who couldn’t see the image for whatever reason would be able to easily understand what is being illustrated. Via University of Leicester.
Proper structure is just one component of content strategy and writing effective web copy, but these basic components can be very powerful when it comes to the effect they have on your audience and how they engage with your content.
During a website redesign, there are many moving parts in each phase of the project. At Constructive, we take our clients through an investigative discovery process while our UX researchers conduct user testing and comparative analysis. We’ll iterate on rounds and rounds of UX wireframes and design comps. Once the information architecture and design are approved, it’s off to the races with implementing the CMS—then suddenly it’s time for content entry. At this moment, if this is the first mention of content needs, clients often start having panic attacks.
Without careful planning for content, you could easily find yourself two weeks from launch realizing that some of your content needs to be reorganized to fit the new site, some pieces of content need to be revised, and some copy needs to be newly drafted. Your content needs to be created, migrated, and entered, and by putting it off, many clients risk pushing their timelines out and blowing up their budget.
At Constructive, we get our clients thinking about content from the beginning. It’s the only way to avoid pre-launch anxiety attacks. We’ll get started with a content analysis during the initial discovery phase. During UX, we help set up a process for gathering content, taking into account factors such as multiple content editors with a tedious review process from a board, legal review, or other situations. Setting up a project plan to get all content written, reviewed, and approved in time for when content entry is set to begin is the critical piece for a successful project that runs on time and on budget.
If your site is content heavy, or if you plan to write a large amount of new content for the redesigned site, one tool that may be helpful is GatherContent. GatherContent allows you to manage content production for the whole team, with customizable approval workflows that let you to assign tasks and reviews to teammates. GatherContent lets you create structured templates so your authors can easily understand what sections they need to populate. You can even export your content directly to your CMS via their API.
Some of our clients don’t need something quite as robust as GatherContent. We exclusively work with nonprofits and higher education institutions, so the client may not have the budget for such a service. As an alternative, we’ll often develop a content matrix to help serve our clients’ needs. In an Excel document or Google Sheet, fields are created for every possible place on the new website that will need to be filled with content. Titles, subheads, teaser texts, body paragraphs—nothing is forgotten. Each section is clearly marked so that the team is all on the same page with who is responsible for which section.
Our content matrix can also be used as an effective workflow tool, keeping a status of what will be migrated from the old site, what needs to be developed, who will write each piece of new copy, and what the deadline is for each stage of the content development process. You’ll be able to keep track of what piece of content needs review, when it has been approved, and when it’s ready for entry. Once the CMS is built and it’s time for content migration and entry, the matrix can also be used as a way to check off what has been entered into the new site.
As a bonus, we include a second tab in the matrix for image selection. Like content, images are critical to the success of a website. (If you’re looking for help on how to select meaningful website images, check out our insight here.) Using the image inventory tab in our content matrix, our clients can keep track of which images will be moved to the new site, what images are needed, various options for images, and any pricing or terms for selected images. Similarly to the content side of this matrix, we can help our clients index all images that will be used for homepage carousels, header images, headshots of staff members, and more.
If your site is content-heavy, or if you plan to write a large amount of new content for the redesigned site, the task of content migration and entry can be extremely daunting for you and your team members. Don’t let content be the forgotten component of the website redesign process! By having a schedule and process for content development in place, it can be manageable and doable even in the tightest of timelines. Download our sample content matrix to get an idea of how this all works. Feel free to download this matrix and format it for your site and see how it helps your team stay organized!
If you have questions about how to manage the content process for a content-heavy website, get in touch!