Notes on a Responsive Design workflow for digital web agencies

Here at Burfield we’re always looking to improve on the status quo in order to ensure we’re on top of our game and providing the best possible service for our clients.

One area I’ve been focusing on a lot recently is that of refining our internal processes to enable us to create Responsive websites in an increasingly efficient manner. The points below represent a rough collection of just some of the information I’ve gleaned (and thought up) over the past few weeks.

We’ll be refining the below and gradually working it into our internal processes over the forthcoming months. I’ll report back in the new year to let you know how we got on. For now however, I hope some of the below proves useful…

General Workflow

  • A “Linear” web site production process is dead – we should focus on the “1 Deliverable” approach. Iterate towards common goal.
  • No more working in “silos”. Collaboration is key. The whole team must be involved from start to finish.
  • There are no “deliverables”. Rather we should be focusing on involving the client little and often with “Updates”. Shifts from a “must be polished” mindset to a “work in progress” mindset.

Design

  • Designers should solve wider problems in the tool of their choice where they are most fluent.
  • Refining the solutions (above) should however be actioned in a tool which facilitates efficient collaboration with the rest of the team (i.e.: in browser).
  • Essential to establish content priorities before design or content production is commenced – use linear, mobile-focused sketches to facilitate.
  • Style Tiles are perfect for establishing Visual Language (better term than “Design”).
  • Refining a design is the least efficient and least productive part of any web build (data backs this up) – therefore we can only afford to do this once per project. This means we must work efficiently and not just harder.

Web Design Process

Web “Design” process is comprised of the following stages.

Establish Aesthetic

  • Style tiles – create the “Visual Language”
  • Style prototypes – Typecast Froont, Macaw…etc. Experiment with visual language in an “in browser” environment.
  • Avoid “layout” at this stage
  • Tool selection guideline – “Comfort”

Solve the Problem

  • Start mobile first
  • Sketch a lot – quick, efficient and “natural”. Always mobile first.
  • High Fidelity “Key Component” Design Prototypes – designer uses a combo of static and responsive design tools (Photoshop, Froont, Macaw) to create a wider picture of the final design.
  • HTML & CSS Prototypes – front end dev builds upon the above in “real” code
  • Tool selection guideline – “Fluency”

Refine the Solution

  • The “Long tail” – can only afford to do this once
  • No place for static design tools / deliverables here!
  • Use “Design Pairing” – front end dev implements overall visual language on approved layout. Designer then sits with a front end dev to fine tune everything.
  • Critically must avoid back and forth with multiple corrections
  • Tool selection guideline – “Efficiency”

Resources/References

Design

  • Macaw – the code savvy web design tool
  • Froont – design websites directly in the browser with a simple drag and drop interface
  • Adobe Edge Reflow – http://html.adobe.com/edge/reflow
  • In browser mockup examples –  http://froont.com/froont

Workflow

learn more about

Support