Annotating a website means leaving comments on the page itself: this heading is too long, that button goes nowhere, the spacing on this card is off. Done well, it's the fastest way to review a site. Done badly, it's a 40-line email that nobody can act on.
This guide covers the four common ways to annotate a website, when each one works, and how to write annotations a developer can fix without coming back with questions.
Four ways to annotate a website
1. Screenshots with markup
Take a screenshot, draw a red circle, paste it into an email or a doc. Everyone knows how, and it needs no tools.
The problems start when someone has to fix it. A screenshot doesn't say which page, which screen size or which version it came from. It can't be replied to. After two rounds, nobody knows which circles are done.
2. A shared document or spreadsheet
A row per issue, with the page URL, a description and a status column. It's better than email because everything sits in one place and has a status.
It still relies on descriptions like “the second card on the pricing page,” and the sheet drifts from the site as soon as the layout changes.
3. Browser annotation extensions
General-purpose extensions let you draw and type on top of any page. They're quick for personal notes, but most save the drawing as an image, so the result is a screenshot with extra steps.
4. Element-level feedback tools
A website annotation tool such as Skyelight pins each comment to the element on the live page. The comment knows the page, the element and its styles. It becomes a thread people can reply to, assign and resolve. It stays on the element, so the next reviewer sees it in context.
This is the method that scales past one reviewer and one round, and it's what the rest of this guide assumes.