Content-based process

During 2005, I worked in an e-commerce company which was driven by process rather than creativity. Dry-wipe boards, full of productity mantras, covered the walls. They made me almost long for those “soar like an eagle” posters loved by business people who read “1001 Ways to Energize Employees” on their days off.

Every day, designers and developers were subject to a ritual humiliation, reporting what they’d done the previous day and what they planned to do the next. (Sometimes—out of sheer belligerence—I’d say, “I thought about tabs.”) It was a miserable experience which left little room for creativity.

When I visit other designers, I often see similarities with my experience as most web design studios follow the old-fashioned waterfall process for design and development. But, an outdated workflow limits both creativity and efficiency.

We need a better workflow, one which values creativity and doesn’t limit it. Our workflows should be as dynamic and interactive as the web and we can start developing a better process by changing what we focus on. In the past this been visual look and feel, but today it should be content. This means using accurate content, meaningful HTML for structure, CSS for presentation, and Javascript for behaviour—to create prototypes which do more than wireframes or static visuals. A better web design workflow will:

• Improve understanding of the design and development process
• Communicate the structure of content better
• Convey meaning throughout our designs
• Enable us to start implementing designs earlier in the process

Content is king

Content’s often said to be King, a ruler who demands accessibility experts, content creators and editors, developers, information architects, UX and visual designers, pay attention. In the previous chapter, I introduced you to what I called “the content-out approach” to HTML. Now, you’ll see how this approach provides the opportunity for a workflow where content is the focus at every stage. A content-based process includes familiar steps:

1. Gather content
2. Work with wireframes
3. Create static visuals
4. Write semantic HTML
5. Use CSS to implement a design

The end result of a content-based process is an interactive prototype which helps designers iterate, refine designs, and test them more effectively. These prototypes also provide a platform for developers to implement designs using DOM scripting and programming.

Gather content

UX researcher and design ethnographer, Kelly Goto wrote:

Kelly’s idea that “we don’t need to have the final content” might work at a very high level but fails when our job to design using semantic HTML. Her comment begs the question, “how do we use HTML to convey meaning and structure when we’ve no accurate content to work with?” It’s been common in both print and website design to lay out pages using greeking text (the familiar Lorem Ipsum). Some people prefer short paragraphs from works in the public domain, such as Moby Dick. But the greeking text doesn’t provide the accuracy we need to mark up our documents semantically.

Making sure content’s delivered on time and in the right format isn’t just a concern for designers and developers. Other people—from information architects to SEO search engine optimization specialists—depend on it too. There are several ways to get the content you need and make your job run smoothly:

• Work with clients to create content inventories
• Provide clients with a new content brief
• Describe content and who’s responsible for delivering it
• Include content milestones in your contracts
• Use Basecamp or even a simple spreadsheet to keep track of content

Note: You can learn more about content briefs from Keith Robinson’s article “Content Brief.” (Wayback Machine URL)