Responsive design is about a single source of content across many viewports and, therefore, requires the content up front for a truly award winning design that spans a million devices.

Mark Boulton once said during a workshop...

Web design is an extention of page design, and page design was all about crafting the perfect paragraph.  To craft the perfect paragraph you need to be working with the content.

Mark Boulton

Working without content

During the build of this site I had a really good idea upfront as to what I wanted each of the pages should contains, which modules were to be added to each page and what those content modules were made up from. I consider myself fairly well versed in the art of building websites, I've built more than 30 sites ranging from £500.00 to £500,000.00, and built them across the Charity, Finance, Gambling, Higher Education, Publishing and small business sectors. With all this knowledge I was sure I considered everything for the page layouts and wireframes to provide the designer when designing this site.

In reality it was a flawed process.  The designs that the designer came back with were great, but they didn't account for the small issues.  Length of headlines that spanned multiple lines, the layout of a page that is too short and conversely one that is longer than most.

When you ask a designer to design without the content that will be used for the final site you may as well be asking an architect to design a house without specifying the number of bedrooms, ensuites, kitchens and bathrooms.

Make no mistake, a design constructed without real content may look alright in the end, but it will never be as good or impressive than a design with actual content.

Constraint: why content is so vital

There are many reasons why it is important to base your design from your actual content, but the most important from the point of the design process is the constraint is offers the designer in an otherwise newly unconstrained world.

Since the beginning of time designer have been working within constraints.  These constraints started off with the availability of tools, the availability of colour, the size of the marble block, the size of the cathedral roof, even the painters canvas was only so big once it was stretched. 

For a long time web designers have been working with the constraints of a fixed width as well. This is one of the reasons why we broke the web to begin with, to allow us some constraints when coming up with a design. With the arrival or responsive design we suddenly had no fixed width to constrain us... however if we look from the content out rather than from the edges in then we can use the content itself as the constraint.

A content element inventory

The first step in our responsive design workflow is to inventory only the things that need to be on the page, whether or not they exist yet. And by "inventory," I mean make a simple list. This version of the content inventory is not meant to replace traditional content inventories. We're simply borrowing the idea of a content inventory and using it as a starting point for design.

An excerpt from Stephen Hay's Repsonsive design Workflow

The first place to start when working on what content you want to bring across to your new responsivve site is a content inventory. The idea is that you identify for each page/content type (think product page, contact form, news lising, news page, article) the types of content elements that should be on that page.  It should be noted that you are identifying what should be on the page, not what you already have on the page.  This is a perfect opportunity to decide if you have wasted content elements or elements that are missing altogether.

This goes towards understanding how the content will be layed out in your small viewport all the way to your widest viewport.

A simple example is a resource in our resource section. We need to cater for the resource that contains the most content so lets take a look at Swipe.js as our content inventory example.

  • Content Inventory
    • All Pages
      • Top Level Navigation
      • Search
      • Breadcrumb navigation
      • Logo
      • Footer
    • Resource
      • Title
      • Introduction
      • Resource Thumbnail
      • Resource Thumbnail caption
      • Short Description
      • Long Description (details, explanation)
      • CodePen Demo Link/Embed (if available)
      • Github Link (if available)
      • Download Link (if available)
      • Resource Name (linked)
      • Resource Creator (linked)
      • Links to sites that use product (if available)
      • Articls/News relating to product
      • Related Products

With this content element inventory I can now start to provide a better description of the types of content the designer will need to work with when laying out the designs. It is still important that you have real content to understand the length of each of these items, but it is a great start.

Now go forth. Identify the types of page templates you have and work out a content inventory for each of those items.