Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips Creating Content Wireframes For Responsive Design

As I was leading my course in responsive web design between 2011 and 2012, I kept stumbling over the process of wireframing. My students tended to focus on the wireframe as being the end game in the planning process. They didn’t understand that responsive design focuses on how users will access the content.

You can only imagine my relief when I happened to come across a video by Stephen Hay1 speaking at the Beyond the Desktop conference in 2012. There, in his talk on responsive design, he presented the concept of the content wireframe. This was a huge relief to me.

Further Reading on SmashingMag: Link

I just knew there was a step before the process got real, but I couldn’t articulate it. In this post, I’ll describe the methods I use to get from content to responsive wireframe — and how you can, too.

Introducing The Content Wireframe

The concept of a content wireframe is rather simple to understand because it is an offshoot of the most basic design philosophy: Fall in love with the user, not the technology.

Screenshot of a slide presentation5
Stephen Hay’s presentation at Beyond the Desktop6.

Content wireframes do just that. They block out general content categories and force you, as Stephen so beautifully puts it, to design from the content outwards.

It really isn’t complicated. In fact, it involves two steps:

  1. create a content inventory,
  2. create a visual hierarchy of the survivors of that list.

Do that and you have a potential deliverable for your client. What it tends to do is shift the client’s attention away from what “thing” goes where and towards what is important: the flow of information.

Not Rocket Science

The key issue with wireframes, for my students and other designers, is that they tend to take on unwarranted importance. It is almost like the end of a renovation show on TV, when everyone “Oohs” and “Ahhs” when the client gets to walk through the home.

Not for me. I prefer the kitchen renovation scene, when the contractor pulls out a piece of paper and a carpenter’s pencil and sits down with the client at the kitchen table. Then, they draw a simple outline of the room and say, “How about we pull out this wall, put an island here and move the counter over there?”

The carpenter is laying out the “intent” of their approach to the project, and the client is focusing on the important parts of the project, rather than on tiles, fixtures, paint and lighting.

In his book Responsive Design Workflow7, Hay uses the term “content reference wireframe” because, “it describes how the wireframes deal with content: they simply refer to it as opposed to depicting it.”

A content wireframe, like our contractor’s sketch, depicts placement — a wall, a counter, a header, a footer — and establishes an information hierarchy and flow. Because the process is iterative, starting the conversation with a simple “How about…” rather than “Here’s how…” keeps it away from the realm of rocket science and puts it where it originally started: old-school boxes and arrows.

Once that is established, we can move into the low-fidelity and high-fidelity wireframe development process. Let’s see how how a content wireframe can focus the conversation by deconstructing a simple page.

Deconstructing Made By Hand

Screenshot of Made by Hand8
Made by Hand119’s home page has a distinct information hierarchy. (View large version10)

I visit Made by Hand119 regularly. As the name suggests, the website celebrates artisans who make things by hand. The home page features a series of videos, and when you first visit, it appears to be rather stark, with few flourishes. This makes sense because the films themselves are what’s important, not any other content.

The content inventory for the home page is, understandably, rather basic, consisting of:

  • a header and navigation,
  • five videos (which we’ll refer to here as the main one and videos 1 to 4),
  • a footer.

Still, we can see a definite information hierarchy at play. The list of main content is a bit vague, but once you understand that the intent is to present a series of videos that highlight individual artisans, the priority of each piece of content becomes clear:

  • main video,
  • videos 1 to 4,
  • the footer,
  • the header and navigation.

Seeing the header and navigation at the bottom of the stack might strike you as odd. However, the whole purpose of the page is to get you to watch the videos and, if you like them, to subscribe for regular notifications of new content. The header and navigation are simply there to facilitate navigation of the website.

In many respects, the old adage “Content is king” — generally attributed to Bill Gates12 — drives this website. The focus is the collection of videos and nothing else. This raises an important point: A content reference wireframe establishes content precedence, not page flow.

With that list in hand, you can move on to actually creating the content reference wireframes.

Creating Content Reference Wireframes

Though Stephen Hay is a big proponent of creating these content reference wireframes with a code editor such as Coda13 or Adobe’s Brackets14, for those of us who are, shall we say, code-challenged, a visual editor such as UXPin15 or Adobe’s Illustrator16 or a responsive editor such as Macaw17 or Webflow18 would be a solid choice. Each has its uses, although a responsive editor has the advantage of giving the designer more than one perspective on their work — specifically, how their work responds to different screen sizes. That’s crucial, given today’s wide range of screens.

