Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Content Strategy Within The Design Process

The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative Knol on content strategy defines it as follows:

“Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.”

This definition is a great place to start. Although the discipline has clearly evolved, this breakdown of its scope makes perfect sense. The aspects of content strategy that matter most to Web designers in this definition are design (obviously!), development, presentation and production. In this article, we’ll concentrate on the relationship between content strategy and design in creating, organizing and displaying Web copy.

As a writer and content strategist myself, I’ve worked with designers in all of these areas and find the creative process highly enriching. I’ve been fortunate enough to work with designers who are quick to challenge ideas that are unclear or unsound, who are brilliant at creating striking visual representations of even the most complex concepts. A lively interplay between design and content is not only fun, but is how spectacular results are achieved. This is why content strategy should matter a great deal to designers.

What Is Content Strategy, And Why Should A Designer Care? Link

Content strategy is the glue that holds a project together. When content strategy is ambiguous or absent, don’t be surprised if you end up with the Internet equivalent of Ishtar1. When content strategy is in place and in its proper place, we’re on our way to producing beautiful and effective results.

Slide from The Language of Interfaces3 by Des Traynor.

While wrapping one’s head around content strategy might be difficult, the thing that makes it work is very simple: good communication. Sometimes a project moves along like a sports car on a superhighway. Other times, the road is so full of bumps and potholes that it’s a wonder we ever reach our destination. As we explore the relationship between content strategy and design, I’ll detail how I keep the channels of communication open and go over the workflow processes that I’ve used to support that effort. I hope that sharing my experiences (both positive and negative) will help you contribute to and manage projects more effectively and deliver better products to clients.

How To Get Started: The First Step Is The Longest Link

Project manager: We need a landing page for client X.

Designer: I can’t start the design until I see some content.

Writer: I can’t start writing until I see a design.

You may find this dialogue amusing… until it happens to you! At our firm, we find that the best way to get past such a standoff is to write first. This is because content strategy, at a fundamental level, frames a project for the designer. As a content strategist, my job is to articulate the why, where, who, what and how of the content:

  • Why is it important to convey this message? This speaks to purpose.
  • Where on the website should the message appear? This speaks to context.
  • Who is the audience? This speaks to the precision of the message.
  • What are we trying to say? This speaks to clarity.
  • How do we convey and sequence the information for maximum impact? This speaks to persuasiveness.

Bringing it down to a more detailed level, let’s consider a landing page. A content strategist will determine such things as the following:

  • Audience
    Is the audience sophisticated? Down to earth? College-level? Predominately male? Female? Etc.
  • Word count
    Some pitches scream for long copy, while others must be stripped to the bare minimum. SEO might factor into the equation as well.
  • Messaging priorities
    What is the most important point to convey? The least important? What needs to be said first (the hook)? What needs to be said just leading up to the call to action?
  • Call to action
    What will the precise wording be? What emotional and intellectual factors will motivate the visitor to click through?

Clear direction on these points not only helps the writer write, but helps the designer with layout, color palettes and image selection. When we start with words, we produce designs that are more reflective of the product’s purpose.

Landing pages are a great place to try this workflow, because in terms of content strategy, they are less complex than many other types of Web pages. A product category page, on the other hand, might have a less obvious purpose or multiple purposes, considerably greater word counts, more (and more involved) messaging points, and a variety of SEO considerations, all of which would affect its design.

Quick Tips for Getting Started Link

  • Make sure someone is specifically responsible for content strategy. If strategic responsibility is vague, your final product will be, too.
  • Slow down! Everybody, me included, is eager to dive headfirst into a new project. But “ready-aim-fire” is not a winning content strategy. Make sure everyone is on the same page conceptually before cranking out work.
  • If content strategy falls on your shoulders as a designer, cultivate an understanding of the discipline. Resources are listed at the end of this article to help you.
  • Make sure designers and writers understand what their roles are — and are not. There’s no need for writers to tell designers how to design, or for designers to tell writers how to write.

Perfecting The Process: Break Up Those Bottlenecks Link

