Surf the Dream A discourse of links and articles from Justin Avery

Web design feedback tool for project teams

Ideas occur to me at the strangest times.

Being on the internet all of the time means that it can be a bit of a struggle to stay focussed on just one thing. One of the benefits of this is that I occasionally have a moment of clarity and realise

“Yes, this is exactly what I need and why doesn’t it exist just yet”

The other day I had one of these thoughts, although I couldn’t tell you exactly where it occurred the main thing is that I had my notebook with me to jot the idea down before it was lost.

Responsive Web Design Testing

I’ve dropped the term “Responsive” off the heading here because at this point I’m going to assume that you’re all building responsive sites by default… and therefore we can just call it Web Design.

A typical situation

There have been some great articles about designing in the browser or deciding in the browser by folks much smarter than myself. Dan Mall, Stephen Hay, Brad Frost, they’ve all had something to say around the process.

Typically we would see this:

  • Client needs a new website
  • Content review/strategy/rewrite (after all we want to base our designs upon the content and not Lorem Ipsum)
  • Moodboards, wireframes, design collages, getting to understand the general direction of the redesign
  • Move onto some photoshop comps to decide on some specifics
  • Further pad out the browser based wireframes with more fidelity, or start to ‘cutup’ the photoshop designs that have come from the designer

At this point we’ve got a few people working on the project. The client, project manager, art director, designer/UX, front end person…. maybe a few others.

Some of the issues that we might see are:

  • Browser based wireframes aren’t quite telling the full story, or there’s some issues with how they are layed out.
  • Photoshop designs don’t cover a few breakpoint edge cases, and the front end person needs to “fill in the gaps”
  • Client reviews the first set of browser based designs from the front end dev, and things aren’t working the way they expected
  • Art Director or Design check out the front end browser comps and there’s some discrepancies between what the direction was and the outcome.

Each of these problems are unique, each of them involve various people. All of them are important.

The process after this is an email from X to Y explaining the problem, or if you’re working with Github or Basecamp (yay for the client) then it’s updated as a discussion. There’s usually a screenshot involved as well highlighting the potential issue.

This is great, but it’s not the best way to proceed through a series of reviews and fixes to keep everyone working together towards the same goal.

What would be nice is if there was a browser extension or bookmarklet that could help. The tool would….

  1. log the user into the system
  2. click to clip the section of the web page you are making a point about
  3. a screenshot is taken of the entire browser window (viewport) and highlights the clipped section
    the clipping user now has the ability to add some comments around the issue or intended user experience
  4. the content is then stored ???? (in Evernote maybe to begin with), and along side it the following information is also captured as metadata
    • Date/Time
    • OS (version/patch/release)
    • URL
    • Browser (version/patch/release)
    • networking information (if available)
    • User details
    • Viewport
    • DPI

    This will help categorise the shots that are taken to focus on particular browsers/OS/URL’s etc.

I suggested using Evernote as the storage because a lot of people are already using it and it takes some of the complexity away, however this could just as easily be configured to run as a complete stand alone web app.

Possible downsides

  • Does it already exist?
  • Is the workflow going to make sense, is it easy enough to do without a second thought
  • Will the client be able to do it?
  • Can bookmarklets achieve this, or does it need to be browser extensions?
  • If browser extensions will all clients be able to install and use it?
  • Will it run across Safari, Chrome, IE, Opera, Firefox?
  • Does it need to be an OS specific App (OSX and Windows)?
  • There are tools like Pinegrow that will suck down a current URL and turn it into an editable webpage that you can export at a later date. Could/should this be able to do the same?
  • Could this be integrated into Evernote, or GitHub, or does it need to be the complete package rather than something that sits over the top?


I’d love your feedback and thoughts, especially if something is out there that already does this kind of thing, or if there are other issues I’ve not thought of just yet.

View Permanent Page

Latest Links

More articles...

  1. How to host your podcasts

    Jeremy Keith recently wrote about podcasting over at The article starts off as a bit of an overview of the article Ten Years of Podcasting: Fight Human Nature ( In the article by Matt he gives kudos to HuffDuffer, a little web app that Jeremy put together that allows you to capture a list […]

    Read more

  2. Staying focussed when tired

    Woah. I must be friggin tired. It’s only 9:27 and I’ve already have 3 occasions where I thought of something that I could do, went to do it, and then struggled to recall just what I was trying to achieve. The forgetfulness of what the task that I’m currently on is made worse by the […]

    Read more

  3. Monitoring Performance with Digital Ocean

    Performance is the most important thing when it comes to your website. A lot of people say it’s the content, but a poor performing website will see users leaving in their droves if the load times are too slow (although they wouldn’t be going there in the first place if it weren’t for the content, […]

    Read more

  4. Write as you do

    As you work your way through a problem that you haven’t faced before always try and make some time to document your process. Lately I’ve been working on a few projects that have been out of my usual comfort zone. They’ve involved a little more javascript and a bit more system administration work. While I […]

    Read more

  5. Aaron Draplin on logo design

    This is a fantastic short video as Aaron Draper takes you through the approach to designing a logo. Super inspirational and made me want to start creating immediately.

    Read more

  6. The Art of Innovation – Guy Kawasaki at Gartner Barcelona

    1) Make Meaning… not money Make the world a better place. When you are building something ask yourself “is this making the world a better place?” 2) Make Mantra Most people come up with a Mission Statement. Most mission statements are developed through the following process. 50 senior employees have an off site week. This […]

    Read more