How do I markup a landing page without Figma?

Take a full-page screenshot and open it in Preview on Mac (Shift ⌘ A for the Markup Toolbar) or in Microsoft Edge (which has a built-in drawing tool for PDFs and images). Both are free and require no software install. For client feedback, a review link they can click directly is faster than an annotated screenshot — they comment on the element they mean without downloading anything.

Can my client markup my landing page on their phone?

With a screenshot method, not reliably — annotated images are hard to read on a small screen and the client can't add their own notes without an app. A browser-based review link works on a client's iPhone: they open the link, tap the element, leave a note. No app download, no login.

How do I collect feedback on a landing page before it goes live?

Share a staging or preview URL through a review tool instead of a screenshot. Your reviewer gets the live interaction — real scroll behaviour, real hover states — and can comment on the exact element. If the staging URL requires a login or is behind Vercel's password protection, share a screenshot or export the page as a static HTML file and run it locally while taking the screenshot.

What is the best way to markup copy changes on a landing page?

For short copy notes ('change CTA to Book a call'), pin a comment to the element. For longer rewrites — new headline, restructured benefit block — keep a parallel Google Doc where you and the client can draft in prose. Trying to fit full copy rewrites into image annotations results in annotated notes on top of annotated notes.

How do I know when all the landing page markup feedback has been addressed?

Annotated screenshots have no resolution state — you have to manually reconcile each note against the revised page. A threaded review tool lets you mark each comment resolved as you push the fix, so both you and the client can see what's done. Without that, a three-round revision project means three annotated images to cross-reference.

How is marking up a landing page different from marking up a design file?

A landing page is live in a browser — it scrolls, has real hover states, and responds to screen size. A design file is a static mockup. Landing page markup often catches things a Figma frame won't: a CTA button that shifts on mobile, a nav that collapses in a way the client doesn't expect, or copy that reads differently when it's real text at real size instead of a design comp.

drafty

How to markup a landing page for client feedback

Quick answer

To markup a landing page, take a screenshot and annotate it in Preview or Figma, or share a live link through a review tool your client can click without an account. The screenshot method works well for visual notes; a live-link method is better when the client needs to comment on specific elements — like a CTA button that's hard to select in a flat image, or copy they want to reword in context.

Step 1

Screenshot and annotate in Preview or Figma

Take a full-page screenshot of the landing page (on Mac: ⌘ Shift 5 → 'Entire Page' in Safari; on Windows: browser Print → Save as PDF, then screenshot). Open it in Preview (Mac) and press Shift ⌘ A for the Markup Toolbar — callout bubbles, arrows, and text labels bake into the file. In Figma, paste the screenshot as a frame and use the annotation tool or a Redlines plugin to add numbered callouts. This works for clear visual feedback: 'move this logo up', 'make the hero font heavier'. It breaks down when the client has ten scattered notes across a long page — the annotated image becomes a puzzle to read, and each revision round produces another annotated image on top of the last.

Step 2

Annotate on the live page using a browser extension

Browser extensions like Marker.io, Pastel, or the Markup.io Chrome extension let you annotate on the live landing page — click the element, pin a note, screenshot the exact spot. The extension captures the URL, viewport, and browser metadata alongside the comment, which helps reproduce layout bugs. The gotcha: your client needs to install the extension too, and most won't. 'Can you just install this Chrome thing' is the step that kills the review loop before it starts. Extension-based tools work well for internal teams already set up on the same tool — not for a client who just wants to tell you the hero text is wrong.

Step 3

Share a review link the client opens in their browser

Proxy-based tools load the landing page through a special URL. Your client opens the link, clicks any element — the headline, the form, the button that says 'Get started' when it should say 'Book a call' — and pins a note. No extension, no account, no screenshot required. This is the method that actually works for client approvals: the link opens on their phone at 9pm, they leave three comments in two minutes, and every note lands on the exact element they clicked. The one limitation: if your page is behind a login or a Vercel preview URL that blocks crawlers, you may need to screenshot and share the image instead.

Step 4

Keep copy and CTA feedback in a shared doc alongside the visual markup

Landing pages have two kinds of feedback that don't mix well in the same markup session. Visual feedback ('hero image too busy', 'button colour doesn't match the logo') belongs pinned to the element. Copy feedback ('the headline doesn't land', 'this benefit is buried in paragraph four') often comes as prose — the client wants to rewrite it, not circle it. A practical split: use a live review link for element-pinned feedback, and keep a shared Google Doc open on the side for longer rewrites. The mistake is trying to fit both into annotated screenshots — the copy notes get buried under the visual ones and you end up negotiating over which version of a headline is inside a red circle.

The faster way

If the client is the one who needs to markup the landing page — not you — skip the screenshot loop. Drop the page URL into Drafty and share the link. They open it in any browser, click the hero, the CTA, the nav item they want renamed, and pin a note right there — no account, no extension. Every note lands in one threaded place, anchored to the exact element. You reply, push a revised version to the same link, and resolve it. No 'Re: Re: landing-page-v3-FINAL.png'.

Open a live demo

Questions

How do I markup a landing page without Figma?: Take a full-page screenshot and open it in Preview on Mac (Shift ⌘ A for the Markup Toolbar) or in Microsoft Edge (which has a built-in drawing tool for PDFs and images). Both are free and require no software install. For client feedback, a review link they can click directly is faster than an annotated screenshot — they comment on the element they mean without downloading anything.
Can my client markup my landing page on their phone?: With a screenshot method, not reliably — annotated images are hard to read on a small screen and the client can't add their own notes without an app. A browser-based review link works on a client's iPhone: they open the link, tap the element, leave a note. No app download, no login.
How do I collect feedback on a landing page before it goes live?: Share a staging or preview URL through a review tool instead of a screenshot. Your reviewer gets the live interaction — real scroll behaviour, real hover states — and can comment on the exact element. If the staging URL requires a login or is behind Vercel's password protection, share a screenshot or export the page as a static HTML file and run it locally while taking the screenshot.
What is the best way to markup copy changes on a landing page?: For short copy notes ('change CTA to Book a call'), pin a comment to the element. For longer rewrites — new headline, restructured benefit block — keep a parallel Google Doc where you and the client can draft in prose. Trying to fit full copy rewrites into image annotations results in annotated notes on top of annotated notes.
How do I know when all the landing page markup feedback has been addressed?: Annotated screenshots have no resolution state — you have to manually reconcile each note against the revised page. A threaded review tool lets you mark each comment resolved as you push the fix, so both you and the client can see what's done. Without that, a three-round revision project means three annotated images to cross-reference.
How is marking up a landing page different from marking up a design file?: A landing page is live in a browser — it scrolls, has real hover states, and responds to screen size. A design file is a static mockup. Landing page markup often catches things a Figma frame won't: a CTA button that shifts on mobile, a nav that collapses in a way the client doesn't expect, or copy that reads differently when it's real text at real size instead of a design comp.

Keep exploring

How to markup a design How to markup a web page Review a website How to annotate a PDF

Stop emailing files back and forth.

Share one link. They comment on the exact spot — no account, always the current version.

Open a live demo