On this page
Annotating a website means pointing at part of a page and saying what should change. There are four common ways to do it. They differ less in how easy they are for the person giving the feedback than in how much work they leave for the person who has to act on it.
What makes a note actionable
Whoever picks up a note needs four things from it. If one is missing they have to ask, and the change waits for the answer.
- Which element. Not “the button” on a page with six buttons. The exact one.
- Which page. The full address, and the state the page was in: signed in or not, which product option was chosen, whether a menu was open.
- Which device. The browser, the operating system and the width of the window. “On my phone” describes a layout, and the fault may exist only there.
- What should change. The result that is wanted, not only the complaint.
| A note that needs a reply first | A note someone can act on |
|---|---|
| “The button looks off.” | “On the product page, at phone width, the Add to basket button is cut off on the right. It should fit inside the screen.” |
| “Change the heading.” | “Home page, main heading: change it to ‘Tableware made in Cornwall’.” |
| “The form is broken.” | “Contact page, in the browser on my work laptop: I press Send and nothing happens. No message, no email.” |
The four ways people do it
Screenshots in an email or a document
The reviewer takes a screenshot, draws an arrow on it and pastes it into an email or a document. Everyone knows how, and there is nothing to set up.
What it costs you: the picture shows the element, if the crop is generous, but not the page’s address, the browser or the window size. Notes arrive in several emails from several people, and somebody has to copy each one into a task list.
Good for: two or three comments, or a site where you cannot add anything to the page.
A shared spreadsheet
One row for each comment, with columns for the page, the comment, who raised it and its status. It gives you one list that can be sorted, which the email method never does.
What it costs you: the reviewer has to describe a place on a page in words, such as “third paragraph under the second heading”, and you have to find it from that description. Addresses are pasted by hand and are sometimes the wrong page. The device column exists and is nearly always empty.
Good for: long lists of text corrections where the place is obvious from the words themselves, and content audits.
A browser extension
The reviewer installs an extension, switches it on over the page and marks the page up. A good one captures a screenshot along with the address and the browser’s details.
What it costs you: every reviewer has to install it before they can say anything, often with an account as well. Work computers are frequently locked against installing extensions. On a phone, installing one is often not possible, so the phone layout gets reviewed on a desktop or not at all.
Good for: your own team, who review sites every day and install it once.
An on-page tool
A script on the site adds a commenting layer for people who open a review link. The reviewer clicks an element and types. The tool records the element, the address and the device by itself, and every note lands in one list.
What it costs you: someone has to add the script to the site, the tool is one more thing to pay for, and the client has one new thing to learn. Some tools of this kind load the site through a proxy instead; sites behind a login or a staging password often break that way, so check how the one you are considering works.
Good for: rounds of client feedback on a real build, on every device.
What each method leaves for you to do
| Method | Which element | Which page | Which device | The reviewer needs |
|---|---|---|---|---|
| Screenshots by email | In the picture, if the crop allows | Only if they paste the address | Rarely given | Nothing new |
| Shared spreadsheet | Described in words | Pasted by hand | A column left empty | Access to the sheet |
| Browser extension | Recorded | Recorded | Recorded, mostly on desktop | An install, often an account |
| On-page tool | Recorded | Recorded | Recorded | A link |
The first two are free to start and cost you later, in time spent finding things and asking questions. The last two cost something up front and hand you notes that are ready to work on.
How to write the note itself
Whatever the method, these habits make a note quicker to act on. Pass them on to a client before a round starts.
- One change in each note. Two changes in one note means one of them gets missed.
- Say what you want to see, not only what is wrong.
- For wording, give the exact new text in quotation marks.
- Say whether it applies to this page only or to every page that has the same part.
- For something broken, say what you did, what you expected and what happened.
- Leave out “make it pop”. Say what the change should achieve: easier to read, harder to miss, shorter.
Annotating phone and tablet layouts
The phone layout is the one that gets reviewed least, because annotating on a phone is awkward with every method except the last.
- Review on a real phone where you can. A narrowed desktop window shows the layout, but not touch, the on-screen keyboard or the phone browser’s own bars.
- Turn the phone on its side once. Landscape is where menus and pop-ups tend to break.
How ClickNote does it
ClickNote is an on-page tool, built by an agency for client rounds. You add one script tag to the client’s site. It does nothing for ordinary visitors and loads only for someone who has opened the review link. Their site runs in their own browser as usual: it is not loaded through a proxy.
- Which element: the reviewer clicks it. The note stores its CSS selector and XPath, its text and a snippet of its HTML, and where the theme or page builder keeps it.
- Which page: the address and the page title, with a screenshot of what was on screen.
- Which device: the browser and operating system, the window size, and whether the site was showing its mobile, tablet or desktop layout.
- What should change: the reviewer’s own words, with a thread underneath for your questions.
The reviewer needs no extension and no account: they confirm their email with a 6-digit code. The review tools work in a phone’s own browser, and on a desktop a Mobile view button opens the same page in a phone-sized window. That window shows the real responsive layout; it is not a device emulator. A comment about a page in general goes in a note about the whole page.
See how the script is installed, or read how to run the round around it.
Written in November 2026. Spotted something out of date? Tell us.