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.
jack2234
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.
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.
I agree that specialization is very important, and that no one can do everything well. I do think that in the web design discipline (which is distinct from the graphic design discipline), there is necessarily some degree of overlap. Just as print designers needs to understand enough about the print process to design printable work, a web designer needs to understand enough about the web to design websites well. In my opinion that means some degree of coding knowledge.
And let’s get real for a second: calling HTML/CSS coding is a bit of a stretch. It’s not C++. It’s not even PHP. It’s a skill set that is completely within the grasp of most designers.
And because these skills are things the Bearded designers already had, it made sense to shift our process this way. Because of those changes, we’re seeing benefits.
That doesn’t mean you have to work this way, of course. I’d really encourage you and everyone else to just reexamine your process, and see what about it does and does not make sense right now. Getting stuck in ruts is easy; don’t just do it because that’s how you do it. But if your process seems to be working for you and you don’t see any problems, congratulations! Keep up the good work and enjoy the bounty of your labors.
I definitely do not promote “sort-of-half-understood-let’s-figure-it-out-as-we-go-along” design processes. This article focuses on the design phase, and did not have the room to discuss the research and planning phase. I did outline some of that process in an article for .net Magazine a while back: http://www.netmagazine.com/features/dont-go-it-alone-collaborative-web-design
… but the key is to have a good sense of purpose, scope, and feature set before you dive in.
Planning is absolutely essential to a successful web project, regardless of the tools we use to create our designs – otherwise we’re just spinning our wheels.
I think the link you’re referring to is to their current live site, which is as of this post AAHomecare’s old, fixed-width website.
There are links further down in the article that show various stages of the redesign. Once AAHomecare is finished with content entry, we’ll be deploying the new site to that same URL.
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!
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!
Copy & paste the code below to embed this comment.
eva.mik
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?
As an agency, we don’t participate in spec work. Personally, I believe spec work is harmful to our industry, and that we should be paid for our time.
You can’t ask three contractors to work on your house, then proclaim one the winner and not pay the other two. Web designers are skilled workers, as well, and our time is worth the cost.
Copy & paste the code below to embed this comment.
Piers Georges
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.
tomliv
I would love to use a similar process where I work. Hopefully soon!
Good article! Thanks!
FYI, in FF17, the page at http://aafh-css.heroku.com/ 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.
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?
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?
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
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
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.
The french translation of this article has just been published : http://www.pompage.net/traduction/conception-responsive-obtenir-validation-sans-maquettes
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
46 Reader Comments
Back to the Articlebobudd
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.
jack2234
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.
Jon-Paul Kelly
I expected the aahomecare.org site to be responsive and was surprised to find a fixed layout and somewhat painful leading. What happened?
louisvuittongz
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.
Matt Griffin
Thanks, Lex!
We’re just using different folders for v1/v2/etc. We copy and paste v1 and rename it v2, then never touch v1 again.
I know it’s a little quick and dirty, but it gets the job done. :)
–MG
Matt Griffin
Jack,
I agree that specialization is very important, and that no one can do everything well. I do think that in the web design discipline (which is distinct from the graphic design discipline), there is necessarily some degree of overlap. Just as print designers needs to understand enough about the print process to design printable work, a web designer needs to understand enough about the web to design websites well. In my opinion that means some degree of coding knowledge.
And let’s get real for a second: calling HTML/CSS coding is a bit of a stretch. It’s not C++. It’s not even PHP. It’s a skill set that is completely within the grasp of most designers.
And because these skills are things the Bearded designers already had, it made sense to shift our process this way. Because of those changes, we’re seeing benefits.
That doesn’t mean you have to work this way, of course. I’d really encourage you and everyone else to just reexamine your process, and see what about it does and does not make sense right now. Getting stuck in ruts is easy; don’t just do it because that’s how you do it. But if your process seems to be working for you and you don’t see any problems, congratulations! Keep up the good work and enjoy the bounty of your labors.
–MG
Matt Griffin
bobudd,
I definitely do not promote “sort-of-half-understood-let’s-figure-it-out-as-we-go-along” design processes. This article focuses on the design phase, and did not have the room to discuss the research and planning phase. I did outline some of that process in an article for .net Magazine a while back: http://www.netmagazine.com/features/dont-go-it-alone-collaborative-web-design
… but the key is to have a good sense of purpose, scope, and feature set before you dive in.
Planning is absolutely essential to a successful web project, regardless of the tools we use to create our designs – otherwise we’re just spinning our wheels.
–MG
Matt Griffin
Jon-Paul,
I think the link you’re referring to is to their current live site, which is as of this post AAHomecare’s old, fixed-width website.
There are links further down in the article that show various stages of the redesign. Once AAHomecare is finished with content entry, we’ll be deploying the new site to that same URL.
–MG
Mike Bunce
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!
Matt Griffin
Thanks, Mike, glad this was useful to you!
–MG
pixelheap
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!
Eric
eva.mik
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?
Matt Griffin
Eric,
But we do show them visuals! The wireframes are for internal purposes, but a client sees this: http://aafh-css.heroku.com/
For me, that is a much more communicative visual than any PSD.
MG
Matt Griffin
Eva,
As an agency, we don’t participate in spec work. Personally, I believe spec work is harmful to our industry, and that we should be paid for our time.
You can’t ask three contractors to work on your house, then proclaim one the winner and not pay the other two. Web designers are skilled workers, as well, and our time is worth the cost.
MG
Piers Georges
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…
tomliv
I would love to use a similar process where I work. Hopefully soon!
Good article! Thanks!
FYI, in FF17, the page at http://aafh-css.heroku.com/ 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.
Jamesmc
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?
Chris Raymond
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?
Gareth Daine
Awesome! Can’t wait to implement this approach on my next project.
Design Junction
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.
Chan Kin Peng
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
Chan Kin Peng
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
Andreas Norman
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.
Frank Taillandier
The french translation of this article has just been published : http://www.pompage.net/traduction/conception-responsive-obtenir-validation-sans-maquettes
Jessica Wilson
Creating a cross-browser responsive designs with HTML5 & CSS3 media queries has worked well. Truly Responsive Web Design is the best for the future.
Webseam
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