Project manager: How are things coming along?

Developer: I’m waiting on design.

Designer: I’m waiting on content.

Writer: I’m waiting on project management.

Web development projects in particular involve a lot of moving parts, with potential bottlenecks everywhere. The graphic below describes our Web development process, with an emphasis on the design and content components. Chances are, whether you are freelancing or at an agency, at least parts of this should look familiar:

Design & Content Process4
Link: Larger version5 (Image credit: Chris Depa, Straight North)

The process is by no means perfect, but it is continually improving. In the next section, we’ll look at the many types of content-design difficulties you might experience.

To help our designers lay out text for wireframes and designs, we utilize content templates based on various word counts. These templates also incorporate best practices for typography and SEO. When the designer drops the template into a wireframe, it looks like this:

Content in wireframe
SEO content template in a wireframe.

The use of content templates not only takes a lot of guesswork out of the designer’s job, but also speeds up client reviews. When clients are able to see what the content will roughly look like in the allotted space, they tend to be more comfortable with the word counts and the placement of text on the page.

Communication can be streamlined using project management software. We use Basecamp, which is a popular system, but many other good ones are available. If you’re a freelancer, getting clients to work on your preferred project management platform can be an uphill battle, to say the least. Still, I encourage you to try; my experience in managing projects via email has been dismal, and many freelance designers I know express the same frustration.

The big advantage of a project management system is that it provides a single place for team members to manage tasks and interact. Internal reviews of design templates is one good example. The project manager can collect feedback from everyone in one place, and each participant can see what others have said and respond to it. Consolidating this information prevents the gaps and miscommunication that can occur when projects are managed through multiple email exchanges. Designers can see all of the feedback in one place — and only one place. This is a big time-saver.

Quick Tips for the Creative Process Link

  • Make sure someone is specifically responsible for project management.
  • Whether or not your process is sophisticated, get it down in writing and in front of all team members before the project starts. This really helps to align expectations and keep communication flowing.
  • Meet at regular intervals to discuss status and problems. Hold yourself and others accountable.
  • Get approvals along the way, rather than dump the completed project in the client’s lap. Having clients sign off on a few pages of content and one or two templates really helps to align the creative process with client expectations, and it reduces the risk of those massive overhauls at the tail end that demolish budgets and blow deadlines.
  • Writers and designers should discuss issues as quickly, openly and thoroughly as possible.

Conflict Resolution: Why Can’t We All Just Get Along? Link

Designer: All these words are boring me.

Writer: All these images are confusing me.

Project manager: All these arguments are killing me.

No matter how clear the strategy, no matter how smooth the process, design and content will conflict somewhere along the line in almost every project. In fact, if creative tension is absent, it may well indicate that the project is in serious trouble. Here are the issues I run into on a fairly regular basis, as well as ideas for getting past them.

Making Room for SEO Content Link

Big chunks of content are bothersome to designers; even as a writer, I worry about high word counts turning off some of our audience. However, when SEO considerations demand a lot of words on a page, there are ways to make everyone happy:

  1. Tabs are a nifty way to hide text.
    Tabs allow you to keep the page tight vertically. Even more importantly, they enable visitors to easily find the information they need — and ignore what they don’t need. Below is a tabbed product area in the Apple Store.

    Apple Tabs6
    The Apple Store7

  2. Keep SEO content below the fold.
    This is a compromise, because an SEO strategist would prefer optimized content to appear above the fold. However, if a website is to have any hope of converting traffic brought in by SEO, then visitors need to see appealing design, not a 300-word block of text.

    SEO below the fold8
    The Movies Now9 landing page.

  3. Step up creativity on non-SEO pages.
    For many websites, the pages that are most important to SEO have to do with products and services, where conveying features and benefits is needed more than wowing visitors with design. Conversely, pages on which awesome design matters most are often unimportant for SEO: “About,” bio and customer service pages, for example.

    Carsonified Team Pages
    Carsonified’s team pages.

Clarity vs. Creativity Link

