Responsive Design, the coding technique making one design work across multiple platforms – web, mobile, tablet – is gaining traction in our industry and rightfully so. With smart phones and tablets, users are accessing their information on the go and on a variety of different devices.

But what is design without content? A useless layout. Content is what people want. Good content will…

  • Solve problems
  • Answer questions
  • Convert a prospect to a client and a client to a rabid fan

But with all the small screens out there and the constant noise you’re competing with, its hard to get your content to grab the user’s attention. Enter Responsive Content.

I found a great description of responsive content from Seattle web developer Hans Sprecher

Responsive content fills responsive design. Like the design, it is flexible—expanding based on screen resolution and medium to match the user’s context.

To understand responsive content, let’s take a look at newspapers. Yes, newspapers – the print kind. A great newspaper article has 4 elements that make it effective. These same elements are what make responsive content work…

  1. Headline – the attention grabber
  2. The lede – the hook
  3. Body – the meat
  4. Conclusion – the wrap up

Let’s look at each of these as they relate to responsive content and responsive design…

Headline – the most crucial part of the content

Volumes have been written about the importance of the headline. A good headline will work for you in so many ways. A good headline will:

  • Grab the attention of the target audience, getting them to click
  • Set the tone for what the article is all about
  • Contain some keywords for SEO (search engine optimization)

Copyblogger, a leading authority on content marketing, has written many blog posts about the headline. In fact they dedicated an entire week to “killer headlines“. It’s that important. To paraphrase Copyblogger, the keys to writing great headlines are to:

  • Know what the audience needs and write to those needs
  • Pick the style – the how to, the list, the topical, the controversial
  • Test it – try using 2 different headlines in an A/B split test, see which one works better or simply ask some people you trust

The headline is also important when talking about responsive content. The headline is what transcends all device restrictions.

The headline will appear on any screen. The headline is what the search engines will use to list your content in the search results. The headline is what people will copy and paste when sharing your content with their fans and followers. Yes, it is that important.

The lede – the hook, the first sentence or two of the post

This is the element that makes or breaks responsive content. The lede is the piece of the article that sucks you in and keeps you wanting more. On a smart phone the lede is the element that is seen the most second only to the headline.

A responsive website will use media queries and semantic markup to determine what information will appear on what device. The lede is generally the part of the content that makes the cut on all devices.

A good lede should be both an extension of the headline as well as the hook to get you into the rest of the article. The lede should tell the user something they didn’t know. Or it can ask a question and offer part of the answer.

The harsh reality of responsive content is that sometimes the lede is all that will be read. Some will simply read the lede and move on. Some will actually determine the quality of the article based solely on the lede and share accordingly.

Body – are you still reading this?

This is tricky because attention spans are very short these days. But, the body is still important. If you’ve managed to grab them with the headline and the lede hooked them then maybe they will read a little further.

The body is where you can breathe a little, but not too much. The body is where you want to make your detailed points but you need to do this with a little brevity…

  • Use images, charts and video – optimize these for quick loading and SEO
  • Bulleted lists – these are easy to scan and should contain usable information
  • Short sentences – write it, then go back and take out anything not completely essential

Save the long drawn out content for white papers. In fact, avoid long drawn out copy altogether.

The reader, especially on mobile, is still scanning in a way. They are looking for the bits of content that answer the question that got them there in the first place. Keep your copy scannable.

Conclusion – this is where you convert

Conclusions in responsive content are bit different from a traditional newspaper article in that you want the user to do something. A good conclusion to the content on any web page should do the following:

  • Reinforce the main points of the content
  • Ask a question
  • Have a call to action

You want to remind the reader why they clicked on the article in the first place. Take them back to the lede knowing that they’ve learned something since they first read it.

Reinforce the message. These pieces of content are not simply there to fill space, they need to educate, entertain, inspire.

Ask a question. This is so underutilized. By asking a question you turn a passive reader into a willing participant. Get them thinking about what they just learned and how they can apply it in their world.

And finally, include a call to action. This is very important when it comes to responsive content. Some websites will add a call to action to the side bar of every page. This is great and it converts, on a website.

But, what if that side bar gets stripped out by your responsive design?

Panicked yet? Responsive coding will often remove elements of a page that are deemed unnecesary in order to save space for smaller screens. The extra buttons and navigation elements usually get the axe.

Don’t worry, there is a simple fix. Just include a call to action in the content. Use the last sentence to ask the reader to do something. What do you want them to do when they finish reading? Well, there’s your call to action. These are busy people and they are distracted. Get to the point.

How responsive is your content? Does it work on any device? Need help? Let us know, we have the team to make you a content marketing superstar.

Jon-Mikel Bailey - Before co-founding Wood Street in 2002, Jon worked in sales, marketing and business development for technology and marketing firms. A popular speaker, he gives seminars on marketing, internet marketing, branding and web design to chambers of commerce, trade associations and colleges. He has a BFA in Photography from Frostburg State University and still shoots photos for Wood Street clients.

3 Responses to “Responsive Design Needs Responsive Content
  • Hi Jon,
    Your headline caught my attention – nice move linking responsive design to content. Digital continues to show an uptick in budget allocation because both design and content bring remarkable ROI. And, let’s face it, it’s always fun to watch a prospect transform into a rabid fan.

    • Thanks Catherine. To me they are inseparable. It is so important that your content works with your responsive design.

  • I liked this post. Head lines should be catchy, then the first sentence should cover the scope of the paragraph, the body is the crucial part and this is the reason audience read the document, and then conclusion gives you proper solution.

Comments are closed.