Encouraging Better Client Participation In Responsive Design Projects

Advertisement

Last week at the fabulous Smashing Conference1 in Freiburg, I gave a new talk, one I’d written just a few hours prior2. I chose not to use slides, but instead to speak about three things that I’m incredibly enthusiastic about:

  1. Responsive design is not (just) a design or development problem;
  2. The client participation process is broken;
  3. How to call your client an idiot, to their face.

Here are the (slightly expanded) notes that I made before my talk.

Responsive Design Is Not (Just) A Design Or Development Problem

In all the excitement about responsive Web design over the last few years, someone forgot to tell our bosses and clients, so we’ve been treating responsive design like it’s a design or an implementation problem, whereas in fact it’s as much an issue for business. In fact, it’s an issue for everyone involved: designers, developers, content specialists, the people who commission websites and those who structure the teams who make the websites.

The Traditional Workflow

Here’s a common, if grossly over-simplified, project workflow:

  • Plan,
  • Design,
  • Develop,
  • Deploy.

Into planning, you might roll up content audits, requirements, user issues, wireframes and the like. (Aside: Perhaps it’s because I’ve had too many bad experiences with too many bad UX specialists, but I’ve a problem with any part of the process that limits our potential for great design. This includes wireframes — typically desktop-only wireframes — that are produced and often signed off by a client long before they arrive in the design studio. Nothing is wrong with UX per se, only when it’s prescriptive and not part of a flexible, iterative design process.)

Design is where you’ll find a myriad of creative activities, including graphic and layout design and more. Here, static design visuals — you might call them comps — have been the traditional currency of the visual designer. They’re what designers use to experiment with creative ideas, then exchange with clients for sign-off, and subsequently deliver to front-end engineers as blueprints for building.

Development is likely the responsibility of front-end engineers. I know from experience that engineers often work separately from designers and might have only limited interaction with them.

As for deployment, I know I’m making light of this, but it’s black magic and I simply don’t understand it.

This waterfall-style process is similar to the old-fashioned pre-press workflow that I remember when I worked in pre-digital photography. It took up to seven people to take a transparency from a camera to a color proof. Each person’s work was an opportunity for sign-off, but more importantly it was an opportunity for billing. The same is mostly true of our Web design processes today.

Compare that to what I’ve cheekily been calling a “post-PC responsive workflow”:

  • Plan,
  • Combined and iterative design and development,
  • Deploy.

In this agile-style iterative process, everyone works more closely together, designing, developing, testing, redesigning and refining.

Design Testing and Device Testing

I find testing my designs on real smartphones and tablets while I’m working to be incredibly useful. This means that I have access to several devices. But how can we afford to buy all of the devices we need? This year, Stephanie Rieger wrote about the range of devices we should use3. She included iPhones, iPads, Kindle Fire and three different versions of Android. But I think her advice could be misleading.

Mobile phones4
Do we really need to own a myriad of smartphones and tablets or do we need just a few to develop an affinity for them? Image: opensourceway5.

It’s important to remember that there is a big distinction between two types of testing: design testing and device testing.

Designers need use only a subset of devices, because what matters most is that we develop an affinity for how our designs work on any type of device when we hold it our hands. To be clear, how a menu feels when used on a smartphone is a very different issue from whether it technically works on a particular make or model of smartphone. That’s why designers don’t necessarily need to buy a myriad of smartphones and tablets, just those they need to develop an affinity for.

Responsive Design Requires Rethinking

Businesses (agencies, companies, customers) now need to refactor many aspects of their businesses to allow for better responsiveness. Our clients now need to restructure their buying process. For example, at my agency, Stuff and Nonsense6, I still get prospective clients asking us only for static design visuals. They assume we work in Adobe Photoshop, Fireworks or the like and that we deliver static visuals, because that’s what designers have provided them with for well over a decade. That’s why, while many of our clients don’t often expect responsive templates as a deliverable, they love it when they find out that that’s what we deliver.

