How to give better website feedback (without endless Slack threads)

9 min readKevin LarssonKevin Larsson
How to give better website feedback (without endless Slack threads)

We've all been there: you're reviewing a website, juggling Slack threads, Figma links, and screenshot attachments — only to realize half the feedback was missed, and the rest is already outdated.

Clear, actionable website feedback is the difference between a smooth launch and a painful one. But most teams still rely on scattered tools and vague messages to review sites.

After years of running website reviews for clients and internally, we've learned what separates feedback that ships websites faster from feedback that creates chaos. Here's the full playbook.

Why website feedback breaks down

Here's what typically happens:

  1. Someone drops a URL in Slack with, "Can you check this?"
  2. Feedback starts flying in: "This looks weird on mobile," "What's up with the nav?" or just "Fix this?"
  3. Screenshots are pasted (without context), and nobody knows who's doing what
  4. Somebody sends contradictory feedback in a separate email thread
  5. The developer spends more time decoding feedback than fixing issues

The result? Confusion, miscommunication, and duplicated effort.

The problem isn't your team — it's the process. When feedback is disconnected from context, even smart people produce vague, unhelpful comments.

The 7 principles of actionable website feedback

1. Be specific about the element

Bad: "The header looks off." Good: "The main navigation bar on the homepage — the padding between menu items is inconsistent. 'Features' and 'Pricing' have 24px gap but 'Blog' and 'Contact' have 16px."

Specificity eliminates guesswork. When you name the exact element, page, and property, the developer can fix it in minutes instead of spending time figuring out what you're referring to.

Tip: If you're using a visual annotation tool, pin your comment directly on the element. The location is the specification.

2. Describe what you see vs. what you expect

The most useful feedback format is: "I see [X], but I expected [Y]."

Bad: "The button is broken." Good: "On the pricing page, the 'Start free trial' button is blue (#3B82F6) but the design shows it should be green (#22C55E). The hover state also doesn't change color."

This format works because it gives the developer two clear reference points — the current state and the desired state. No ambiguity about what "broken" means.

3. Include the viewport and device

Responsive issues are invisible without viewport context. A comment that says "this looks weird" is useless if you don't know whether the reviewer was looking at a 375px phone or a 1920px monitor.

Bad: "The cards are overlapping." Good: "On mobile (iPhone 14, 393px), the feature cards on /features overlap each other. The second card's top edge sits behind the first card's bottom border."

Even better: review at specific breakpoints using a tool that captures viewport information automatically. When you pin a comment in a multi-device canvas, the breakpoint context is attached to the comment — no extra effort needed.

4. One issue per comment

Resist the urge to dump everything into a single message. When one comment covers three separate issues, it's hard to track, hard to assign, and hard to mark as resolved.

Bad: "The hero needs work — the headline font is wrong, the CTA button is too small, and the background image doesn't load on Safari."

Good (3 separate comments):

  • "Hero headline is using Inter but should be Geist Sans per the design spec."
  • "CTA button on mobile is 32px tall — needs to be at least 44px for accessible touch targets."
  • "Background image in the hero section returns a 404 on Safari 17. Works fine on Chrome."

One issue per comment means each item can be independently assigned, prioritized, and resolved.

5. Distinguish bugs from preferences

Not all feedback is created equal. Make it clear whether something is objectively wrong or subjectively "not what you'd choose."

Bug: "The contact form doesn't submit. Clicking 'Send' returns a 500 error." (This is broken — it must be fixed.)

