Client Relationships and the Multi-Device Web

by Matt Griffin

41 Reader Comments

Back to the Article
  1. This. This is the way I want to work with clients. No surprises, no squirreling away to design land, and actionable feedback. Working with them to execute awesome. Fantastic article, Matt.
    Copy & paste the code below to embed this comment.
  2. Thanks, Chatman! It took a while to come to these conclusions, but it definitely feels right now that we’re in it. Glad you agree!
    Copy & paste the code below to embed this comment.
  3. I really dig where the lo-fi, static mockup comes into play because instead of doing the full homepage design and some interior pages in Photoshop, you can just design a sliver of the site as long as the main idea gets across. Then code the whole site and make changes there. Well played.
    Copy & paste the code below to embed this comment.
  4. Thanks, Chris! It’s been working well for us.
    Copy & paste the code below to embed this comment.
  5. Enlightening post. One of the realities we’re finding with so many different desktop display settings out there is that some of what we used to be able to address with static comps is being further fleshed out in development we’ve handed the site over to the client for QA. On responsive, that’s been the expectation we set from the get go - show some wireframes, do a design comp, know that there will be at least a couple revision rounds once the template is built. I love the idea of doing a lo-fi static mock up. That would make the process clearer for the client and smoother for us all.
    Copy & paste the code below to embed this comment.
  6. That sounds about right, Ben, thanks!
    Copy & paste the code below to embed this comment.
  7. It’s fantastic post Matt. Thank you for sharing your alchemy. I love the idea that a bit of psychology is involved in the whole process.
    When client takes part in every stadium of the project, he or she is much more aware of consequences of his/her previous decisions.
    But I must also admit that lately I became tired of over-explaining every detail to every new client.
    Every project puts me in the situation that I have to use my design, programming AND teaching skills.
    Can you imagine asking a guy that repairs your car that you want to be involved in the process of fixing it and you also want to hear explanation of every step he takes? That’s why we all need posts like this, Matt. Every project is different but the process of making it should once be defined precisely.
    Copy & paste the code below to embed this comment.
  8. Thanks, Bart! The thing about that analogy is that the car guy doesn’t necessarily need you to explain the ins-and-outs of what your car is. He’s the car expert, and he’s going to fix it. Come back at 5:00, bro. Websites are different animals, though. We may be world experts in how websites are designed and built, but we begin each project utterly ignorant about most clients’ organizational and user needs. Which is part of what makes our industry so collaborative and eternally interesting. Clients need us to help them understand the web and their website’s place there; we need them to help us understand what’s going to happen on those websites, and ultimately what those sites are for. It’s a vital and challenging collaboration, every time. Best to embrace it! Or in the words of Brad Hamilton:  http://www.youtube.com/watch?feature=player_detailpage&v=k2NaHBVVYzY&t=57
    Copy & paste the code below to embed this comment.
  9. Awesome article. I came through your website by tumblr. I am using tumblr first time. Your article is like those published in expensive “cars” and “automobile” magzines. Even better than them.
    I have bookmarked your website and stored this article to read (offline) later, again.
    Copy & paste the code below to embed this comment.
  10. Love this! Definitely a direction I’ve been evolving towards, and I never enjoyed the process of wireframing, seems like an unnecessary step in the current web design process. Great article!
    Copy & paste the code below to embed this comment.
  11. Excellent article, Matt. I’ve been putting a lot of this approach in effect for a while now, because it’s easier for clients to get what we’re doing for their brand when we convey things in a language that means something to them: Stats, real-world examples, how process and decisions impact timelines and budgets, etc. Not to mention, I found that clients thought of me (or the agency) as more of a valued leader when involving them earlier and more often. Long ago, teammates pelted me with rocks and garbage for blasphemous invitations to the client to join us in our creative inner sanctum. Thanks for the affirmation that the times they are a changin’, yo.
    Copy & paste the code below to embed this comment.
  12. Yes, invite them in right away! They tend not to bite, in my experience.
    Copy & paste the code below to embed this comment.
  13. Hi Matt, great article, and perfect timing for me. I work in small web studio and we’re looking at re-thinking our processes. I’d be interested to hear your thoughts on this process, but on a smaller budget. Or do you have a cut off point for this kind of workflow?
    Copy & paste the code below to embed this comment.
  14. Hi Matt, very good article, and pretty much the way we’re trying to work from ~1 year. (You cannot simply showcase a responsive design in Photoshop or, at least, it’s hugely better for us to work on real markup to avoid subsequent responsive somersaults.) We found it perfect for small projects but when it comes to medium sized projects where many different page layouts are involved, starting the development process with a couple of HTML/CSS prototypes implies that other pages (not yet sketched) may require extra development work in the revision loop, when you’re already in the CMS/framework of your choice. On the other side, providing *all* the page mockups in HTML/CSS has proved to require developing some backend logic to hold menus/basic automation/multinguage/etc, and that development effort seems to be wasted at the end. What’s your approach when many page layouts are involved?
    Copy & paste the code below to embed this comment.
  15. As far as concern of multi device web, there is a term called responsive web design. Creative Website Designing And Development Companies use this technique while there are still many in this arena who even don’t know about this term. Responsive web design is a technique in which a website is being developed in such a manner that it automatically adjusts its dimensions according to the device it is being browsed on.
    Copy & paste the code below to embed this comment.
  16. Chris, The Warhol project used s an example here was actually about the smallest budget we’ll ever do ($10k). Our usual low-end cut-off is around $30k. But I think this process works well for smaller budgets, you just have to adjust project scope accordingly. For instance, this project was a simple 1-page static HTML site. There was no back-end functionality at all. We also had to be careful to keep all of our meeting and design hours within the specified range, and let the client know when we were approaching our limits.
    Copy & paste the code below to embed this comment.
  17. Macaroni Bros, Funny enough, this is a section that we cut from the article! So here’s a little outake / B-side for you : “Now the Warhol site is very small in scale. So what can we do when we don’t need to design a handful of page layouts, but rather dozens or hundreds?  What budget can sustain that number of detailed in-browser mock-ups? Style guides are not new. But style guides for the web are still relatively in their infancy. As an industry, web design has yet to really tap their full potential. Take this style guide for Flat UI, for example. This guide aims not to show finished page layouts.  Instead it provides a clear definition of all the moving parts on the site, and some examples of how these elements might be assembled – addressing the interests of what Brad Frost has started calling Atomic Design. With a few example in-browser mockups to show page layouts, and a comprehensive style guide, the design and styling of large scale sites could be seriously streamlined.”
    Copy & paste the code below to embed this comment.
  18. Nice article!  This is a good way to outline a project.  “Get It In Writing” and the last paragraph of “Conversations, Not Revelations” will save hours of work and headaches.
    Copy & paste the code below to embed this comment.
  19. Matt, what a valuable article and something I hope to see more of in the design community. We’ve been in the process of trying to eliminate the “big reveal” and showing a client prototype seems to be the best way to make sure they truly understand how you intend to move forward. Do you ever have instances where the client is hung up on the low-fi mockup and prefers to see something closer to the designed final version? Particularly if they are used to print or if they have designed a website using the conventional big reveal process in the past.
    Copy & paste the code below to embed this comment.
  20. “I find that a useful exercise is to simply pull up a responsive site on my phone and hand it around the room, while I resize the same site on the projector or TV that I’m using for the presentation.” Fantastic stuff. Totally agree with the “Show, don’t tell” philosophy. I struggled with explaining RWD to clients initially. For some reason resizing the browser wasn’t enough for them to grasp it was a “device” thing - not just a “size” thing. So I put together something I thought would help them “get it”. http://www.jamus.co.uk/demos/rwd-demonstrations/
    Copy & paste the code below to embed this comment.
  21. Yes yes yes. Thank you. In a similar vein is Stephen Hay’s “Responsive Design Workflow”, well worth a look.
    Copy & paste the code below to embed this comment.
  22. Thanks for sharing Matt!
    We’re trying to make our CMS setup as flexible as possible, in order to handle the revision loop on the *real* website.
    Not always easy, but could be a promising way to work.
    As most people pointed out, people with very broad skills (css, js, backend coding) is becoming a must.
    Copy & paste the code below to embed this comment.
  23. I truly spend time educating my clients..Also, this is were the importance of great blog articles come into play also..This way you can direct your client to the article that there questions are based on, and you really don’t have to repeat your self over and over again..A visual show and tell works great, this kills 2 birds with one stone…
    Copy & paste the code below to embed this comment.
  24. I truly spend time educating my clients..Also, this is were the importance of great blog articles come into play also..This way you can direct your client to the article that there questions are based on, and you really don’t have to repeat your self over and over again..A visual show and tell works great, this kills 2 birds with one stone…
    Copy & paste the code below to embed this comment.
  25. I absolutely love this article, Matt! I’m all for transparency and this really does a great job of debunking the myth that the client shouldn’t be involved throughout the process. I do have a question for you, though. Being a recent college grad with a skill set that ranges from graphic design to startup development to web analytics and development. How would you suggest I go about breaking into the UX/UI scene specifically without having that specific of a project in my portfolio? (I have done plenty of work in the segmented parts of UX/UI design, but not an entire project? Thanks!
    Copy & paste the code below to embed this comment.
  26. I have found that simplifying terminology and dumbing things down for clients whilst judging their level of awareness works then educating them in the explaining each aspect in the correct terminology afterwards works well and helps it stick.
    Copy & paste the code below to embed this comment.
  27. Thanks, Jeff!
    Copy & paste the code below to embed this comment.
  28. Heidi, None of our clients have yet balked at the idea of seeing the designs *before* the budget’s all gone. :) They seem to (rightly) really enjoy getting to give feedback early, while there’s still a reasonable chance to change direction. As long as they know this is low-fi stuff, and they’ll be getting the hi-fi experience later on, it seems to be a non-issue.
    Copy & paste the code below to embed this comment.
  29. That’s pretty neat, Jamie! In my experience, though, nothing beats a real device in their hands. If nothing else, every client should have a smart phone in their pocket. Just make sure you’ve spent time with device testing before you go that route! :)
    Copy & paste the code below to embed this comment.
  30. Jake, Stephen Hay is a gentleman and a scholar. Thanks for sharing, here’s the link to a video of his talk, for those who are interested: https://vimeo.com/45915667
    Copy & paste the code below to embed this comment.
  31. Brad, Wait, there’s a scene? ;) Best way in my opinion is to learn by doing, and reach out to the community for help. Go to meet-ups, talk to people, etc. It’s amazing how open and willing to help everyone is in our community. Here’s some related advice from a blog post from a while back: http://blog.bearded.com/post/18437972041/the-medium-is-the-message Hope that helps!
    Copy & paste the code below to embed this comment.
  32. I like the idea of including the client in the design process. I think it would save a lot of time and effort for both parties, and it would help to avoid the problem of being too possessive over ‘your’ designs. It’s hard for it not to feel like a personal insult sometimes if you put a lot of effort into something and the client doesn’t like it. If the clients are involved in design choices from the start that could be avoided.
    Copy & paste the code below to embed this comment.
  33. any advice for employing this wisdom (that i actually think is pretty awesome) in a corporate context? i.e., any practical tips for utilizing this kind of approach for in-house builds for company developers?
    Copy & paste the code below to embed this comment.
  34. The client must have some control over the project, but when he starts to act like he knows better than the designer, things start to get irritating. While it’s true that if the client is involved in the design from the beginning, he might be satisfied with the product (hey, it has some of his ideas), but if the client will distribute it to users and the feedback will be negative, guess who will be the one to blame? :)
    Copy & paste the code below to embed this comment.
  35. Ahhh… both funny and wonderful! Funny, because I was a mainframe programmer for 20 years - mostly Assembler + some 4GLs - and it was a rare programmer who actually even considered listening to the user community when building a new application. It was always “We know what you need, code it up, hand it over, and then wonder why they didn’t like it”  ;) And the sad part was that I ALWAYS involved my users from step 1 in a project, just like this article recommends - and my fellow ITers thought I was strange because of it. That’s the “funny” part - the “wonderful” part is that the current generation seems to be getting it (YAAAAAY MATT!!) - and it’s even more important today, with complexities like Responsive Design now being a major part of any reality-aware web developer’s work. Excellent article!  :)
    Copy & paste the code below to embed this comment.
  36. Im definitely for the involvement of clients throughout the design process, always happy to take on advice from the client and show him/her throughout the development of the site. Otherwise we may as well just design our own website.
    Copy & paste the code below to embed this comment.
  37. Thanks Matt for sharing your thoughts. I always practice to educate clients about latest web techs & trends. Involving them through out the design process initially may look hard but it will make them love their website and also it improves the chance of referring our company to their circle. Gobi
    Adorn Consultants
    Copy & paste the code below to embed this comment.
  38. It is great article!
    Thank you for sharing.
    ネットビジネスde副収入
    Copy & paste the code below to embed this comment.
  39. As a business owner i know the importance of Responsive site so i have developed my site from Creative Web Agency and they did a very good job.
    Copy & paste the code below to embed this comment.
  40. I have worked on my site with my team of developers and make it responsive. You can check emarc.co.uk site.
    Copy & paste the code below to embed this comment.
  41. this is nice articles for client relationship. really i am appreciate your articles. in web designing client relation ship is the better option to retain the client. how to retain your client do responsive web designing as well as do high quality SEO Services.
    Copy & paste the code below to embed this comment.