Design and development teams need to reorganize. It’s a fact that purely visual designers have the most to learn.

Those Photoshop or Fireworks static visuals I spoke about are no longer equipped to provide what we need from them in a responsive context. As I’ve said before, it’s like bringing a knife to a gunfight137. More on that in just a minute.

The Client Participation Process Is Broken

I know that most people know me from my writing and speaking about CSS, and some people might not know that I make my living by designing for clients. In the last year, I’ve worked on projects with STV8, where I’m part-time the design lead; the Hillsborough Independent Panel9, whose report into the tragic deaths of 96 Liverpool fans in 1989 I designed the website for; and the ISO10, the International Organisation for Standards.

Every designer should want to make the best work possible, feel proud about that work and make their clients happy. Unfortunately, the ways that designers and developers and our clients have communicated in the past has so often lead to frustration, unhappiness and, most importantly, work that failed to meet everyone’s expectations.

Collaboration11
For a designer, sharing regular feedback with clients and involving them in every step of the design process might sound like a risky proposition, but it is necessary and beneficial to the design process — when done properly. Image: opensourceway12.

Think of the traditional media that we used to communicate our designs: static wireframes and visuals (comps) that we made using drawing tools such as Photoshop or Fireworks, many of which pre-date the Web. These visuals are like bringing a knife to a gunfight137. Think about the aspects of design that a static medium cannot communicate and all of the possibilities for misunderstanding that this creates. Static visuals cannot do any of the following:

  • Display Web fonts or browser font rendering;
  • Demonstrate different browsers’ CSS capabilities;
  • (Easily) demonstrate percentage-based layouts;
  • (Easily) demonstrate animations, transitions and pseudo-classes (states).

When I say “easily,” I mean not without hours of tedious repetition that we could otherwise spend being creative.

This isn’t to say that designing in a browser is always better. Unlike Stephen Hay14, I use Fireworks to design atmosphere (typography, color and texture) and to develop fine design details, an extra layer of polish, after all of the sketching and interactive prototypes are done.

Design Atmosphere

What do I mean by “atmosphere”?

Many people continue to mix layout with other aspects of design. How often has a client said to you, “I don’t like the design” when they really meant, “The sidebar should be on the left, not the right”? That’s why we need a new word for what’s left when we remove layout from a design. I call what’s left “atmosphere” because atmosphere is often about something that you feel but can’t explain, like the atmosphere in a room after two people have been arguing, or like the atmosphere at a great concert or football game.

Worse than being inefficient, static visuals set the wrong expectations in the minds of our clients. I wrote about this very thing15 back in 2009.

Aside: Why are most websites fixed and centred at 960 pixels? Could it be because a designer showed their client a 960-pixel-wide static visual and asked them to sign off on it? That’s what developers have been told to build. That’s why, in the past, we’ve spent hours hacking HTML, CSS and JavaScript to make rounded corners display in old versions of IE. We sold rounded corners to our clients through those visuals. It’s our own stupid fault. No one else’s.

Small snapshots communicate atmosphere16 Small snapshots communicate atmosphere17
Even small “snapshots” of the design, such as these from Dribbble, can communicate atmosphere — the visual direction, style and overall feeling — of the new website. Images: Fluid Type18, Fig. 4919 by Trent Walton.

Work in Photoshop and Fireworks, by all means (I do). Make static visuals as rich and as detailed as you want them to be. Just don’t set the wrong expectations by showing them to your clients as examples of how their website might look across browsers and devices or by using them as sign-off artefacts. The same goes for screenshots of Web pages. Set the right expectations by demonstrating interactive designs made using HTML, CSS and JavaScript.

How To Call Your Client An Idiot, To Their Face, Without Getting Fired, And Then Have Them Thank You For It