We fight this battle over what I call “design content” all the time — primarily with navigation labels, home-page headers and call-to-action blocks. At a fundamental level, it is a battle over the question, “Which wins over the hearts and minds of visitors more: awesome design or straightforward information?”

Making the labels for navigation straightforward is a fairly established best practice. Predictability is important: if visitors are looking for your “About” page, and they finally stumble on it by clicking on “Be Amazed,” then the emotion you will have elicited is irritation, not adoration. Be as creative as you want with the look and feel of the labels, but to maximize the user experience, the text and positioning of the labels must be as vanilla as possible.

For insight on how to achieve clarity, read “The Language of Interfaces.”

Design of the header on the home page
Rotating header images and other types of animation are rather in vogue these days, and they’re a good way to convey a thumbnail sketch of a firm’s capabilities and value proposition. Content must convey information, but the header must work on an emotional level to be effective. Writers must take a back seat to designers! The Ben the Bodyguard home page (below) starts to build a connection using a comic character and storyline. This is different than most sites that simply talk about feature after feature.

Ben the Bodyguard10
The design should tell a story. (Ben the Bodyguard11)

Call-to-action blocks
Before all else, make sure your website’s pages even have calls to action, because this is your opportunity to lead visitors to the logical next step. A call to action could be as simple as a text link, such as “Learn more about our Chicago SEO services12.” Generally more effective for conversion would be a design element that functions almost as a miniature landing page.

Much like landing pages, the wording of the call-to-action phrase must be crystal clear and be completely relevant to the page to which you are taking visitors. Yet impeccable wording is not enough: the design of the content block must be captivating, and the text laid out in a way that makes it eminently readable.

Designers can get rather snarly when I tell them their design for a call to action needs five more words: it might force them to rethink the entire design. Many times, though, a discussion with the designer will make us realize that we don’t actually need those extra five words; in fact, we’ll sometimes hit on a way to reduce the word count. The creative interplay mentioned earlier makes a huge difference in this all-important area of conversion optimization.

Calls to action
Calls to action require excellent design and content.

Quick Tips for Conflict Resolution Link

  1. Keep the lines of communication open between all team members and the client.
  2. Select a project manager with great communication skills and an objective point of view.
  3. Stay focused on the purpose of the design: is it to persuade, motivate, inform or something else? Creative disagreements should never be theoretical; they should always be grounded in what will increase the real-world effectiveness of the work at hand.

Long-Winded Writers Vs. Lofty-Minded Designers Link

One thing I run up against continually is my own tendency to say too much and a designer’s tendency to say too little. Ask a writer what time it is, and they’ll tell you how to make a clock. Ask a designer what time it is, and they’ll give you a stylized image of a pendulum. Neither answer is particularly helpful!

These opposing mentalities pose challenges in Web design. Does an image alone convey enough information about a product’s key benefit? Will the length of a 200-word explanation of that benefit deter people from reading it? How intuitive can we expect visitors to be? How patient?

This is when having a process that encourages communication between team members makes a difference. I wish I had a secret formula for resolving conflict, but I don’t. I know of only two ways to balance design and content philosophies, and one of them is to talk it out as a team. As I said, communication is at the heart of an effective content strategy, and we have to resist the temptation that some of us have to withdraw into a shell when we encounter confrontation.

The other way to resolve conflicts — astoundingly underused, in my experience — is to get feedback from target users. Simply showing people a Web page and then asking for their key takeaways will tell you just about all you need to know about how effective you’ve been in getting the point across. Our opinion of our own work will always be subjective. Furthermore, because we’re emotionally invested is what we’ve created, discussing its flaws calmly and collectedly is difficult. Users are the ultimate judge of any creative effort, so why not take subjectivity and emotion out of the equation by going directly to the source?

