Chapter 2. Responsive Content

If you think that HTML and CSS are the most important parts of a website, it’s worth looking at it from a different perspective. Users are coming to your website for the content (and functionality), not to admire the designer’s talent or the developer’s coding skills.

Your website’s users don’t care if your site is responsive, and most of them probably don’t even know what “responsive web design” means. They aren’t thinking about whether they’re using the appropriate device for the site, or whether their screen is going to be the right size. They often don’t even care what your website looks like. They just want to easily get to the information or functionality they need, on whatever device that they happen to have.

That’s why, when you’re designing a website, you should think about your content first.

If you do it the other way around—create a design and try to fit your content in around it—your content will always be stuck in second-class status, and you are less likely to give your users what they need.

With responsive websites, you need to think about content first, so you can make sure your content will work well on small screens. If you’re using existing content from a fixed-width website, you’re going to have a difficult time trying to shoehorn it into a layout for a smaller screen. If you’re starting from scratch with new content, you need to make sure it is optimized for any screen size, not just one screen size.

Content Strategy

The phrase “content strategy” has been getting a lot of attention in the last few years, especially after Kristina Halvorson’s book Content Strategy for the Web (New Riders) was published in 2009.

Before that, it was uncommon for companies to talk about having content strategies for their websites. When we talked about content for the Web, it was in the context of creating it, to fill all the spaces on our websites that needed to be filled with content.

And really, we often created sites without thinking about strategy at all. If our company or project needed a website, we would first design a site that looked nice and matched our branding. Next, we made a list of all the stuff we had that we wanted to put on the site (content), and then we tried to fit all of our stuff into the newly designed site.

If we were lucky, we had an information architect who created a nice structure to organize all of our content. If not, it just all got stuck in there somehow. Whatever content we had ended up on the website somewhere. After all, it costs very little to make a website bigger (more content and more pages) from a technical standpoint, so why not just put everything on the site, so it will always be available in case somebody needs it, forever and ever?

But then at some point we realized that it matters what’s on our websites.

The content strategy refers to everything that goes into both planning and managing your content. This includes the text, as well as other forms of communication like pictures, video, and audio. And it’s not just about what goes on your site, but also about how the site functions.

Start by looking at the big picture. What should the website accomplish? What do you want users to do when they visit the website? What’s a successful user interaction? How does the website support your business or project goals? How will user needs be satisfied?

Developing a content strategy takes work, but your finished website will be much better if you’re talking about the content before you create the visual design, rather than after.

For more information on content strategy, consult the following resources:

Note