One thing I’ve learned over the years is that clients love to feel involved in the design process. Sometimes, though, they make suggestions only so that they feel they have put their stamp on the project. I know that occasionally designers think that such requests aren’t necessary and that sometimes they’re stupid. Don’t worry. You are allowed to say that to clients (more about that later), but better still, avoid the issue entirely. Here’s how…

Don’t email pictures of websites to your clients and then ask for their “thoughts.” Are you mad?! In the same vein, don’t simply upload static visuals to Basecamp and expect constructive feedback without providing some direction on how to receive them.

Don’t wait until after weeks of work before having a “big reveal.” Down this road lies frustration and resentment. Instead, keep clients involved at every step, all the way through the design process, and not only at those traditional sign-off points. That’s why for the last few years I’ve tried hard to physically work alongside my clients as often as possible. When that’s not an option, I set up shared Dropbox folders so that the client can check in on my progress as I work. We even keep a Skype window continually open.

Set up the proper environment to receive structured feedback, and then ban all unstructured feedback you might receive by telephone or email. Insist that your feedback sessions be face to face when possible, and then limit their scope to aspects of the design. For example, ask for answers to specific questions about typeface choices and typography.

At my design agency, I help facilitate structured feedback by organizing feedback workshops with our clients. More on those now.

Please remember: you are the designer. You are the person who has been hired to solve a problem that the client either couldn’t or doesn’t have the time to solve themselves. Your solution to that problem is worth a lot to their business, so never underestimate your role, skills and influence in the design process.

With that in mind, remember that you can set rules about receiving the constructive, structured feedback that’s so important to helping you make a great design.

Rule 1

As mentioned, don’t ask for unstructured feedback out of context. Emailing or uploading static visuals just doesn’t cut the mustard anymore. You must control the discussion, so take the time to explain your designs and the thinking behind the decisions you’ve made. I’ve found that, because of this approach, my clients enjoy learning about what goes into making a design and are far less likely to request unnecessary changes simply to put their mark on the project.

Rule 2

Take control of the environment in which you present your designs. Host feedback workshops or design “crits,” and use them to get to know your clients better and to develop a deeper relationship with them. Make these workshops face to face when possible, and set time and scope limits, even if you hold them over Skype. These workshops work best when everyone is encouraged to be honest and to let their ideas out in the open. That’s why, although it may seem a little old fashioned, it’s important for someone to keep a written record of what everyone has said.

Make it clear to your client that only the people who show up to a workshop may have an opinion about the design. This must include even the CEO, who sometimes makes “helpful” suggestions 24 hours before launch (or when you want to get paid).

Rule 3

Remind everyone to leave their feelings at the door, because in a design crit only the work matters. Personal feelings don’t matter; so, inside the crit, frame the conversation so that your clients can openly express their opinions. Encourage them to speak their minds, to be brutally honest if they need to be and to scribble across your notes and sketches to get their point across. By the same token, you’re free to disagree with any suggestions they make. Be free to say the suggestions won’t work, and suggest better alternatives. This shouldn’t be about ego, only about the integrity of the work.

If you feel they aren’t listening, you’re free to call them an idiot, too, if you must. Say it to their face, and don’t worry about getting getting fired — if you’ve established a good enough relationship with them, they’ll thank you for it, too, because they’ll know you have their interests at heart and are passionate about doing your best for them and their business.

(al)

Footnotes

  1. 1 http://smashingconf.com/
  2. 2 http://stuffandnonsense.co.uk/blog/about/i-spoke-at-a-smashing-conference
  3. 3 http://stephanierieger.com/strategies-for-choosing-test-devices/
  4. 4 http://www.flickr.com/photos/opensourceway/4749432145/in/photostream/
  5. 5 http://www.flickr.com/photos/opensourceway/4749432145/in/photostream/
  6. 6 http://stuffandnonsense.co.uk
  7. 7 https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
  8. 8 http://stv.tv
  9. 9 http://hillsborough.independent.gov.uk
  10. 10 http://iso.org
  11. 11 http://www.flickr.com/photos/opensourceway/4370250237/in/set-72157628736893483/
  12. 12 http://www.flickr.com/photos/opensourceway/4370250237/in/set-72157628736893483/
  13. 13 https://speakerdeck.com/u/malarkey/p/bringing-a-knife-to-a-gunfight
  14. 14 http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  15. 15 http://www.stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/
  16. 16 http://dribbble.com/shots/610632-Fluid-Type
  17. 17 http://dribbble.com/shots/414367-Fig-49
  18. 18 http://dribbble.com/shots/610632-Fluid-Type
  19. 19 http://dribbble.com/shots/414367-Fig-49

