Responsive web design has entirely reshaped the way we work, and if it hasn’t hit your studio or workflow yet, it should. The hardest thing is finding a rhythm that works. I spoke about this at ‘Future of Web Design’ recently, and it’s not about the actual ‘doing’ of responsive design, it’s finding a workflow that includes and educates the clients in a comprehensible way.
I’ve found that everything with this new workflow needs to start with content, as without content there is no site. There’s a bit of a chicken-and-egg situation as to whether we should sketch out content blocks first, and then ask the client to fit their content around the predefined blocks, or whether we should fit our design to the agreed content. I like to do a bit of both, and always offer a content review to ensure the client is using the most coherent text for their website or app.
I’ve got two new employees starting this July, and it has made me entirely re-think my current workflow as I’ll be going from a one to a three-person studio. It can’t exist in my head anymore; it needs to be a concrete and understandable process that can be replicated time and time again. We already have a concrete workflow for sending out proposals and initial client contact and contracts, but responsive design has posed an entirely new problem – there is no longer one size that fits all.
I’ve had a couple of workflow problems crop up recently – both web based – whereby the client hired me to complete the user interface design of a project. They wanted static 960 PSDs provided. However, because I rarely provide just PSDs anymore anyway without completing the HTML/CSS myself (you get a neater result this way) I also felt I should provide versions that would work across smartphones and tablets. I did this off my own back, for my own integrity as a designer. As the saying goes, no good deed goes unpunished – cue pixel-pushing from both clients that spanned into weeks, not days, because the designs looked so vastly different when stepped down into smaller sizes. Responsive design is going to mean a heck of a lot more work, and much more client hand-holding than I think any of us ever anticipated.
We’re adapting the way we work to address this. We’ll be starting to provide ‘style guides’ rather than set canvas PSDs for slicing; instead we’ll see how elements will look across various breakpoints and put together a mood board of the overall look of the site instead. A 960px PSD is simply not adaptable enough anymore, and can be taken far too literally when working across various sizes.
These style guides are being adopted by big brands as well. I noticed Starbucks have ditched the literal PSDs in favour of a more ‘pick and mix’ method by providing sizes of elements from extra small to extra-extra-large across various pieces of User interface – unlocking the world of responsive design perfectly. We need to start thinking in terms of pieces of puzzles, rather than finished pictures. MailChimp have been doing this for a little while, providing their own pattern library for their developers and designers to dip in and out of. These include buttons, grid units for layout, hover lists, navigation and tab blocks. It’s quite a comprehensive library that would make easier work of most of the projects they undertake in-house.
Other designers have been trying to find their feet with responsive workflow too. Jesse Bennett-Chamberlain replied to my exasperated tweet the other day regarding responsive workflow, saying that he had found using Adobe InDesign helpful for responsive layout. It enables you to lay out all the content and then tweak the bounding boxes to see how content flows downwards. Effectively giving you quick layout comps that can be shown to clients.
Workflow is very much a personal process. You find your way of working or fit with existing company process as neatly as you can. Rarely do we find parts of our jobs that rock our otherwise solid workflow foundations, but unfortunately, responsive design is looking to be one of them. There are tricky, but exciting, times ahead.