Resources Link

  • The New Rules of Marketing and PR13, David Meerman Scott
    Explains content strategy better than anything I’ve read. The third edition was published in July 2011.
  • “Content Strategy,” Google Knol
    For a thorough overview of content strategy and links to books, blogs and other resources, check out this fantastic Knol.
  • Call to Action Buttons: Examples and Best Practices14,” Jacob Gube
    To promote creative compatibility, designers and writers alike should study this Smashing Magazine article.
  • Top Ten Mistakes of Web Management15,” Jakob Nielsen
    For insight into design-related project management, read this post by the brilliant Web usability expert Jakob Nielsen.

(al) (fi)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Brad Shorr is Director of B2B Marketing for Straight North, a 
Chicago based search marketing agency. Brad writes frequently 
on social media, SEO and copywriting topics. Connect with 
Straight North on Google+ and LinkedIn.

  1. 1

    >> “It’s a relatively new — and extremely broad — discipline with no single definitive definition.”

    I would venture to say it’s not so new. Magazines and newspapers have had content strategies for a long time. Perhaps the internet is slow in adopting the same practices?

  2. 2

    “Content strategy” is new? What’s so hard about telling the client, “Tell me what you want to say before you ask for a design”? Not sure what makes web designers think that what they do is any different than any other form of publication. A magazine designer doesn’t work without words, nor does a newspaper designer, or a direct mail designer, or a brochure designer, or a book designer. Good grief.

  3. 3

    I really liked reading this article because it resonated with me on many levels, I’ve been both a Project Manager on a website redesign and a designer on another. Open communication is definitely the key in such projects and using a PM software helps the process along immensely since it lets everyone access the needed information in a shared environment.

    Most often the problem is ownership, designers feel that the design should control the direction and writers feel that content is the king; In my opinion its both or none.

  4. 4

    The examples for “Making Room for SEO Content” are pretty lame. In the apple example they are not using tabs to hide SEO content those are totally separate products. and the Carsonified example under “Step up creativity on non-SEO pages.” their entire site is just as design heavy and just as beautiful as the about pages so your point is moot. I understand the point of writing SEO content but I hate in nonetheless, I still follow the “Write for the user” edict.

    • 5

      As much as it hurts me to say it… people don’t read anymore. The success of a brand is dependent upon the quality of a product and the overall branding efforts. As someone in the industry (ecom project manager/biz dev), I’ve seen how much SEO negatively affects the quality of writing (even if writers don’t like to admit it). Slipping awkward keywords in here and there and trying to coat it with quality content won’t cut it for long. Google’s entire goal is to weed out the lesser products and praise the quality ones in an attempt to give people what they want – and firms who live and die by trying to saturate a website with SEO fodder are going to find it increasingly harder to keep their heads above water. So… moving forward, the less content the better, IMO. You’re welcome, designers :)

      • 6

        I couldn’t disagree more. I think now people read more than they ever had. We read on the phone, on the Kindle, on the iPod, on the computer, at home, at work, in the train, in the bathroom. There is so much more information available to people, they tend to multitask, and with that, they have to be picky about what they spend time reading, because you can never read all the things you want. SO the trouble is, if you didn’t tell me anything interesting or important in the first two lines, you lost me. I’ve moved on. So the message shouldn’t be weather we read or not, but where the message presented was worth reading.

        • 7

          You’re arguing the wrong point… the article clearly focuses on content strategy for marketing website projects. People do read, I completely agree… but not fluff/filler SEO content on websites solely there to increase traffic to the site which is clearly what a large portion of this article is about (The term SEO appears 13 times in this article). I agree that the first two lines of content are important… but if the rest is simply a vessel to deliver keywords you’re going to lose people.

          Less content + quality content + quality product = more reader interest & retention.

  5. 8

    Caracatus Potts

    December 2, 2011 1:21 pm

    I have to agree with Bryan K above. Nothing in this article sounds uniquely new. Writers have always considered tone of voice, who the audience is, what they are trying to convey to the audience etc. Why pull this out and claim it’s the role of a content strategist? Why invent another name for tasks that many people have already done and continue to do so?

    The most telling point in his article is the very first paragraph: “The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition.”

    This doesn’t sound like a discipline at all. I really think the UX field is going to implode at some point because it takes existing ideas, dresses it up in new fanciful language and then sells it back as something unique to the UX field that requires the expertise of a “UX professional”.

  6. 9

    Take a look at the brilliant book “Editing By Design”

  7. 10

    as my experience your content really helpful and these kind of processes normally not on priority but after this detail we must focus on mentioned area.

  8. 11

    No offense to the author, but articles like this do nothing to clarify what Content Strategy (CS) is, and like some have already pointed out, the defeat is evident in the first paragraph.

    People are probably a bit confused here because the article is unfocused and low-level (i.e., small CS). I realize he was writing for Smashing’s particular audience, but if you really want to clarify the discipline, you need to paint a fuller picture.

    CS is not just SEO. CS is not just web writing and all it should or should not be. CS is not just getting along with the team. CS is not just Editorial Strategy (newspapers, magazines…) like what other people here are confusing it with. CS is definitely not just content marketing. And no, CS was not invented yesterday; it’s been around as long as Information Architecture, at least, but just hasn’t had the same spotlight.

    CS relates to all of those things and more (one reason it’s hard to define), and you start to appreciate the immensity and scale when you consider the kind of CS that needs to take place in a big corporation, not some little startup website. CS is about Change Management probably 95% of the time, and judging from people’s comments here, nobody has experience with that. It’s about saving the company millions of dollars annually by lowering content overhead and improving customer business (conversions, loyalty… what have you). It’s about using a very rigorous methodology that can take months, maybe years, to migrate a company’s entire content inventory to a a new publishing system, making improvements along the way. CS is about knowing what to do after a goal is reached—sometimes referred to as “day 2” CS—and it implies making sure that a strategy remains in tact and ever-tuned to long-term goals. CS is about using content to innovate and solve business problems—also known as “big tent” CS—rather than just solve content problems alone.

    I could go on, but other people say it better than me, and they have in books on the subject, blogs devoted to it, or at conferences around the world. Watch any of the many dozens of conference videos that are now online. I’d highly recommend Karen McGrane’s, though there are many other brilliant minds on the topic.

    That said, I come to CS from UX, and now have feet in both worlds. I think I’m a much better information designer and collaborator for it because I understand the nuances of both sides better. As an independent, I’m mostly involved with small CS like what is being danced around in this article, and there are smaller CS tactics that help companies and websites of all size—it’s solid, nothing wrong with it if done true.

    But when talking about CS, like here, avoid the tendency to pigeon-hole it, or put it under a glass ceiling, because CS is much greater than most people realize, and often requires skills most designers in the world don’t have. CS is real and viable, and anyone suggesting otherwise instantly shows how ill-informed they are.

    A couple of editor notes:

    1. Google knols will be terminated April 2012, so the link the author refers to will be dead in a few months (there are plans to relocate that resource somewhere, but I don’t know where yet).

    2. A good example of bad strategy is the use of “Editor’s notes” in an article to promote a product. Tsk-tsk!

    • 12

      Totally agreed, from the title I was expecting at least some form content related to “Content Strategy”. Going through the whole article has got me dissapointed, where instead of that, all we got is some basic principles on design and SEO, which might not even make sense in todays context.

      Surprised with the quality Smashing Magazine allows nowadays.

    • 13

      Totally agree.

      I’m hesitant to read articles on SM anymore. This article is a good example why.

  9. 14

    I enjoyed it. Good refresher.

    While not a new idea, some organizations might not be heavily invested in the content strategy idea, but want to be.

    Not everyone is a pro yet, like a lot of the commentors. I await their opinion piece.

  10. 15

    Eric Panarella

    December 5, 2011 7:52 am

    This article is more about Content Implementation. In the first example, no good project manager would just say “We need a landing page for client X.” When a boss says “I want a landing page”, very often he’s setting the designer up for failure. Why? Because there is no content strategy in that request. And you may say that is the job of the Web Designer, but Designers and Copywriters are there to IMPLEMENT content strategy. To ask them to come up with content strategy is asking them to take on more roles: marketer, developer, metrics analyser, demographics….the list goes on. All of which stand to play a role in developing a good content strategy. The end result usually is a Designer that is not enpowered enough or unqualified to come up with great Content Strategy and is expected to design without it.

    Being a Web Designer, when I find myself contemplating marketing ideas rather than design ideas I know I didn’t get all the details for a project.

    • 16

      Eric Panarella

      December 5, 2011 9:01 am

      To clarify my post, Web Designers and Copywriters do indeed add to the creative aspect of the content strategy process and aren’t there just to implement it. My point is good content strategy consists of more than what a good Web Designer is supposed to do.

  11. 17

    Caitlin at Spectate

    December 5, 2011 8:30 am

    I appreciated this article, thanks Brad.

    I think a lot of the other commentors are perhaps missing that this piece is written for designers and this is a design-centered site…it’s why Smash Magazine is great!! Content Strategy tips aren’t going to be the focus of the writers here. There are many other places that specialize in just that! perhaps it’s just the title that is throwing people off?

    I do think the article was a nice middleground overview of how designers and content writers can work together and how flow and process is affected by them both. Small shops in particular find themselves with both personas within a single person (myself for example!!), so I found myself agreeing with both sides of the playing–I often find I have these discussions in my own head!

    With that perspective in mind, I’d say this is a good workflow: Start with content direction (which should be in place for all your media options, not just the website), then write the content text, design it, then modify as needed.

    For bigger shops, the more you can work on ideas in real time en masse using a platform like that suggested above, the less you have to back track later–just like Brad said.

    Again, thanks!

  12. 18

    Thanks for the article. I appreciate your work. It seems to me that talking to the visitors who will be consuming the content should be a part of the process, in order to understand their goals and write content that serves them.

  13. 19

    Another methodology for getting started uses techniques from animation. Your site needs to be a character, have a personality, a ‘voice’, and this needs to be present through words and design (and navigation and…). Through an iterative process you can develop something like a maquette that will guide the subsequent work. (A maquette is a definitive model that animators use throughout their work on a project; even CG animators often have clay maquettes!) Don’t necessarily start by working on a web page, but start by trying to capture the design essence and the text essence of what you’re trying to convey. If you can get these ‘models’ right, then the real work on the web site will flow out from these.

    These outputs could very well be a portfolio of things: posters or sculptures or phrase books or blurbs. The point is that they are strong enough, accurate enough in every detail that everyone can resonate from these. Writing is so much easier if you know what tone you’re trying to emulate; same for design. The Ben the Bodyguard site could have all developed just from the cartoon character.

    We often try, as is noted in the article and in some of the comments, to jump right into the web site. Let the web site be the outcome, not the initial drafting board.

  14. 20

    Great Article! I have had always had problems with setting up a plan for the website before I jump into building the site. This was very informational… I plan to put some of this in use on my next project. Keep up the good work!

  15. 21

    “an SEO ” really?? “an”?

  16. 22

    Justin Moore-Brown

    December 11, 2011 10:13 pm

    Thanks for the nice read Brad!

    Sometimes it takes a good article to bring me back to the foundations of good design and development practices.

    As an independent I get so caught in things trying to fill so many different roles that I loose site of what’s best for the client (bad habit I know).

    Your article has reminded me the importance of establishing proper communication channels.

  17. 23

    Hey would you mind stating which blog platform you’re working with? I’m looking to start my own blog soon but I’m having a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something unique. P.S My apologies for being off-topic but I had to ask! –

  18. 24

    I agree with many of you here… I love to read your comments. My own reflection on SEO is that, let the user get his information organically. SEO is there to help search engines find your website and to not hide any type of information, because it’s hard to predict what type of user will come to our websites and how they react to content??

  19. 25

    As a freelance web designer working with small businesses, I often have to wear most of the hats in a web project. This was a great article, and helped me better break down my tasks into billable components. Thank you!

  20. 26

    Hi through an iterative process you can develop something like a maquette that will guide the subsequent work????


↑ Back to top