Three Content Strategies for Responsive Web Design: Plan, Prioritize, Distill

Article Outline

For most marketers, the term “responsive web design” most likely conjures up images of web developers and wire frames. But it should bring to mind strings of sentences and chunks of text.

Content is the engine that attracts leads to begin with, then drives them through the sales cycle. And responsive web design’s chief job is to make sure that content is easy to digest, whether the web visitor is on a phone, tablet, or desktop.

Responsive web design is an opportunity to reimagine content so that each sentence attracts more readers and gathers more leads.

What is responsive design?

First, a little background on responsive web design. The concept is simple – create a single website that automatically optimizes its design for mobile or desktop, depending on which device is being used by the web visitor. One easy way to discover whether a website is responsive is: in desktop view (and in window view, not full-screen view) grab the bottom right corner of the website and slowly shrink it to the size of a smartphone. If the website transforms into a mobile-friendly view as it shrinks, it is responsive. If it simply shrinks into a hard-to-read, scroll-and-pinch website, it is not responsive.

Responsive design starts with the understanding that mobile is not just another platform for the same content. The rapid rise of mobile has changed the shape, organization and size of content. And, people expect fundamentally different things out of mobile content.

These expectations run across all components of a company’s content campaign — whether it is email marketing, social or web content. Your website’s content must be responsive and optimized for mobile, but so should your email marketing templates and social campaigns.

Why you need responsive design

If you don’t have responsive design, you need it. Google is penalizing search rankings of companies without responsive design. And mobile web traffic is so omnipresent that all websites need to intelligently serve mobile and desktop users from the same website.

A couple quick stats: Mobile drives 41 percent of all paid search clicks and 31 percent of all paid search spending (Merkle RKG) and 53 percent of all email opens (Litmus). Given mobile trends, these numbers won’t slow down anytime soon.

The results from creating content that is truly optimized for mobile can be staggering. Act-On found a 93.5 percent increase in leads from responsive design. What other simple solutions could immediately double your sales leads?

Three steps to optimize your content for responsive design.

  1. Plan Across Departments

Responsive design is not just a matter of turning the digital team loose on web development. It’s a team effort between copywriters, designers, and strategists.

Effective planning will assure that content, coding, and design all dovetail to make your website a lead-generating machine. Start from the beginning by nailing down the basics: web visitor profiles, visitor motives, and desired outcomes. Who is visiting your website? Why? What do you want them to do once they get to your site?

Cross-department collaboration from the outset will assure that the project is a balance between design bells-and-whistles, and organized and effective content.

  1. Prioritize Content in a Clear Hierarchy

Prioritizing content is essential in responsive web design. When the real estate of a desktop browser page shrinks to hand-held size, content gets jumbled. A wide, multi-column webpage is squeezed into a single-column mobile page. If the website is not designed correctly, some of the most important content can end up at the bottom of the page, requiring a long (too long) scroll to reach.

Assigning priority levels to content creates will create a structure that assures your most important content rises to the top. Create a content hierarchy by identifying content according to tiers. This identification should ideally occur in the marketing or copywriting teams, and be communicated clearly to the designers and project managers. This collaboration will lead to a design that preserves the content hierarchy for mobile viewers. 

Distill Content Down to Mobile Size

Just like software or operating system users expect functional and intuitive design, today’s readers expect content that has been expertly crafted into concise chunks.

Think of your content strategy as similar to UI or UX for readers. Just like user experience design takes time, effort and iterations, content should be worked over several times with the reader in mind. The hidden structure will have an enormous effect on usability (or readability, in the case of content).

If after the final draft you are still presenting the reader with large chunks of gray text, you need yet another round of content distillation. Keep breaking content down until you are left with bullets, blurbs and succinct text that’s broken up with multi-media offerings like photos and videos. Consider turning data-heavy chunks of complex text into an infographic, where the pairing of text and visuals can turn data into an easily digestible visual.

Vertical chunking –  breaking text up into vertical chunks that can be placed side by side, each with its own headline and photo – allows readers to scan sideways and consume the vertical chunks piece by piece.

3

This bite-sized content delivery system is more visually appealing than a wall of gray text, signaling to the reader that the writer and the designer have already done the work of identifying individual thoughts, crafting them into tight text, and presenting them in a succinct manner.

Responsive design is not just one more thing to add to an already too-long to-do list. It’s not an annoyance or a low priority. It is a chance to sharpen content, refine your web design, and please your mobile buyers, in one single project.

~ Want to learn all the tricks to responsive web design, including managing the development process, estimating costs and going mobile-first? View the entire webinar Responsive Design: 10 Do’s and Dont’s for Web Pages and Email.

What's New?