Comments on Responsive Comping: Obtaining Signoff without Mockups

54 Reader Comments

Back to the Article
  1. I’ve had a few clients come to me with a web experience based on a persona. Pick on of the 3, 5, 10 personas that best fit your personality/needs and we’ll have the site respond with content/communications designed for that persona.

    I hate this approach. I find that it quickly falls apart or additional personas keep needing to be added as people find more than one visitor accurately straddles two or more personas.

    Has anyone got any insight into a “successful” role-driven experience? Or are they all destined to fail?

    This may be slightly off the topic of the article - maybe not so.

    Copy & paste the code below to embed this comment.
  2. The wireframe/mockup/code mockup has been an ongoing shift/battle for a long time!
    I’ve been on all sides of the equation, right from the insanity of project managers insisting that every single page is created in photoshop, through to the every single page should have a wireframe and right into the ‘design by the seat of your pants’ approach.

    With the *correct* approach of designing in the browser, we’re seeing a blurring of roles.

    The reality is - at least in agencies worth their salt - the boundary between front-end developer and designer is blurring, to the point where front-end developer roles may cease to exist. It will also mean web designers who can’t code will struggle to find work!

    Most good agencies still find themselves in a bit of an impasse - with great designers who lack the finer frontend skills or, quite often, programmers who also lack them!

    Here we see the lines blur again - traditionally, the programmers role has been the wiring and plumbing, leaving the decoration to the designer/front-end folk.

    Not anymore. Top developers are expected to know both - heck, it’s an essential requirement for modern web development.

    Fast paced, fast moving, ever changing - there’s often no time to clearly define roles. Everyone has to muck in, gather round, discuss and code.

    I’m thankfully now at an agency who understands this.

    Copy & paste the code below to embed this comment.
  3. I really have to agree with matthewtrew. The lines are really blurring! I found that I started web design with the browser, as the article stated, following the conventions of Andy Clarke, but as I hunted for jobs I found that they all want you to be a pro at Photoshop (my skills are good for web design but is this a progressive place to work?).

    A graphic designer friend of mine is attempting to better himself at coding HTML, CSS, and even JavaScript in an attempt to procure a good job, while I am attempting to better myself with design since I started on the coding side. I call myself a web designer, rather than front-end developer, for the non-industry people, but I apply to jobs that have either or in the title.

    Like you said, in this day and age of technology everything is going fast and we have multiple roles for one position.

    Loved the article, by the way :P

    Copy & paste the code below to embed this comment.
  4. Along the same lines of responsive design, I’m finding a big push to focusing on conversion rate optimization to feed into the design…to feed into the development. After all, hierarchy and customer-performance in a metrics driven company is centered around the SEO/CRO numbers, right?

    Is this the return of the all-famous, but decade-shirked term, “WebMaster”?

    I’ve come to stop working with freelance designers who don’t have experience with web development. Explaining backwards- (or device-driven)-compatibility to a print designer is futile.

    CRO, responsive design, and accessibility are all functions of improving customer performance. It’s not a surprise they should all be tied together.

    Thanks, Matt.

    Copy & paste the code below to embed this comment.
  5. Great article… ish!
    Why use PS?
    It bugs me that forward thinking articles like this recommend designers switch to HTML and CSS for the majority of their design work but then still use Photo Shop!
    Surely any forward thinking person is better off using Fireworks for any mock ups.
    You know - the software that is designed for web designers to design web pages on.
    Yea - the one that’s just like PS, but quicker, simpler and better for web work!

    Copy & paste the code below to embed this comment.
  6. ...but, we always find that the best way to get your responsive wireframes up to speed quickly is with pen and paper. Both PS / FW or CSS / HTML inhibit the designer from thinking about the design and put focus on the markup and grids or the boxes and shadows…
    We always run out of ideas on paper then move to the screen with a better understanding of what we are designing.

    Copy & paste the code below to embed this comment.
  7. Which tools would the client use to give their feedback on the versioned websites and HTML wireframes?

    I’ve been using annotation software (Notable) to get client feedback on page layouts - and it’s been working well for both the client and I because we know exactly where on a page that a comment refers to.

    Dropping in-place annotations would be a step backward for me: returning to the days of long emails with lots of descriptions of where a design element sits, and what it looks like - before any feedback itself.

    Copy & paste the code below to embed this comment.
  8. At last a good staring point for responsive design. Thank you.
    Even if it is slightly off topic I would like to comment that as important as it it to design from content there is also the additional aspect of context. Let’s take mobile as an example. Often small screens equal mobile devices, i e you often use them away from your desk, sofa or favourite café. You might want to show your screen visitor different content when they are actually right outside your store than when they scan your site at home. In that case context would mean near actually making a buying decision and combined with position (if available) very near actually visiting your store.
    So I think responsive content design is a related, end very exciting, challenge.

    Copy & paste the code below to embed this comment.
  9. Matt thanks for the great article. We have been using live html mockups for some time now and it has worked well for us.

    Copy & paste the code below to embed this comment.
  10. I made a website. When I looked at it on a mobile phone it was small. I mean really small. But when moved the phone closer to my face it got bigger.  I tried viewing the website on my big computer and when I made the window small it went small so I suppose it’s “responsive” - though I was no longer able to make phone calls. Is this normal?

    Copy & paste the code below to embed this comment.
  11. I think this article saved me money. I was going to buy Axure (Interactive prototyping. Almost $600) I hoped Axure would work for me. But now I am very excited to try this approach.


    How do you manage your Git versions of sites and versions for clients like /v1,v2… Do you simply copy a specific Git commit and upload to v1/v2 for a client?

    Thank you.

    Copy & paste the code below to embed this comment.
  12. Really cool read. Heres my opinion. I think there are a load of graphic designers and artists. They all specialize in different things. Not every designer wants to code or even has interest in it. I for one have no interest in it. I’m far too busy designing for print. I run a design firm and print shop. We take care of hundreds of large and small business owners. It doesn’t make sense for me to be someone who codes. If you have no interest in it you won’t have fun and enjoy what they are doing. If you don’t enjoy what you are doing than you’re never going to make anything great. I work closely with my developer to create great web pages. He does what he does best which is code. I do what i do best which is make art and design. Ask him to draw you a stick figure and he couldn’t do it. Ask him to make a great branding and identify package and he falls short. He’s not an artist. He writes code and knows how to make the art i create function. If the artist has the mindset of having the art function and even the most fundamental understanding of what code does, a developer and artist can work closely together. It isn’t rockset science.  I think these mindsets are two different things. When the brain is broken down into right and left we know that the left brain processes information. The right is the arts side. When we think of code we think of information. Processing, layers, strings,  language. I think it’s much more effective to be a master of a specific tool set and not try to do everything. I think what comes out best is when you take a team of designers and a team of coders and they work together. They have meetings so they know what they can get out of each other. Not every designer wants to be a webmaster or developer. I think web design and web development should be tied close together but be done by different groups. That’s when the magic happens.

    Copy & paste the code below to embed this comment.
  13. 90% disagree with this. This seems wrong, unless the intent is to build a half-prototype and then build the actual site from scratch.

    I’ve driven down this road often before, and it’s hard enough to pivot a build to a client’s whims from a scratch-built site without making a spaghetti tangle, much less to start with a sort-of-half-understood-let’s-figure-it-out-as-we-go-along prototype which is then expected to magically morph into a well-built sturdy site. You’re asking for a bunch more time and money spent than you need to spend.

    The 10% I don’t disagree with is if you’re working with a group that understands the potential pitfalls of this process, and builds that in as part of the process (and bills accordingly). If you can all agree that the dev mocks are something you won’t actually be using, then by all means go for it. Otherwise stay away.

    Copy & paste the code below to embed this comment.
  14. I’d also like to point out that developers have made it really easy for designers to make sophisticated Rich HTML 5 pages with web builders. Of course for the big boy stuff like complex websites like facebook, youtube, ect social networking sites that take up a lot of servers you’d want a development team. But Website builders like wix are a great tool. A lot of people actually say that oh you can’t make anything good with that. Which is not the case at all. Designers who don’t know a bit of code can make incredible HTML 5 websites with wix that are also responsive with mobile tied right in. For the small business owner who wants a simple website, for the average consumer looking to have a website for them self, a good designer who knows the principles of design and one who is a great artist can make very good use out of a builder like Wix. Especially now since they have moved to HTML 5 and have pretty much a unlimited amount of layouts and things you can do. You can even let a developer implement custom code into it. Now when we sit back and think about it, it was developers who made wix come to life. People in the development community did this to make it easier. There will always be a need for a real developer. That’s never going to change. At the same time i don’t think website builders like Wix take away from developers at all. I think it benefits all designers and graphic artists. We don’t all want to look at code. We don’t all want to know code. It’s not necessary. Plus with how fast technology moves eventually code will be taken over by these experiences in the browser. Full blown apps in the browser will take away code so the user never has to think about it. The point of technology is for it to fade to the back. Code should fade to the back. There will become a way where code is bypassed all together when it comes to the web for simple things and average websites.

    Copy & paste the code below to embed this comment.
  15. I expected the site to be responsive and was surprised to find a fixed layout and somewhat painful leading. What happened?

    Copy & paste the code below to embed this comment.
  16. I agree that the role-driven approach can lead down the path of madness. I tend to make the assumption that everyone gets equal access to the same content, and that making people “choose their bucket” is wishful thinking at best.Like you said, in this day and age of technology everything is going fast and we have multiple roles for one position.

    Copy & paste the code below to embed this comment.
  17. I love this concept of developing whilst designing. I can see the benefits already. It would be interesting to see how many places adopt this approach.

    Naturally there would be a lot of photoshop involved anyway with developing logos and images, and I personally am not quite ready to make that shift with my design / development skills.

    Still, I love the whole versioning system that keeps clients in line with their contracts and keeps them happy at the same time. Also, I love the Bearded website!

    Copy & paste the code below to embed this comment.
  18. I love this concept, but feel like my clients still need a visual. Wireframes are great for quick real estate decisions, but photoshop will always be my bread and butter… at least for now!

    Great article!


    Copy & paste the code below to embed this comment.
  19. I was just wondering what you guys do if you are in competition against other agencies? Do you present a complete prototype or do you still elaborate PSD mockups for these?

    Copy & paste the code below to embed this comment.
  20. Great article, I’ve always favoured mocking up in the browser. However there are two parts of my process that I’ve yet to refine that I’d be very interested to know how you deal with:

    1) Have you any suggestions on how to prevent different mock up version’s code spilling over into each other? I find myself constantly having to refactor the code with a fine tooth comb, which can be quite messy opposed to coding up a photoshop document which tends to be a one hit process.

    2) At what point do you introduce a CMS/back end? There is an argument for doing it right off the bat, having something like Wordpress linking all your mocked up templates together, providing content to style, injecting WP generated code with all the classes you want to be targeting etc. However one could also argue that this stage of the process should be reserved for the final version of the site, with there being a necessary separation between the creative and technical elements…

    Copy & paste the code below to embed this comment.
  21. I would love to use a similar process where I work. Hopefully soon!

    Good article! Thanks!

    FYI, in FF17, the page at has an issue at around tablet width where the email signup box slips up along the right side of the large main image and becomes unusable.

    Copy & paste the code below to embed this comment.
  22. We have struggled when designing responsive websites at our marketing agency.  Our traditional process is that the graphic designers design the websites then give the designs to the web designers to cod.  With responsive webdesign I now feel the web design should give the graphic designer their a live templated version of the website that the graphic can be designer around. But where odes the customer fit into this process?

    Copy & paste the code below to embed this comment.
  23. I love this approach, but of course, it requires buy-in from all the other members of one’s work group, including setting up and using Sass/Compass. I’d love to try this, or Less, for that matter, but it seems to me that that wouldn’t work unless everyone on the web design/dev team all used it. Am I wrong?

    Copy & paste the code below to embed this comment.
  24. Awesome! Can’t wait to implement this approach on my next project.

    Copy & paste the code below to embed this comment.
  25. We have been successfully trying this approach. The web design and dev teams are co-existing happily.

    @ Matt, totally agree re No spec work and great analogy about the Architect.

    Copy & paste the code below to embed this comment.
  26. From my understanding,  what Matt is defining is a process that saves time because designers code directly as CSS for layout and interactivity and then touching up the design so that the client can experience it
    What the client experiences is actually 3 things
    1. Look & feel
    2. Layout
    3. Interactivity

    If you break it up, there are actually 3 things to approve
    Doing it all one go isn’t wrong, but its alot of effort without knowing whether or not the client would like it or not

    It’s like a blind date where your best friend says he’s planning to introduce the girl of your dreams without qualifying your interests first

    If i were to break it off as a science, the equivalent in human terms would be beauty, attitude, and whether we get along
    There is a certain look that a man looks for, and that is a big attention grabber. This is why we work on look & feel first
    Attitude determines prerequisites that determine our moral boundaries, e.g. religion, vegetarianism, an aversion to politics or what not. They make the relationship tick. (And hence why layout is instrumental in solving problems in the workflow)
    Getting along with someone (interactivity) on the other hand is the nail in the coffin or the key to your heart as it defines chemistry. If for some reason you hate what you see, and dislike her attitudes but you seem to laugh together, it just means that you can be great friends, but you wont have children with them because it doesnt solve your long term goals of settling down (well for me marriage is about having children and growing old with someone i care for)
    But of course if she meets those criteria, she would become the perfect girl that is hot, has a great personality and doesnt get on your nerves and actually makes you laugh all the time (unrealistic, but it’s always a dream)

    From my opinion, this approach talks about time savings of doing all 3 in one go, and getting the you to choose and comment on the girl your best friend has chosen at the blind date at the first glance

    For me, I would have worked on looking after a list of female candidates with a look that i know he can live with and cross reference that with a personality i know he is comfortable with.
    After that, with maybe a list of promising 3-4 candidates who meet the above, i’ll let them have a blind date and then leave it up to chemistry (interactivity) to determine the hit or miss

    I can’t say it will work most of the time, but the likelihood of success increases because we have qualified the candidates through an elimination process

    Matt’s technique works well if you can master all 3 attributes and mix it together well enough to always guess what the client wants correctly most of the time (which is possible to pull off if an art director gets to work with a designer who lays out stuff in CSS and touches the look & feel up with elements created in Photoshop or Fireworks after the layout is done ).

    In the absence of that, it creates a bigger drain on resources each time the client says no.
    In an utopia where all team members are as equally gifted in all disciplines as one another, this process is actually brilliant as each team member can pretty much be Rambo and a one-man army to take on the bad-guys.
    However utopia as always is a dream. We acknowledge that dream, and strive to achieve it. Hopefully one day, if we work hard enough and plan for it, it will become closer to reality

    Copy & paste the code below to embed this comment.
  27. In the meanwhile, our process is really simple (Not fancy, but it works)
    For look & feel we try to define brand elements visually to dictate taste and aesthetic appeal based on the client’s profile, customer base and brand positioning for appraisal, so unfortunately this is almost always a storyboard with several moods to it
    For layout we do a wireframe, experiment with several layouts to solve workflow issues or improve cognitive understanding. I acknowledge that Photoshop isnt the best tool for this. This is why i use powerpoint (gasp ^_^) because it’s so simple that when i share it with my design team, they can literally just copy and paste it out when they set it out in fireworks or HTML and not redo things from scratch

    Honestly layout & design is heavily intertwined, but they are really separate problems to be dealt with.
    When I break it up as separate issues, I can get the customer to decide on a aqua-jelly looking theme or a tree-hugging nature theme for a client and then still suggest layouts that solve a business process as a separate problem.

    Last but not least, for interactivity, this is where we actually build the solution and let the client play with it. For us, it actually becomes faster at this stage because most of the things have been set in stone as they have been approved.
    We would just need to make the interactive elements more engaging, intuitive and spectacular but honestly this is really just icing on the cake.

    Anyway I think Matt’s approach is a very workable solution for very mature teams with skillsets that cross disciplines. For more traditional teams where the players dont do what the other team member does, perhaps the traditional approach would be more suitable as it breaks problems into tasks that can be solved by disparate teams.

    Alternatively, if Adobe gets their act right, they start releasing a dreamweaver that has the same tools as fireworks and actually vomits out HTML 5 that defines layout, style and interactivity (like Flash) with a timeline ^_^ and then all of us can just work off the same material rather than passing it back and forth

    Copy & paste the code below to embed this comment.
  28. One huge draw back that was pointed out by tomliv is that by creating a HTML mockup, sending a URL to a client for demo, you will most certainly end up in discussions regarding browser compatibility issues, something that’s not what you want on the table when you want a DESIGN approved. At least you need to be aware of this.

    With a static image or series of images you don’t have to deal with browser related issues.

    Suggesting that there is ONE way to do this and all other ways are dumb is just wrong. All designers, clients and companies are different, just because you hate Photoshop doesn’t mean it sucks and just because designing in the browser sucks for you doesn’t mean it sucks for everybody.

    Personally I prefer to do my web designs in Photoshop as it’s a creative process that works for me and when you get graphic heavy you really need to visualize the design as a whole before you can export .png files for backgrounds and icons and graphics etc.

    Copy & paste the code below to embed this comment.
  29. The french translation of this article has just been published :

    Copy & paste the code below to embed this comment.
  30. Creating a cross-browser responsive designs with HTML5 & CSS3 media queries has worked well. Truly Responsive Web Design is the best for the future.

    Copy & paste the code below to embed this comment.
  31. Really like the article and agree completely. We have been doing this for quite a while. It works particularly well for sites that have a lot of content, because you get a really good view of how the content effects the design. The thing that was doing our heads in was getting structured feedback from clients , we tried notable but found that ‘state’ and browser and screen sizes etc weren’t captured by the notes and we had no way to explain to the clients what we had changed in a new version. So a bit of a shameless plug here,  ( but I think it’s very relevant ) we built webseam. It allows you to put up a website, the client comes in and can browse as normal, when he finds a problem he can add a note, make a content change, make an image change and suggest a move. The developer gets a structured list of issues each with a code snippet and a link to the relevant part of the website. When an updated site is available the system figures out what is new and highlights those things to the client. We are in beta right now and would love developers like you to have a look! Please excuse the plug but we think its pretty cool and really helps with the process you set out in this post

    Copy & paste the code below to embed this comment.
  32. MG - Thank you for this awesome article! I’m a total newbie to web design, just starting to consider how I would work with a client, so most articles on collaborative web design processes go over my head. But your article was understandable, and I feel like I have a new handle on how to approach my first design process with a client later this year. Thank you!!!

    Copy & paste the code below to embed this comment.
  33. Great article..watched a talk given by Brad Frost and he referenced it so here I am. I wanted to know, with the changes in Photoshop now giving you exportable CSS, are you using it more or less in the process ? It seems Adobe is listening to developers/designers in this regard.

    Copy & paste the code below to embed this comment.
  34. I want to say. It is really nice job. Thanks

    Copy & paste the code below to embed this comment.
  35. Nice post.

    I have been using Balsamiq for internal prototypes and mockups.

    It was a useful way to put ideas on paper quickly.

    Then, I would use Invision to create simple interactive prototypes with Balsamiq designs (low fidelity).

    Some months ago, I learned basic HTML and CSS.

    Using a text editor to create pages was too slow, though.

    Since I started using Webflow ( it’s easier and faster to create prototypes in HTML/CSS/Javascript than the combination of Balsamiq + Invision.

    So, my workflow now is:

    1. Writing user narratives to establish priorities.
    2. Brainstorming layouts with pen and paper.
    3. Using Webflow to create interactive prototypes.

    Copy & paste the code below to embed this comment.
  36. Both css and html should work together to have great outcome to your web design. :) i have a new project for web design which is Adjustable and that’s purely CSS and html design.

    Copy & paste the code below to embed this comment.
  37. Adjustable electric beds & rise recliner chairs – Price match promise on our adjustable beds & chairs – we will beat any genuine like for like quote and give a further 5% discount if you can find cheaper.

    Copy & paste the code below to embed this comment.
  38. I would prefer HTML 5 also this is great there’s a lot of new elements where you can customize your website, i’ve used to do for my personal site which is and stainless steel it was fun doing html5 on my web

    Copy & paste the code below to embed this comment.
  39. FOR Me css is the best for web designing
    here’s my site
    IT Support Birmingham

    Copy & paste the code below to embed this comment.
  40. Sorry, commenting is closed on this article.