↑ Back to topShare on Twitter

He's a designer, author and speaker who’s known for his design work, books, conference presentations and contributions to the community. Jeffrey Zeldman (the Godfather of web standards) once called him a “triple talented bastard.” If you know of Jeffrey, you’ll know how happy that made him. Over the last fourteen years, he has made designs for amazing clients and written two books, ‘Transcending CSS’ and ‘Hardboiled Web Design.’ He has given over 50 conference presentations and hosted workshops and training events for other web professionals all over the world.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    What a great friday-afternoon read!

  2. 2

    This is great, as a front-end developer I absolutely agree with your article. It would call for major change in processes, but it just makes sense as the web design industry evolves.

  3. 3

    As a company that is in the process of populating it’s revamped Ecommerce website, with all it’s limitations on a framework that has already been agreed and signed off by those at a senior level, it would have been nice to have this type of insight to take to our decision-makers early in the process. Sound advice from Andy.

  4. 4

    Great article! Loved this feedback workshops idea and will definitely put it into practice.

  5. 5

    It’s easy to preview different responsive layouts in Dreamweaver – although I’ve found some differences to the actual devices. Also – if you’ve the luxury of having the device(s) – try out Adobes Edge. Real time updates on your device while browsing on a desktop! Great :)

  6. 7

    “Rule 2
    Take control of the environment in which you present your designs.”
    It is a very good suggestion: a lesson learnt after the first presentation went wrong. But a good suggestion for people with no experienced in client presentation.

    My point is: try to apply it when the distance between you and the client is more then 1.000 km
    Not all project has a big budget or a rich client.
    Moreover internet should delete distance between people.
    A face by face presentation is more effective but betray the spirt of internet.

    Sebastian

  7. 8

    This is absolutely necessary and fantastic article. Thank you!

  8. 9

    Great article Andy! I do practice sharing my screen thru skype with clients while working on a logo or web design, it takes hours but really gets the ball rolling and helps them realize some unexplainable thoughts. :)

  9. 10

    Concerning static design deliverables: http://styletil.es promotes designproposals which are atmospheric enough to be signed off and at the same time are still versatile enough to be implementend in different display layouts.

  10. 11

    Excellent post! I especially like your thoughts about the feedback process. I will definitely be revisiting this regularly. Thank you.

  11. 12

    Amazing approach, Andy, but you forgot to say how this process is incredibly difficult and time consuming.

    With my agency, we are trying to work in this way, scheduling a meeting every week with our clients, show off what we’ve designed, listening, talking and sketching. And how is difficult working on style without real proportion and grid from a real layout.

    And consider too we’ve a lot of troubles with client’s “big reveal”. They are so involved that they think they are real designer, and say something like: I like it brown, I want it brown, seems good with all things we said, so put it brown (and the result is a piece of sh*t).

    M.

  12. 14

    Nice post! .. I was also at smashingconf … loved your talk too … I totally agree that keeping the client in the loop makes the process much easier … I have a question though … what do you do with a client that tells you they totally trust you and dont want to be in the process but than nag about design and so on .. I have had clients that I really try to get in the process but they just dont make the time! …

  13. 15

    So fed up with companies that hand off 35 + pages of PSD comps. Totally the wrong expectations for sure -especially for something that’s interactive. Excited to see what the future holds for responsive prototyping tools such as Reflow and Divshot.

  14. 16

    This is wonderful juice!

    And it also applies to the sales job. I’ve seen numerous of times how projects end up having a higher price when scoped compared to the initial guestimation. You mail the price offer and never hear from the customer again. However, if you start inviting the customer for a face-to-face walk through of the budget, my experience is that you will always get the project.

    I believe it’s the same principle that applies to the design process: When the customer gets the news with your explanation, instead of having to make up their own entirely, they realize that you want the best for them and are not simply trying to make them look stupid or rip them off.

  15. 17

    Re: steering the conversation when presenting design to a client:

    Just the same as you (the designer) are not present to explain the design process to a user when they first view a website, I would argue that you should not be required to explain your design process to a client. The work should speak for itself. Even the great Paul Rand preferred not to present for concept presentations.

  16. 18

    A really good analysis of an issue that is sure to be arising in agencies all over the world. Responsive design has changed an awful lot of what goes on between a client/agency kick-off meeting and a project going live. This is a nice summary of the best way of involving clients in that process.

  17. 19

    Great article! I wrote a article about general responsive design (http://www.itprecise.com/2012/08/23/responsive-design) and it’s usually a issue getting clients to participate in the responsive design process. Your article shares some great points! Thanks.

  18. 20

    A lot of sound advice: don’t make your designs a mystery, present them – don’t just send them, and design “atmosphere” (or you know, STYLE AND MOOD, just to point out that you are only trying to coin a new term, not create a new idea).

    On the process, this really only works if the designer and developer have ample time to play and create – which, while it sounds just lovely, is more fun than practical or efficient. My small team works very closely to each other, sharing ideas and concepts, but the developer only develops when we have a sound design ready. Honestly, in most cases, developing simultaneously is a crutch of designers who can’t imagine, articulate and convince the client AND themselves that what they’ve created will work when live. Unless you’re working on something completely innovative and never-been-tried-before, development is most efficient when it begins when a (even SEMI-)solid concept has been established.

    On calling your client an idiot, this conflicts with your advice to “leave your feelings at the door”. When you are name-calling, you clearly haven’t left your feelings at the door – if you had, you might instead say something more constructive. It’s also just very bad advice for anyone who is attempting to get along with, oh, anyone.
    I get that you’re probably being facetious, but a lot of inexperienced designers and developers might not read it that way.

  19. 21

    Great article.

    The reason a 960 pixel width is so popular is due to its number of divisors; more divisors allow for more subdivisions of the grid.

  20. 22

    This article is completely relevant to what I am learning in class right now. Our instructor is definitely on the same page as Mr. Clark. A very easy read, Andy Clark eloquently writes in a way that is amusing and informative. Thank you Andy!

  21. 23

    Responsive design is really the thing of the future and to increase the adoption of this technology and technique, i have made Responsive Design Expo (http://responsivedesignexpo.com/). A showcase site for responsive design stuff… now accepting beta invites.

  22. 26

    Thanks for the great article! I’ve found so many times at my workplace that I spend a lot of time designing with certain functionality in mind, only to be told at the point of handing it over to developers, that they don’t have the time/resources to pull it off. Less time would be wasted, and less frustration would be encountered if we all worked together through the whole process! I’m all for agile development.

  23. 27

    Nice ideas nicely written!
    I think that your methodology is perfect, especially for projects you run own your own, or within a small team.
    Relationship is strenghtening the adoption of the final product, and your time investment will be a satisfaction garantee as the project evolves.
    I usually keep photoshop mockups to define the site general architecture and “atmosphere’ as you call it.

    Though, I tend to think that long projects with large teams cannot follow the same logic, as timesheets are not expandable… and designers cannot always attend meetings with clients to defend their choices –> so the distant structurated email feedback may be the easiest channel, if no very big question/problem… which require discussion, being face-to-face or videoconferencing.

    Thanks for the article

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top