5 Free Annotation and Collaboration Tools for Web Projects

This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

Specific, contextual feedback is crucial for teams collaborating online, which is why it’s so important to make receiving it as fast, efficient and easy as possible. Asking for feedback can be tedious and is often done out of context, for example, via e-mail.

However there are numerous tools available to make the task of gathering and giving feedback for web projects simpler and swifter. This article is interested in those that focus on annotation and are available freely to the widest possible audience.

Here are five of the best free tools to annotate and collaborate on the web. If you’re partial to a particular tool available, let us know in the comments.

1. MarkUp.io

MarkUp lets you express your thoughts and ideas quickly and easily on any webpage. Because it’s browser based, it doesn’t require any download or installation. You can just drag the Get MarkUp icon into your bookmarks or favorites bar. When you visit a website, just click the MarkUp bookmarklet to load the toolbar, so you can begin annotation.

When you click the publish button and slide to confirm, you will receive a unique URL with the image and notes captured, making it easy to share with anyone, seeking feedback where necessary. For those visiting a MarkUp URL, you will see a respond button. When you press this, you can either keep the old annotations or start afresh with just the original image.

The MarkUp toolbar is simple and effective with five different drawing tools to choose from, and should the toolbar happen to get in the way, you can just drag it over using one of the two buttons located on each end of it.

A neat feature is the ability to use Ctrl + Z to undo your previous action if you make a mistake, and the backspace key will remove the element from the page.

2. Bounce App

Bounce is a lightweight application for giving quick feedback on a web page. You enter the URL you want to annotate, add your notes, and then share your feedback with anyone you want. It’s free for everyone, has no logins or accounts, has no limit on who you share your feedback with and doesn’t require any software to be installed. It’s actually the lightweight version of ZURB’s Notable app.

Just input the URL of the webpage that requires feedback and hit the grab screenshot button. A rather fun bouncing ball appears as the screenshot is processed. The screenshot of the webpage is then displayed with the controls at the top. It’s a good idea to enter your name before you begin, so all the comments are labeled in your name. Then click on the specific portion of the screenshot where you’d like to leave feedback and click and drag the mouse over this. A box will then appear where you can add your comment and click OK.

All comments are numbered sequentially, so knowing the order of priority is simple. You can add a name to the screenshot and click save to get a public URL, which you can distribute to anyone. There are also the neat options of sending the link directly to Facebook and Twitter. The people you’ve shared your page with can make their own notes, save them and bounce them back.

It’s also worth noting that TinyBounce, the smaller, sleeker little brother to Bounce was created for the 10K EventApart competition and received a Notable Mention.

3. SharedCopy

SharedCopy is a bookmarklet that allows you to share and mark up webpages. Once you drag the SharedCopy icon to your bookmarks toolbar, you can then click this bookmark whenever you need to make an annotated copy of a page.

You can add text notes, simple lines and shapes, and highlights to the page. When you’re done, click save and grab the unique URL for your SharedCopy page and share it with anyone for a simple way to collaborate. Saving essentially creates a ‘separate copy’ of the webpage with its own URL, containing your annotations. You can set your pages to be published (public) or private – a person must then know the URL to access it.

Anyone can immediately use SharedCopy as a guest without any registration, although you can create an account, which gives you access to further features such as:

Moderation and Notification: Know when someone comments on your copy and moderate other commenters.
Profile and RSS: Upload a profile image, gather all your copies in a blog-like archive and share them through RSS.
Add-Ons and Integrations: Sync with your blog, bug tracker, Twitter, Basecamp, Tumblr, FriendFeed, Backpack and Delicious.

With several API’s available, it’s also possible to integrate SharedCopy into your own services.

4. WebKlipper

WebKlipper allows you to easily annotate web pages with virtual post-it notes and a highlighter. Once you enter the page URL, WebKlipper will open the site with a menu bar displayed at the bottom. It then generates a unique URL that you can share with the rest of your team members. Once they open this URL, they will see the page with your annotations. When you’ve created your Klip, you’re also able to edit both its title and its unique URL.

By selecting a piece of text and clicking ‘Highlight,’ it gives the selected text a yellow background. Once created, comments can be resized and repositioned. By clicking ‘Share,’ you can share the URL of the annotated page via e-mail or directly through Twitter and Facebook.

In the menu bar is the link to Notifications, which are a quick and easy way of keeping track of updates on a Klip. Once you add yourself to the notification list for the selected Klip, you’ll start getting e-mails from the creator and modifiers of it. You are also able to view the original page and the different versions of the Klip for quick access to its version history.

WebKlipper also allows you to annotate images and PDFs by uploading these to its website.

5. Diigo

An abbreviation for the “Digest of Internet Information, Groups and Other stuff,” Diigo is a social annotation service that lets users add highlights and notes in situ to any web page. Any annotation can be made either public or private, with other Diigo users able to read public comments and reply/interact to comments. Diigo combines aspects of social bookmarking, annotation, full-text search, tagging, and sharing. You can also upload images that can be tagged and shared with your group.

A browser add-on allows you to share your annotations with others or send directly to Twitter, Facebook, Delicious or your blog. It has an impressive suite of tools, which are worth checking out, from browser extensions to a Diigo API.

The groups feature is an excellent collaborative research and learning tool that allows any group of people to pool their findings through group bookmarks, highlights, sticky notes and a forum. With group sticky notes, group members can interact and discuss important points right on the web page, preserving the original context. You can choose to make your group public, private or semi-private.

Tags and lists provide two different ways to organize information. Tags are best for diverse and disparate information, while lists are best for focused information. You can use lists to organize, share and display a specific collection of bookmarks. Another neat feature is the ability to play, browse and annotate any list of URLs as an interactive slideshow.

Are you currently using any of these tools? If so, please share your thoughts and experiences in the comments below.

More Dev & Design Resources from Mashable:

– What Does Web Design Say About Your Small Business?
– 5 Design Trends That Small Businesses Can Use in 2011
– 10 Free WordPress Themes for Small Businesses
– 5 Beautiful Tumblr Themes for Small Businesses
– 10 Free Drupal Themes for Small Business

Image courtesy of Flickr, Mykl Roventine

Reviews: Basecamp, Delicious, Diigo, Facebook, Flickr, FriendFeed, Tumblr, Twitter

More About: annotation, annotations, bounce app, collaboration, collaborations, collaborative tools, design, development, diigo, List, Lists, markup, sharedcopy, web apps, web design, webklipper