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:

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:

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


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.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.