Responsive design brings a new approach and philosophy to creating and building websites. Many are finding their old workflows less than ideal for responsive projects.
I’ve seen this in myself and I’ve read through the changing workflows of other designers. There are some common threads in the trouble spots of the old workflows and in where the process needs to change.
If you think about the workflow you’ve used prior to any responsive design, it probably follows this basic pattern.
Plan — information gathering, research, content collection
Design — sketches, wireframes, moodboards, Photoshop (Fireworks) comp
Develop — html/css/js templates, page creation, additional functionality
Deploy — test and launch
Each of the above might come with a sign off from the client before moving onto next phase. Often your fee structure is tied to different stages in the process. A couple of problems arise in the design phase though.
First static image comps can’t show the dynamic nature of a responsive site. Second it doesn’t make sense to try to create a new comp for every different page type at different sizes. It’s simply too much to realistically do for most budgets.
There needs to be a better way.
My own process has been changing for the last year or so as I’ve moved toward responsive design. It’s hardly perfect and it’s still evolving. I’ll get to the details in a bit. The main change is less time on design comps and moving to the browser sooner.
I’m giving just enough early deliverables to clients so I know it’s safe to begin developing the site. Then I’m iterating more with the client to refine the eventual design. It’s worked better with some clients than others, though I think the core idea is the correct one. It’s more my implementation that needs to improve.
Here are some other designers discussing their new workflows.
If you check the links above you’ll notice there’s variety in each workflow, but I think a few commonalities come through. The biggest is that moving everything to the browser sooner is better than later.