Preference: "I think the section title would look better in sentence case instead of title case." (This is subjective — it's a suggestion.)

Mixing bugs and preferences without labels forces the team to guess which comments are blocking and which are optional. Use priority levels if your tool supports them:

  • Critical — broken functionality, accessibility failures, data loss
  • Medium — visual inconsistencies, minor responsive issues
  • Low — subjective suggestions, polish items, "nice to haves"

6. Provide reference when possible

When you're asking for a change, show what "right" looks like.

  • Link to the design file: "Should match frame 14 in the Figma file."
  • Reference another page: "The button style should match the one on /pricing."
  • Include a screenshot: "Here's what the approved design looks like at this breakpoint."
  • Specify exact values: "Font size should be 18px/28px line-height, not 16px/24px."

The more reference material you provide, the fewer questions the developer needs to ask before they can start working.

7. Review in context, not from memory

Don't write feedback from memory. Review the actual live site, on the actual device, at the actual breakpoint. Comments written after the fact ("I think I noticed something on mobile yesterday") are almost always less accurate and less actionable than comments pinned in real time.

This is the biggest advantage of using a visual annotation tool — you leave feedback while looking at the issue, so the context is automatically captured.

Good vs. bad feedback: examples

BadGood
"Nav is broken""Mobile hamburger menu on /features doesn't close after clicking a link. It stays open and overlays the page content."
"Fix the dropdown""The 'Products' dropdown on desktop hovers fine in Chrome but doesn't trigger at all on Firefox 121."

Typography

BadGood
"Text is hard to read""Body text on /blog posts is 14px — can we bump to 16px? Line length on desktop is also ~95 characters, should be under 75 for readability."
"Fonts look wrong""H2 headings render as Inter on staging but the design spec uses Geist Sans. Might be a missing font import."

Layout and spacing

BadGood
"Spacing is off""Section padding below the hero is 24px on mobile but the design shows 48px. The gap between the hero CTA and the features section is too tight."
"Cards look weird""At 768px (iPad portrait), the 3-column card grid breaks to 2 columns but the third card wraps to a new row with no bottom margin, causing it to touch the section below."

Functionality

BadGood
"Form doesn't work""On /contact, entering an invalid email and clicking 'Submit' shows no validation message. The form silently fails. Expected: inline error message below the email field."
"Buttons are broken""The 'Learn more' button on the pricing FAQ accordion opens the correct accordion but doesn't scroll the viewport to show the answer. User has to manually scroll down."

Role-specific feedback guides

Different roles notice different things. Here's what to focus on based on your role in the project.

If you're a designer

  • Visual fidelity. Check that fonts, colors, spacing, and component styles match the design file.
  • Responsive consistency. Review each breakpoint, not just desktop. Use CSS inspection to verify rendered values against the design spec.
  • Component consistency. The same button should look the same everywhere. Check across pages, not just on one.
  • Interaction design. Hover states, transitions, and animations should match the intended behavior.

If you're a developer reviewing someone else's work

  • Cross-browser testing. Check Chrome, Firefox, and Safari at minimum. Edge if your audience requires it.
  • Edge cases. Test with long text strings, missing images, empty states, and slow network conditions.
  • Accessibility. Tab through the page with keyboard only. Check focus states, skip links, and screen reader labels.
  • Performance. Watch for layout shifts, slow image loads, and unnecessary re-renders.

If you're a project manager

  • Content accuracy. Check that all copy, links, and CTAs match what was approved.
  • User flows. Walk through the primary conversion paths. Can a user go from homepage to sign-up without confusion?
  • Completeness. Is every page in the sitemap built and linked? Are there dead ends or broken navigation paths?
  • Scope alignment. Does the build match the agreed scope? Flag anything that's missing or that was added without approval.

If you're a client or stakeholder

  • First impression. Does the homepage communicate what the product/service does within 5 seconds?
  • Brand alignment. Do colors, tone, and imagery feel right for your brand?
  • Content review. Read every word. Check for typos, factual errors, and outdated information.
  • Call-to-action clarity. Is it obvious what you want visitors to do on each page?

Don't worry about technical details — that's the developer's job. Focus on the experience and the content.

How to handle conflicting feedback

When multiple stakeholders review the same page, conflicts are inevitable. One person wants the headline bigger; another wants it smaller. One person loves the hero image; another thinks it should be replaced.

A simple resolution process

  1. Collect all feedback first. Don't resolve conflicts during the review. Let everyone submit their comments independently.
  2. Identify conflicts. Group comments that contradict each other.
  3. Let the feedback coordinator decide. One person (usually the PM or product owner) resolves conflicts by choosing the direction that best serves the project goals.
  4. Communicate decisions. Reply to the conflicting comments with the decision and reasoning. This creates a record so nobody asks "why did we go with option B?" three weeks later.

The worst approach? Trying to please everyone by compromising on every conflict. That produces a website designed by committee — incoherent and directionless.

Tools that make better feedback possible

The right tool doesn't just collect feedback — it structures it so every comment is visual, contextual, and trackable.

What to look for:

  • Pin-based commenting on live websites, not just screenshots
  • Multi-device canvas for reviewing at different breakpoints simultaneously
  • Guest access so clients can review without creating an account
  • CSS inspection for verifying design fidelity without DevTools
  • Status tracking (open, in progress, resolved) so nothing falls through cracks
  • Priority levels to separate critical bugs from nice-to-have polish items
  • Threaded replies for discussions that stay in context

Huddlekit was built specifically for this workflow — visual, contextual feedback on live websites with zero onboarding for external reviewers.

Say goodbye to scattered feedback

Imagine reviewing a website and seeing all your team's notes neatly tied to exact elements — across mobile, tablet, and desktop — with no Slack digging, no version control issues, and no "what did they mean by this?" moments.

That's the clarity that comes from better feedback practices, supported by the right tool.

You don't need another channel. You need a cleaner, clearer way to collaborate — one that fits into your existing workflow instead of fighting against it.

Get started for free


Try Huddlekit right now – for free. You'll never go back.