Ben Callahan is the president of Sparkbox and founder of the Build Responsively workshop series. In this presentation, from Moboom's Responsive Web Trends Conference, Ben discusses techniques for improving your design workflow.
Working in the current state of browsers
As the number of devices increases, we have less and less control over how our sites are being viewed. According to Ben, it's time to face the new reality.
He points out, “We browse in a browser inside an operating system called Windows that allows you to change the width. We assumed that everyone certainly was browsing with their browsers maximized.”
In Ben's old workflow, he would design, do some front-end development, integrate it with some sort of CMS, and then launch. Early on, he realized, “Hey, maybe I should think about my users a little bit somewhere in this process!”
“Why hello, Responsive Web Design.”
So what changed? Ben explains “It wasn’t really responsive web design that made us rethink things. It was a bunch of really capable, tiny browsers. Actually, it was just reality setting in.”
Ethan Marcotte said that three things are necessary for responsive design: a flexible foundation, flexible content, and media queries. At first, all of these were saddled with the front end developer. That wasn’t working. He soon realized these concepts needed to be embraced by the whole team. Everyone needed to think responsively, which is more than just making things fit on smaller screens.
Eventually Sparkbox settled on a single deliverable: the website itself. Instead of multiple goals and deadlines, they refined and streamlined the process to just “build the actual thing.”
He admits this way of working can conflict with the traditional organizational structure of your clients, quoting Jeffrey Zeldman:
“Almost no one who makes websites works in their company or organization’s web division. That’s because almost no company or organization has a web division and that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.”
Since this new approach is not in line with the way companies are structured, it may be necessary to make recommendations about how a client’s teams are organized.
Advance design through one deliverable workflow
To tackle the problems of designing such a flexible product, Ben dissects the design into three parts.
1. Establish the Aesthetic
For the first stage of the process, Ben recommends using tools you are most comfortable with -- it will build confidence for the initial style review. He mentions:
- Style Comparisons: Light vs. dark, flat vs. texture, etc. Simple choices made early in the process help get the project started.
- Style Tiles: Less precise than a mock-up, they help you define a visual language quickly and easily.
- Style Prototypes: Similar to tiles, but with HTML and CSS, so clients can see it in the browser they use.
2. Solve the Problem
The bulk of the work we do is problem solving. Ben outlines three sets of tools for doing so:
- Static Design Tools: Traditional methods that can still be relevant, i.e. Photoshop, notebooks, etc.
- Responsive Design Tools: Allows you to do some design while thinking about the flexibility you are building, like Frooont, Macaw, and DevKit.
- HTML/CSS: Fire up your favorite browser, dev tools, and frameworks.
Refine the Solution
Ben knows that designers will spend forever tweaking if they can, but this can destroy budgets as projects drag on.
He outlines a scenario in which a UI designer crafts a design perfectly in Photoshop and then hands it off. By the time it gets to launch, the thing has completely changed. Instead of static design hand offs, Ben encourages us to consider design pairing.
At Sparkbox, Ben has one designer and a lot of front end developers. This way, their creative director can spend a little time establishing an aesthetic and solving big problems and can then transition to refinement. People collaborate on specific projects, doing paired designing.
With this method, it is important to talk to your customers. Explain that when they start seeing code, it doesn’t mean things can’t change. It is just a more efficient way to assess if we are moving in the right direction. “In refinement, efficiency becomes the most important factor.”
Ben shares an excerpt from one of his favorite records, Miles Davis' Kind of Blue. He reads an excerpt from the liner notes by pianist Bill Evans, “Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result.” Ben is fascinated by the concept of collective coherent thinking in relation to web design.
The ultimate goal would be to build a safe environment to think as a single unit. Each member has to be willing to put the good of the group above themselves.
His advice is to create guidelines instead of rigid process to build a place of creativity where improvisation can flourish.
People over process
With a great team, he says, you don’t have to do much besides put them in a room and give them a couple of notes. An inexperienced team needs more guidance. His understanding is that “the amount of process required is inversely proportionate to the skill and experience of your team.”
Ben posits that we can either “create the perfect, fully documented, all encompassing web development and design process, or we can chill out and develop our people."
Ben's advice is to keep an open collaborative process to allow improvisation and creative problem solving. All projects and teams are different; there is no one way to design. Set up loose guidelines and refine along the way. And lastly, think about taking a more improvisational step in your process.