Skip to content

My Responsive Workflow

One of the biggest challenges of thinking in a more future friendly way (acknowledging and embracing unpredictability), and building responsive web sites (sites that respond to the devices viewing it) is the change in workflow.

Here's an outline of the shape of my workflow these days.

  • User Research
  • Content Strategy, Information Architecture
  • Iterate
    • Sketch
    • Style Tiles, Style Guides
    • Structured Content in Markdown, produce HTML
    • Prototype
    • Test

Some background

Traditionally, web sites have been made using a Waterfall model: after the planning phase, flat Photoshop comps are produced and signed off. These are then used to build the web pages or Theme.

Given the large and rapidly increasing number of connected devices, it doesn't make sense to produce just one static comp for each web page. However, producing a range of comps for each page is impractical and inappropriate: doing so would be time-consuming, and couldn't fully represent the wide range of screen sizes and resolutions that the site will be viewed on.

So, coding starts early in the process. Prototypes are built so that the there's something fluid to review. The design becomes more focused towards chunks: small pieces of structured content. These chunks are then fed into the prototypes and, using a Mobile First approach, the layout is designed as increasingly larger screen sizes and device features are considered. Then, a back and forth between designers and developers begins, tweaking and refining the layout and the chunks. The workflow process is starting to look more like Agile development.

Resources

Here are some great articles and presentations about Responsive workflow.

Presentations:

Articles:

Discussion

If you want to know more, or want to discuss in more detail, I'd love to hear from you. Sound off in the comments, or drop me a mail to [email protected].