Red taking notes while attending Stephen Haye's "Responsive Design Workflow" workshop

A new approach to design workflows: Stephen Hay's "Responsive Design Workflow"


Responsive design requires a new way of thinking. In his workshop “Responsive Design Workflow”, Stephen Hay presented an approach to meet these new demands.

Improving design workflows

At the Frontend Conference 2013 in Zurich, Stephen Hay, founder of Zero Interface, presented his workflow, which he successfully uses in his daily work as a web designer and developer. During his workshop, he showed his way of dealing with the new demands of responsive design: It consists of simple successive steps which can be adapted to a project.

Designing with and for content

At the very beginning of a project, you should start with the content of the website or application. Decide which content will be used and which will not be used, and create a content inventory of the complete content. This should include not only text and images, but forms, buttons, maps, icons and so forth. It will be the basis for the subsequent steps and ensure that you are not designing blindly.

Simple interfaces and the use of wireframes

When designing interfaces, we must try to keep them as simple as possible. Additional steps will only make the interface more complicated and hence harder to use. Wireframes can be used to illustrate these basic functions, but nowadays, they are often misused as a design tool. According to Stephen, wireframes should be used to establish the content hierarchy. He speaks of so-called “content reference wireframes” to illustrate this.

Thanks to their simplicity, content reference wireframes can be created with plain HTML/ CSS: Not only are they quickly done, but they are flexible and responsive and can be displayed on any device. They aren’t fancy, but they are an excellent base frame which draws the attention towards the content. Thus, you can use them to discuss only the content with the client, disregarding visual decision for the moment.

Tools for responsive design

So far, the right tool for responsive design doesn’t exist yet. Tools like Adobe Reflow seem promising, but they are only in the early stages. Instead, we have to resort to combining existing tools. Stephen showed that what matters most, though, is how we use these tools. New web applications like Jetstrap or Divshot offer many options, yet might be counterproductive, as their details can distract from the actual content.

Designing in structured text

Content at its very base is text. But without structure, this text can’t be understood and processed by computers. Text can be structured quite easily, for instance with Markdown or HTML. The more meaning we give our text through structure, the more useful it is in the responsive workflow.

Linear design: sketch and refine

When it comes to deciding on colours, typography, iconography and imagery, the credo is to start with sketches and refine these later on. Starting with thumbnails, you should sketch out as many layout ideas as possible, subsequently selecting the best of these. These are being refined again and eventually selected again. Working with fast and rough drafts, you can sketch out every idea, even implausible or seemingly unconvincing thoughts, which in the end might turn out to be interesting and valuable after all. Detailed mockups will only be created once the ideas are set. Another tip of Stephen’s is to move away from Photoshop and instead use HTML/ CSS to built responsive mockups, which will give you greater flexibility in dealing with changes.

Static site generators

Using tools like Dexy or Jekyll, we can then move on to generating static sites out of our text files. Again, by generating static sites rather than using Photoshop, we gain much flexibility, as we can quickly change content without having to create a new Photoshop file. Content can be replaced quickly, and using CSS, the sites can adapt flexibly rather than having to be changed manually.

Screenshots to present mockups

When presenting mockups to the client, Stephen Hay advises to show screenshots instead of the actual mockups which already work in the browser. In doing so, you can prevent discussions about functions which haven’t been implemented yet. Only present the browser version once the basic design has been agreed upon.

Styleguides in addition to mockups

Complementary to the mockups, you should generate styleguides, which can provide further information and facilitate the implementation of the design. Using tools like PhantomJS and CasperJS, you can even automate the creation of screenshots for styleguides.

Guidelines for the workflow

Each step in the workflow builds upon the previous one, leading to a cumulative effect. It is an iterative process, in which each step is relatively simple. What’s important is that you document your work and that every team member is involved in each step. It’s time to stop using the waterfall model and put team work at the centre!