Content, first?

We don't need all the words in the world to start building (responsive) websites. Part of the joy of (responsive) web design is that we should have ease in responding to changes in perceived content.

Potted paragraphs of history

In March 2005 Jason Freid wrote a post on the 37 Signals blog damming 'lorem ipsum' and saying that we should ">use real and relevant words not “lorem ipsum” representative text". Then, in 2009, the Content Management Connection blog wrote a post that exclaimed we should be taking to create sites from the content up. Rather than painting pretty pixels with lorem ipsum we should be working with the words first before 'colouring it in'.

That post links back to one from 2007 by Justin Kistner which talks about Content Driven Design where he talks about the box-model of the web page influencing constraints on content and helping to define it's structure. In 2008 Jeffrey Zeldman created a post on his blog with a tweet - "Content precedes design. Design in the absence of content is not design, it’s decoration."

Jump forward to 2011 and Jeremy Keith in a post where he hammers "home the point that it's all about the content."

Content, content, content

I'm sure I've missed some parts here, but you get the point. Web design is all about the content. But what if you don't have the content? What if you're unfortunate to not have a client that can provide all the words you need before you start? Do you hold off until it's done and not eat? I think that's (obviously) ridiculous.

Some of us aren't fortunate enough to get every last bit of content when we get a project. Some clients just can't work like that. Some clients just won't work like that. Some clients are busy running their business and think it's your role as the web designer (which it is, if you've spec'd it in the agreed quote and project brief).

Structured content

Recently I've been thinkin that you can still design your sites without actual content. All you'd need is the knowledge of what content there will be and then structure these 'content blocks' so they 'work' across mulitple devices. 

Content blocks

Let's take the most used example of a blogpost and look at the 'content blocks' that it would have.

As you can see I've seperated the heading, date, author, first paragraph, article heading, and 'the rest'. These are the content blocks that could make up a blogpost.

I think you can design with these content blocks and you don't neccesarily need the 'actual' content to get to work.

But designing blogposts are easy

Ok, so let's talk about something else. How about a product page for ecommerce site that sells kettles? For this we're only going to focus on the the actual product bits, not the header, navigation or footer.

So first off, we would have a 'the product title'. Then maybe, as it's for an ecommerce site you'd have a price, a brief list of product details, a call-to-action 'buy' button, some social buttons so users can tell their friends they're buying it, a bigger description of the product, a more thorugh list of product details, a product code, a print button and so forth.

So you could start designing the layout and the paint of the page knowing what content blocks are neede and not neccesarily knowing the content. 

A consideration

To do something like this would need a change in process. You'd need reiteration on the content blocks over the time of design and development of the site/app. With responsive web design this is now (in my opinion) easier than ever as you should be in a statle of 'agile' development.

Of course, this works for me but it could mean it's likely that it might not work for you. You may have all the content first, you might work on your own stuff and not need the content as 'you know' what it'll be. 

Still get your content as soon as possible

I'm not writing this to convince that 'content first' shouldn't be taken as seriously as people have written or spoken about. It is. But if you're waiting on it you can get some work done in the mean time, but still strive to get the content as soon as is possible into your work.