There’s no one best tool; pick the one that fits you best. In this tutorial, we’ll walk through Illustrator. Here’s why:

  • Although Illustrator is not a truly responsive tool, its artboards enable you to start with a mobile-first approach and, using preset or customizable breakpoints, to quickly build out to a desktop version.
  • Its customizable grids allow for consistency of design.
  • It lets you create precisely sized boxes for wireframes by clicking and setting the dimensions.
  • If you prefer Photoshop for higher-fidelity mockups, you can copy and paste your content wireframe from Illustrator to set the foundation.

Note: If you prefer to work in code when wireframing or prototyping responsively, feel free to skip to the “Next Steps” section at the bottom for other useful resources.

A Mobile-First Approach To Content Wireframes

For this short tutorial, we’ll use Illustrator as part of a mobile-first approach, to focus us on the most important content. We’ll create five viewports to lay out the foundation for a responsive content wireframe.

1. Create the Documents Link

In Illustrator, create five new documents with the following widths and heights (in pixels):

  • 320 × 800
  • 768 × 1200
  • 992 × 1400
  • 1224 × 1600
  • 1440 × 1800

(Depending on which version of Illustrator you use, you can also create different artboards in the same document.)

Screenshot of the UXPin tool interface19
The tool interface. Source: Adobe Illustrator3229262320) (View large version21)

2. Create the Containers Link

In the 320 pixel-wide document, make seven unlined boxes filled with neutral gray.

Screenshot of the UXPin tool interface22
The tool interface. (Source: Adobe Illustrator3229262320) (View large version24)

3. Create the Labels Link

Place text over each box — in descending order: Header, Main video, Video 02, Video 03, Video 04, Video 05 and Footer. I’ve used white text to contrast against the relatively dark boxes.

Screenshot of the UXPin tool interface25
The tool interface. (Source: Adobe Illustrator3229262320) (View large version27)

4. Resize the Boxes Link

Make the main video box a little bigger than the others to indicate its priority. If necessary, scale down the header and footer — but keep them full width.

Screenshot of the UXPin tool interface28
The tool interface. (Source: Adobe Illustrator3229262320) (View large version30)

5. Copy the Boxes Link

Now that you have their relative sizes and labels, copy the boxes to the other documents or artboards.

Resize them as needed, and remember that these boxes are approximate. They represent the existence of content, not the content’s precise sizing or spacing.

Screenshot of the UXPin tool interface31
The tool interface. (Source: Adobe Illustrator3229262320) (View large version33)

Next Steps

There is no big reveal or other excitement with the creation of content reference wireframes.

They fit into the workflow between the content inventory and the low-fidelity wireframes34. This is because their purpose is simply to establish an information hierarchy and, if the client is involved, to get them to think more about the concept of content and information flow, rather than the actual content itself.

The entire process is more of a “How about…” conversation than a “Here’s how…” Once everyone agrees, the next iteration of the project will involve pouring actual low-fidelity content into the boxes that make up the content reference wireframes.

As we’ve seen, you can practice content wireframing by deconstructing popular websites into their basic building blocks. Start with rough containers of information, add in the real content, and then start chiseling them into more finalized forms. In doing so, you’ll be better able to design around what users really care about: the content.

  • UXPin35
    This collaborative design tool is useful for laying out a rough wireframe, then adding interactions to create a rapid prototype.
  • Responsive Design Workflow36” (slides), Stephen Hay, Mobilism 2012
    These slides concisely summarize how to design efficiently for responsive layouts. Hay offers some great advice on auditing content, prioritizing content, wireframing content and using development frameworks.
  • Content Reference Wireframes37 (PDF), Neil Hao
    This is a nice overview of a code-based approach to content wireframing, described through a realistic design scenario.
  • Mobile First38,” ZURB University
    ZURB, a design agency, offers this helpful resource portal, which provides context for content wireframing.
  • Dive Into Responsive Prototyping With Foundation39,” Jonathan Smiley, A List Apart
    Smiley’s useful tutorial shows how to wireframe and prototype responsive designs in code. While it’s not totally mobile-first, Smiley does a good job of explaining how to display content consistently across devices.
  • Design Last40,” Rik Schennink, Smashing Magazine
    This interesting article goes over how to design responsively with content and HTML first. In doing so, you’ll pair content with structure right from the beginning.

