Out with the Old
After listening to a 5by5 podcast featuring Ethan Marcotte about responsive web design, it became clear that we, as a profession, are struggling with a problem that responsive design creates: the old web design workflow is broken.
For about the last year or so at Auxiliary, we’ve wrestled with the issues that invariably show up when trying to manage a responsive site’s workflow. In the past, the project flow was simple:
- Site Architecture
- Wireframes
- Design
- Build
Obviously there’s a little more nuance to it than that, but essentially everything happens in well-defined stages. So much so, that a client that wanted to go back into a phase that had already been approved would be contractually obligated to pay a penalty.
In with the New
I should start this part with a disclaimer: we’re all still figuring this out.
But we’ve been forced to come up with a new workflow that better fits our end product, and I believe that we as web professionals will be better off because of it. Not only because it’ll force us to think critically about how we do things (as opposed to trying to shoehorn our process into the old method), but because certain types of designers and companies will be in a unique position to take full advantage of a responsive web workflow.
Who are these certain types of designers and companies that I think will flourish? The ones who are already doing it the “right” way. For the individual, that means the designer who can also handle code. For companies, it means the ones that have tightly integrated design and development teams. As in, they talk to each other. All day long. If you’re a designer who mocks up photoshop files and then sends them to somebody on the other side of the world to be coded, well, your responsive site is going to be fucked.
Planned Chaos
So, let’s figure out what the ideal workflow for a responsive site should look like. Luke Wroblewski wrote a great article about it, so be sure to run through that. ZURB also released Foundation, which is fantastic. For my purposes though, I’d like to dig in a little more and talk about how we’ve been making sense of the inevitable nonsense that comes from the iterations of a responsive site.
It’s one thing to build a site for yourself where you can change gears as you need to, but building a site for a client that’s going to need to see a game plan, and progress points on your way to a finished site, takes a little finesse. And a whole lot of sales pitch.
Mobile to Monsterous
As Luke suggests, it makes a lot of sense to mockup for mobile first. Lately, we’ve been going in the other direction and designing the most maxed-out size as well. That way everybody working on the project can see the boundaries, and it gives a clear deliverable for the client to approve.
But, this is where the sales pitch comes in (of course, if you’ve already convinced them to go responsive, then you know a thing or two about salesmanship). With the smallest and largest sizes looking great, the thing you need more than anything else at this point from your client is trust. They need to trust you to make good decisions for all the of the sizes that fall in-between, because requiring approvals at that stage is paralyzing.
Jumping In
From here, we jump right into building. Decisions about anything other than the smallest and biggest sizes are made on the fly. This is where being set up to collaborate makes good teams shine. Although we tend to have set sizes that we use as checkpoints (iPad landscape & portrait, etc.), it’s just as easy to take note of what sizes tend to be clearly broken and work from there.
Most of the time, changes are done right in the browser. Sometimes the designer will need to fire up photoshop and figure out a new solution. It’s hard to really describe what happens at this stage, because it’s always different. But it’s always faster and better when the designer & developer are working on the same problem at the same time.
A Shift
In my mind, this is a shift similar to the one that occurred when DDB first put an art director and a copywriter together on a team. Responsive design is ushering in a new era, where web designer and web developer need be working as closely as possible. Small, integrated teams will thrive.
As they should. Exciting stuff.