Not sure of the differences between “content strategy,” “content marketing,” “content governance,” and all the other content-related buzzwords? Check out Melissa Rach’s UX Magazine article, “Content Strategy and Its Cousins” (http://uxmag.com/articles/content-strategy-and-its-cousins).

Mobile Content Strategy?

Recently, because everybody’s been focusing on how to make websites that work on mobile devices, the term “mobile content strategy” has come into vogue. Content strategy is definitely important, so mobile content strategy must be super-important, right?

Not quite so fast.

Remember, there’s no longer a hard-and-fast line between mobile and nonmobile devices. And as you’ve learned so far in this book, our goal is to create websites that works across all devices, regardless of whether they’re mobile devices or not.

So you don’t need a separate mobile content strategy. In fact, a mobile content strategy is often the same thing as a regular web content strategy, except you stop ignoring mobile.

You need to continue everything you’ve been doing as part of a solid content strategy, but keep in mind that users will be accessing your content from a wide range of devices and in a wide range of contexts— you need to make sure your strategy is not leaving them out.

Producing content that works as well on mobile as it does on desktop-sized computers gives you a new set of challenges that you may not have previously considered. Make sure you’re considering them now.

Managing Content

As you’re designing a responsive website, you’re probably starting out with a pile of potential content: either what was on your old website, pieces of offline content, or just ideas of what should go on the site.

The first thing you need to do is think about what to do with all this content.

Use Only What You Need

First: you need far less content than you think you do.

Stay away from the idea that you should put everything on your website, just in case somebody might need any particular piece of content. Sure, online storage is so incredibly inexpensive these days that we pretty much think of it as free, but there are definite costs to all of the content you put on your site.

The first cost is to the user. The more content that’s on your website, the more content the user needs to sort through and pass by to get to the content she is looking for.

Sure, some of it may be of interest if she happens to encounter it on your site, but much of it is not. Really, does anyone need to see the past 10 years’ worth of press releases your company has issued?

Unnecessary pages on your website will clutter up the navigation and search results. Unnecessary content on a page will force the user to scroll more. The more unnecessary things there are in the way, the harder it is for the user to find what he needs, and the more likely he will give up before he finds it.

The second cost is to the website owner, who needs to devote additional resources to keeping track of all the content, organizing and reorganizing it, keeping it updated, and continually checking for broken links. The more content that’s on your site, the more likely it is that some of it will be outdated or incorrect—a potential liability if you’re giving out wrong information. You can’t just add content to your site and leave it there: it does need to be maintained.

The best time to pare down your content is before you start designing a new site, or before you start redesigning your existing site. The design process will be easier with less content, and you’ll have to do less work while building the site.

How to Pare Down

When determining what to keep, think about both your business goals and user needs.

For example, “Post all our press releases on the website” is not a business goal. Instead, a goal should be more like “Ensure media contacts can get the information they need to write articles about our business.”

Perhaps you currently post links to the 10 most recent press releases on your website’s front page, because you’re proud of your accomplishments. But that takes up a lot of real estate on the front page. The vast majority of your users are not members of the press, and the rest of the world just isn’t interested in reading your press releases. Having press releases available on a dedicated media page will make sure members of the media can still find them—they know to look for that page—and you’re not forcing everybody else to look at links that they’ll never click on. If you really want to share information about recent accomplishments, write them in a different format for the general public: short blurbs using straightforward and simple language, not business-speak.

Think too about the length of each individual piece of content. If your About Us page is 1,000 words long, you’re saying far too much. It doesn’t need to be a long and rambling story of how your company was founded, including the names of every board member for the past 30 years. Most users coming to that page want to know, very succinctly, what your website or company does. If that information isn’t provided in the first couple of sentences, users likely won’t read any further to look for it. If you absolutely must list all those board members, put them on a separate page.

Look also for content that is redundant. Even if your CMS makes it easy to put pieces of content in multiple places, don’t do it unless it’s really necessary. Not only does it take up space on the website, but it can be confusing to users. It will also mean that the same content will be showing up multiple times in search engines, which is confusing to users and can decrease your search rankings if the search engine perceives those pages to be duplicate content.

Later in this book we’ll talk about a small-screen-first approach to design, where you design a layout for small-screen devices before moving on to layouts for wider devices. Designing this way is a really great help to your efforts to pare down. When you’re trying to fit your content in a design that will fit on a small screen, it forces you to consider what’s really important and gives you a clarity that’s harder to find when you’re designing your content for a desktop-sized site first.

Content Audit/Inventory

When redesigning an existing site, it’s a good first step to do a content audit, which is an inventory of all the content you currently have. If it’s a large site, there are probably things in there that will surprise you.

Go through the list and decide what you want to keep and what to get rid of, what new content needs to be created, and who is responsible for editing and developing each piece of content.

Once you get everything in a list, it’s easier to look at it and decide what to do with it all.

Your list doesn’t need to include every piece of content, but should have at least the categories and major pieces. If it’s a new site, you should come up with a list of the content that you plan to have on the site, and a timeline for producing it.

You can learn more about content audits by reading Donna Spencer’s UXmastery article, “How to Conduct a Content Audit (http://uxmastery.com/how-to-conduct-a-content-audit/).

Developing Content

Once you’ve figured out what you need and where it goes, you also need to think about what the content looks like.

How Users Read

Have you ever wondered how users read on a website? As much as we’d like to think they go to every page on our site and read it top to bottom, they won’t.

“If you build it, they will come” is not the motto of web content creators—or, at least, it shouldn’t be. But you could be easily fooled by the sites that are filled with lengthy press releases, self-promoting company information, and other nearly useless content that nobody actually reads.

Just because you think your product/idea/event is the most wonderful thing in the world, it doesn’t mean that anybody wants to read thousands of words about it—not even the people who have already displayed an interest by visiting your website.

Users will browse through your site trying to find the information that they want or need. You need to make sure that everything else isn’t getting in their way.

Scanning

Users scan when they read a web page. Website content isn’t nearly as compelling to the rest of the world as it is to the website’s owner, even if it’s great content.

Users read in dribs and drabs. A little here, a little there. They’ll skim through a page, their eyes briefly focusing on links, headings, images, and bits of text.

There are millions of web pages competing with yours for each user’s attention, so don’t waste users’ time. Make it as easy as possible for them to get the information they need.

Inverted pyramid

One of the main keys to doing this well is to use a journalism technique called the inverted pyramid.

Back when newspapers were only issued on actual paper instead of on websites, editors had to deal with the problem of having to plan for a set amount of physical space that they had to fill with words and pictures each day. They had to produce the exact amount of content to fill that space, not more and not less. But it was pretty much impossible to plan everything out ahead of time, since the news hadn’t happened yet.

So when reporters wrote articles for the newspaper, they had a target word count to provide, but they also understood that if more important news happened, their stories might have to be shortened to provide space for the more important articles.

To make this easier, reporters would put the most important details of their stories in the first few paragraphs, and fill the following paragraphs with progressively less important details as well as background information. That way, if the editor needed to shorten a story to fit in a smaller space, any number of ending paragraphs could be lopped off without removing the key points. Figure 2-1 will give you a better idea of how this works.

Use the inverted pyramid approach to make sure users are seeing the most important parts of your content.
Figure 2-1. Use the inverted pyramid approach to make sure users are seeing the most important parts of your content.

You can use the same idea when writing content for the Web—not because an editor will cut off the end of your story, but because the user is likely to do so, by not reading all the way to the end. Make sure the most important details come first, and then follow those with the less important details, which the user may or may not get to.

Headings

If your page content is more than a couple paragraphs long, it could almost certainly benefit from being split up into sections.

For your users, the benefits of using headings include:

  • Users can more easily understand the page structure, and get a better idea of what type of content is on the page, before they start reading.

  • They can jump ahead to the parts of content that are relevant to them.

  • People who are using assistive technology (e.g., blind users using screen-reading software) can navigate through the page content rather than having to read it all straight through.

  • Users can find their place more easily while scrolling.

Benefits of headings for the website owner include the following:

  • The page’s search engine placement will be improved by letting the search engines know what the key topics of the page are.

  • Content authors will be able to produce content that works better on the Web.

To write good headings, first divide your content into sections that address different main points.

Headings should be as short as possible to get the point across, and contain relevant key words. Ideally, each heading should start with the key words, to make skimming easier.

Headings should give a descriptive preview of the content that follows. They shouldn’t be teasers.

Short and sweet

As users are scanning the page, they also tend to consume content in small pieces. Dense text will turn off users, and often keep them from reading the content at all.

Paragraphs should be short, generally no more than 100 words long.

Use bullet points when appropriate, if the content would make sense as a list. Bullets are much easier to scan and digest than the same content in paragraph form.

Plain Language

The words you use in your content matter, as they provide the tone. But they also determine whether or not the user can understand your content.

The average reading level of US adults is generally accepted to be around the eighth- or ninth-grade level, according to studies like the 2003 National Assessment of Adult Literacy, sponsored by the National Center for Education Statistics (NCES) (http://nces.ed.gov/NAAL/). Nearly 50% of adults read below the sixth-grade level.

Those of us who are writing and editing content for the Web tend to be relatively well educated, and our reading level generally reflects that. But we need to remember that our audience is not us.

It’s easy to make the incorrect assumption that your websites’ users must be smarter or better educated than everyone else. After all, they were smart enough to choose your sites, right? But by not having accessible language, you’re losing potential customers or missing out on giving information to people who might really need it.

In recent years, a plain language movement has emerged, where content creators make an effort to produce content that is easy to understand, as well as being arranged in a logical structure that makes it easier for users to find what they need.

A side benefit of using plain language is that it actually helps all users. Most people want to get their information in a hurry—they have the entire rest of the Internet to read, after all. Even for high-literacy users, plain language will help them consume and navigate content more quickly.

You’re also assisting users who don’t speak English as their first language. This doesn’t just mean immigrants. It means foreign tourists who want to visit your restaurant, and residents of other countries who want to order your products. If your website provides information, it may not only be residents of your own country who are interested in reading that information.

A good starting point for plain language is to use simpler words, shorter sentences, and shorter paragraphs when possible. By paring down your content as discussed previously, you make sure low-literacy users don’t have to spend a lot of extra time slowly reading through content that isn’t relevant to them.

Here are some resources to help you get started with plain language:

Content Parity

When thinking of what you know about your audience, the first thing you need to consider is that most of what you “know” about them is based on assumptions, which may or may not be correct.

It’s a common mistake to assume that users need or don’t need certain content based on what device they’re using.

For example, it’s a frequent assumption that mobile phone users are “on the go,” so they only need location-based information, such as the address of the restaurant they’re going to, or whether or not their flight is on time.

But now that mobile phones have become ubiquitous, we use them pretty much anywhere, including when we’re right next to our laptop or desktop computers.

Phones now feel like just another computer, and people expect the websites they view on their phones to have all the information that they would get on a desktop or laptop computer.

Everybody should have access to every part of a website, regardless of the device they’re using. This concept is called content parity.

One of the advantages of responsive design is that we can provide the same content for all users regardless of device, but at the same time provide that content in a way that is optimized for the device in use.

As you’ll learn in Chapter 5, there are lots of things you can do to present content differently based on the screen size of the device.

Content Governance

If your website has content, and they all do, you need to have a plan for content governance. This simply means taking care of the content once it’s on your website.

You can’t just post content and forget about it. Information becomes obsolete or incorrect, links become broken, and so on. You need to have a good plan for content governance before the content is posted on your site, or else you’ll likely never get around to it.

Creating Timeless Content

One thing you can do to make your content easier to maintain is to make it as timeless as possible.

Not everything can be timeless, but a good way to go about this with each piece of content is to look at the content and imagine you happen to come across it in a year’s time. Does it still stand on its own?

Include years in dates whenever possible. Have you ever heard about a great annual event you wanted to attend, went to the website to see it prominently described as happening on “October 15,” and had no idea if that content described this year’s event that’s coming up, or last year’s that has already happened?

If you know information is only valid for a certain amount of time, make a note of that in the content. If you forget to go back and change it or take it down, at least someone coming across it will know it’s no longer valid.

Adaptive Content

Not only will your content be viewed at different screen widths as part of a responsive website, but it could also be viewed in different contexts entirely.

For example, Figure 2-2 shows an article by Rachel Nabors as it is displayed on the A List Apart website.

Viewing an A List Apart article on a desktop monitor.
Figure 2-2. Viewing an A List Apart article on a desktop monitor.

But some people read posts and articles in an RSS reader, which relies only on the HTML and strips out any of the site’s design, as you see in Figure 2-3.

Viewing an article in an RSS reader application.
Figure 2-3. Viewing an article in an RSS reader application.

It’s also common to use services like Instapaper (http://www.instapaper.com/) to view the main content of web pages without all the extra fluff such as ads and navigation, or to save articles to be viewed later. You can see what this looks like on a desktop computer in Figure 2-4, or on a mobile device in Figure 2-5.

Viewing an article in Instapaper on a desktop computer.
Figure 2-4. Viewing an article in Instapaper on a desktop computer.
Viewing an article in Instapaper on an iPhone.
Figure 2-5. Viewing an article in Instapaper on an iPhone.

We can no longer think of our content just in terms of how it’s laid out on our websites. Instead, we need to think of it as a series of chunks, such as the title, author name, and body content. These different chunks are called metadata, which essentially means “data about data.”

If you use a CMS, you may have been doing this all along. There are probably separate fields for title, article date, and author name. In responsive design, we adapt the layout depending on how much screen real estate is available. On a small screen, the title, date, author, and body text may appear vertically one after another. On a wider screen, perhaps the date and author are off in a box on the side. These layout changes are only possible if the pieces are separated out into individual chunks.

If the article is reproduced in another application, the chunks allow the content to be displayed in a way that makes sense.

What about other types of content? For example, consider an ecommerce site. Instead of a description field that has all the details about the item for sale, use separate fields for color, size, material, use category, and so on. Not only will this allow you to easily change the layout of the page depending on screen width, but it will also allow you to create more powerful search and navigation, to give users a faster path to what they’re looking for.

By giving your content structure and attaching metadata to it, you give it more power to adapt to different screen sizes and to be easily displayed outside of your website.

Summary

Until recently, content has always been thought of as an afterthought to the design, but in recent years the content strategy has gained increasing importance.

Starting with the content before the design will help you create a website that meets your business goals as well as the users’ needs.

To manage your website’s content when moving to a new site, start with a content audit to see what you have. Go through it and pare it down, using only what needs to be on the site. Unnecessary content just makes the site more difficult for both the users and the site owner.

Make sure that content is concise and written in plain language so that it’s easy for users to consume. Users read web pages by scanning, so create short paragraphs and use headings to separate the content into sections. Make sure the most important information is at the top of the page, in case the user doesn’t read all the way to the bottom.

Don’t make assumptions about what content users will want based on the devices they are using to access the site. All users to your site should have access to all the content.

In addition to adding content to the newly designed site, put thought into how the content will be managed after the site launches. Have a plan for keeping things updated. Create timeless content where you can.

Divide your content into chunks that can be rearranged on the page, or easily moved to other media.

In the next chapter, Chapter 3, we’ll start to look at the nitty-gritty of the code behind responsive sites.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset