How to annotate a website: four ways, from a screenshot to pins on the live page

First, what you are annotating for

"Annotate a website" covers three different jobs, and most of the frustration with annotation tools comes from using one built for another job.

• Notes for yourself or a study group. You want to highlight a passage, add a comment, and find it again next week. The page itself does not change. A text annotation layer is the right tool.
• A quick point to a colleague. "This button, here." One screenshot with an arrow, pasted into a chat. The screenshot tool you already have is the right tool, and anything heavier is slower.
• Feedback someone will act on. A client reviewing a staging site, a designer reviewing a build, a round of changes before launch. The comment has to say exactly which element, on which page, at which screen size, and it has to survive the page being fixed and reviewed again. Only a tool that pins to the live page does this well.

The sections below take each in turn.

1. Annotate a screenshot with what is already on your computer

For a one-off note, do not install anything.

• Microsoft Edge has a screenshot tool built in. Press Ctrl+Shift+S, or choose Screenshot from the menu, capture the area or the full page, then use Draw to mark it up and Share, Copy or Save.
• macOS captures with Shift-Command-4 for an area or Shift-Command-5 for the options panel. Click the thumbnail that appears in the corner and the Markup tools open: arrows, boxes, text, a highlighter.
• Windows has the Snipping Tool. Windows key + Shift + S captures, and the editor has a pen, a highlighter and shapes.
• iPhone and iPad take a screenshot with the side and volume buttons. Tap the thumbnail, and in Safari choose Full Page to capture the whole scrolling page, then draw on it.
• Chrome and Firefox can capture a screenshot but do not include drawing tools on the desktop. Capture, then open the image in your system's editor, or use one of the extensions in the next section. For the whole length of a long page in one image, GoFullPage below is the quickest route.

This is the fastest way to say "this one" to a person who is already in the conversation with you. It falls apart when there are twenty of them, when the screenshot is from a phone and the developer is on a desktop, or when nobody remembers which page it came from.

2. Annotate the text of a page with an extension

If the job is reading rather than designing, a text annotation tool keeps your notes attached to the words.

Hypothesis is the best known. It is a free browser extension that lets you highlight any text on a public page and attach a note, privately or in a group, and the annotations stay with the passage when you come back. It is built for students, researchers and reading groups, and it is widely used in universities for exactly that.

Browser reading modes and apps such as Readwise Reader and Matter do a similar job for articles you have saved.

What these do not do is talk about the design. You can highlight a sentence, not a button, and a developer cannot act on a highlight.

3. Annotate a screenshot with an extension built for it

Between a one-off screenshot and a full feedback tool sit the screenshot extensions. They capture a page, including the full scrolling page, and give you arrows, boxes, numbered markers, blur and text, then a link to share.

GoFullPage is the one to start with if the point is the whole length of the page. It captures the page from top to bottom in one image, including the parts you would have to scroll to, and handles scrolling panels and embedded frames inside the page. The capture saves as PNG, JPEG or PDF. Its crop and annotation editor sits in the paid tier, so on the free version you capture the full page and draw on it in your system's editor. It is a Chrome extension and runs in other Chromium browsers such as Edge.

Others with drawing tools built in include Awesome Screenshot, Nimbus Capture, now part of FuseBase, Markup Hero and FireShot, all available for Chrome and most for Firefox and Edge. Several have free tiers that cover occasional use.

They are good for a designer sending a marked-up page to a developer, or for a bug report with a visible pointer. They still produce a picture of the page rather than the page, so the annotation does not know which element it is on, it is fixed at one screen width, and when the page changes the picture is out of date.

4. Annotate the live website with pins

A website annotation tool loads the actual page at its URL inside a review, and the reviewer clicks the thing they mean. The comment is anchored to the element, so it carries the page, the element and the screen size without anyone writing them down, and the developer can click the comment and be taken to the spot.

This is the category built for feedback that has to be acted on, and it is where the tools differ most. Some are built for bug reports going to developers, with browser data and console logs on every pin: BugHerd and Marker.io. Some are built for client review, where the reviewer has never seen the tool and needs to leave a comment in one click without an account: Pastel, Markup.io, Ruttl and HopBack. Our comparison of twelve of them is at the best website feedback tools.

Three things to check before you pick one:

• Does the pin stick to the element or to a screenshot? Element pins survive a re-deploy and a change of screen size; screenshot pins do not.
• Does the reviewer need an account? For a client, the answer has to be no.
• What happens after the comment? A list of open comments is fine for a one-off. A project with rounds needs rounds, a finish and a sign-off.

How to annotate a website for client feedback, in four steps

1. Paste the URL into the review tool. Live, staging or a password-protected build. The tool loads the page inside the review, so the client sees the real site, not a picture of it.
2. Set the rounds and the deadline. Two rounds, due Friday. Written down before the link goes out, so the client knows the shape of the review and the tool can send the reminders.
3. Send the link and let the client click. They open it on any device, type a name, click the element they mean and type. Every comment arrives with the page, the element and the screen width attached.
4. Fix, re-deploy, open round two. The pins are still on their elements. Resolved comments stay in round one, unresolved ones carry forward, and when the client is happy they hit Approve and the review records who and when.

Which method for which job

Questions people ask