(da, ml, jb, al)

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
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34 http://://
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40

↑ Back to top Tweet itShare on Facebook

Tom Green is a professor of interactive multimedia at the Humber Institute of Technology and Advanced Learning in Toronto, Ontario. Tom has completed DVD videos for, InfiniteSkills, and Adobe Systems and is a regular contributor of tutorials to Tuts+ and Layers Magazine. He is also an active member of the Adobe Education Leaders and Adobe Community Professional groups. Follow him on Twitter.

  1. 1

    Great stuff, thanks for sharing!

    • 2

      Really nice article. I’m so glad to see that I’m not the only one having such a process. I too start with a content inventory and then uses illustration to create low fidelity wireframes to share with developers and clients where the content be moved at different screen sizes. Though I find it really hard to make people (clients, or people in my workshops) understand why it is important to list the content en prioritize it before jumping into wireframes. Many people like to directly draw something on the paper. I think it’s perfectly fine if they are able to do this without forgetting a piece of content, but most of the time when I used to do that, I’ll end up forgetting things on the wireframes and I needed to go back and add them, change the whole thing again, etc.
      So again, glad to see that I’m not the only one big fan of content planification before drawing anything :D

  2. 3

    Great Article on Content Wireframes. Really helpful. Thanks

  3. 4

    I think Illustrator is fine to begin with, but in order to progress within an agile environment with developers and clients, with lots of pages and amends a more sophisticated kit is needed. I worked with Ai to start with then moved to Axure. Never looked back. Worth every penny.

  4. 5

    Hey great article! Content is always THE biggest problem that we face on every project in the team that I’m working with. We have some sort of content inventory at the beginning, but usually the “real/final content” comes at the end of the project. How do you sqeeze the content from your clients? They usually tend to procrastinate on giving you the content and they arevmore focus on how the everything is going to look like. Any advise?

    • 6

      I wish I had an answer to to how one can “squeeze” content out of a client. Everybody has their “way” of doing that and there is no “one best way”.

  5. 7

    Depending on the client and their understanding of how things work… I have used Keynote to come up with the same thing.

    For each step below I duplicate the slide and work on the new slide….

    Start off with the content in a list
    Move the content into grey boxes (contained within a no-fill box with a grey border)
    Extend the grey boxes vertically to approximate content height
    Expand the border box to a new viewport and extend the width of the grey boxes
    Continue this going through each viewport and repositioning the content elements to best fit the viewport

    At the end I also apply the goto animation of Magic Move for each slide at around 0.8s duration. This gives a really nice visual journey for a client to see the content list be added to the mobile view and expanded.

    You can even export this to video if you want to share it… at which point I’d recommend duplicating the journey from small to large viewports and back again so it can be played in a loop.

  6. 8

    *Scratches head befuddled.

    This how I’ve always made wireframes, is this a new realisation from people that they need to be based on content?

    I’m a little disappointed as I thought this might be closer linked to content templates and better ways of doing them. I used GatherContent last year, it’s OK, but it is so expensive for what it is, it’d be amazing to have a free tool like it. I find content templates so helpful for understanding what is needed to go into a page, and also how to explain to the CMS developer what is needed for inputs to get it into the templates – as well as being able to design and develop the content itself.

    • 9

      Another point on this as I read through a second time, sat comfortably with my helpful hat on.
      I’ve always done this with post-it notes, or index cards and pens. You can get the hierarchy done in less than a minute and BAM – mobile optimised page flow.

      If you want to evaluate relationships between the content hierarchy introducing a horizontal axis (wide viewport) then all you have to do is slide post-its/cards to the right; although with flexbox being so well supported now, you could go left and up and down if you really wanted to.

      Take photo – upload to dropbox. That’s significantly faster – and takes less of that ‘oooh ahhh’ reveal moment away. It also makes more emphasis on the point you make about the kitchen builder, which is where I believe I fit in most, I don’t want to give you some overblown 3D CAD of your kitchen, I want you to use your imagination and look at this scraggly biro line.

      • 10

        I don’t disagree with your approach.In fact I make it clear to my students and so on that “Nobody cares how you did it. They just care that you did it.” Post It notes, paper prototypes, markers and white boards, boxes and arrows drawn in Illustrator, UXPin, Balsamiq, the HTML approach used by Mr. Hay or whatever else is used, all do the same thing as you.
        The point of the Content Wireframe is to focus on where stuff goes not “what stuff is”.


↑ Back to top