Blog Post

Protonote: Annotating Website Prototypes

Protonotes sandbox pageI like simple. Simple means I don’t have to think too hard and – done well – has a kinda elegance about it. Mike Padilla‘s Protonotes is one such idea, a service that provide a simple and elegant solution to a clear problem – annotating web sites that are works in progress with sticky notes.

Re-launched just a few days ago from its previous incarnation as an Internet Explorer based tool, the now cross-platform Protonotes lets site designers and developers add annotation capability to a web site, service, application or prototype by simply dropping in a few lines of Javascript code.

Though it’s possible to achieve the same effect by wikis, email, IM or discussion boards, there’s nothing like direct manipulation and seeing comments right in context. Try the sandbox demo for yourself here.

Once the code is added to your pages, any visitors to the site are able to add, remove and edit notes (see the black toolbar in the screenshot above) without the need for any additional software, browser extensions or client applications. It’s also possible to wire in a MySQL database to store notes, in case you want to keep things inside a controlled environment.

Though many annotation and collaboration tools are available to perform similar functions, Protonotes real strength is its simplicity in implementation for site developers and designers, but more importantly, customers of those service providers can simply visit their site in development and comment directly without the need for third party software or training in the use of a particular collaboration tool. If you can operate a Post-It note, you can use Protonotes!