Website annotation words in plain English
To annotate a website is to put numbered comments directly on the live page, so instead of writing “the button under the second photo looks off” your client drops pin 3 on that button at phone width and types “make this green”.
A short glossary for anyone giving or collecting feedback on a live web page.
- Live page
- The real, published website (or a staging copy on its own address), not a picture of it. Text, fonts and layout are exactly what visitors get.
- Pin
- A numbered marker dropped on one spot of the page. The number ties that spot to a note, so a long thread can say “pin 4” and everyone looks at the same thing.
- Comment mode
- While it is on, a click on the page adds a pin instead of following a link. Turn it off to click around the site normally, then switch it back on.
- Width preset
- The screen width the page is drawn at: phone, tablet or desktop. Each pin remembers its width, because a page rearranges itself at every size.
- Framing
- Showing one site inside another page. Many sites switch this off with a security header, and then the frame stays blank.
- Feedback list
- Every pin as numbered text with the page address, the width and a rough position. It pastes cleanly into an email, a chat or a task.
Sample website annotations and the copied list
Made-up review rounds on an example site. Each row shows where a pin was dropped, the note typed against it, and the exact line it becomes when you press “Copy as list”, position included.
| Page and width | Pin | Line in the copied list |
|---|---|---|
| Homepage, round 1 (example), 1440 px | Logo looks squashed | 1. Logo looks squashed (12% from left, 90 px from top) |
| Pricing page on a phone (example), 390 px | Plan names wrap onto three lines | 1. Plan names wrap onto three lines (50% from left, 810 px from top) |
| Menu on a tablet (example), 768 px | Menu button hard to tap | 1. Menu button hard to tap (92% from left, 60 px from top) |
| Contact form (example), 1440 px | Add a phone number field | 1. Add a phone number field (35% from left, 1200 px from top) |
| Footer, round 2 (example), 1440 px | Update the copyright year | 1. Update the copyright year (80% from left, 2850 px from top) |
| Blog post on a phone (example), 390 px | Image runs off the right edge | 1. Image runs off the right edge (10% from left, 1800 px from top) |
Limits of annotating a live website in a frame
Pins are not saved anywhere
Everything lives in this browser tab. Reload, close the tab or press Clear and the pins are gone, so copy the list before you leave the page.
Pins can drift if the page changes
A pin sits at a position on the frame, not on a page element. If the site loads a late banner, plays an animation or is edited after you pinned it, the spot underneath can move.
Only the first 3,000 pixels are shown
The page is drawn in one tall frame so pins stay put while you scroll. Very long pages are cut off at the bottom, and a section sized to fill the screen can look stretched; for those, take a full-page screenshot and annotate that instead.
Sign-ins, forms and pop-ups are switched off
For safety the frame cannot submit forms, open new windows or take over this page. Pages behind a password show their sign-in screen, and checkout steps will not work.
The client still needs their own copy
This tool is for you, on your screen. To let a client pin comments themselves, send them the copied list to react to, or use a review tool built for sharing.
Questions about annotating a website
How do I annotate a website?
Type the page address above and press Load. Pick phone, tablet or desktop width, turn on Comment mode and click any spot to drop a numbered pin, then type what should change in its note. When you are done, press “Copy as list” and paste the numbered feedback wherever your team works.
Can I comment on a live website without installing anything?
Yes. This website annotation tool runs in your browser tab with no extension, no account and no code on the site. Your browser loads the page straight from its own server, and the pins and notes stay on your device.
How do I give feedback on a website design so it is easy to act on?
Use one pin per change, and write the fix rather than the feeling: “make the headline one line on phones” beats “the top feels heavy”. Check at phone width as well as desktop, because most layout problems only show on small screens, and keep the list numbered so replies can say “3 is done”.
Is this website annotation tool really free?
Yes, with no sign-up, and up to 99 pins per page. It is free because it runs entirely in your browser: nothing is uploaded, stored or tracked, so there is nothing for us to charge for.
Why is the site blank when I try to annotate it?
That site has told browsers not to show it inside other pages, which many large sites and some hosting setups do. Your own projects usually load fine. If it stays blank, take a screenshot of the page and pin it with the screenshot annotator instead.
Can I share a link to my annotated website?
No, on purpose. A link that opens any site inside this page could be used to dress up a fake login page, so the address is never put in the page link. Share the copied list instead, which includes the page address.
Does the website I annotate know I am looking at it?
It sees an ordinary visit from your browser, just like opening it in a tab, but no referrer is sent and the frame cannot read anything on this page. Our server never fetches or stores the site.