[{"data":1,"prerenderedAt":693},["ShallowReactive",2],{"blog-posts":3,"post-\u002Fblog\u002Fscreen-grab-annotation-apps":301},[4,19,31,50,64,79,94,105,117,131,143,153,164,177,186,201,210,222,234,245,256,267,280,289],{"path":5,"title":6,"description":7,"date":8,"modified":8,"draft":9,"locale":10,"category":11,"image":12,"translationKey":12,"tags":13,"readingTime":18},"\u002Fblog\u002Fwebsite-handover-checklist","Website Handover Checklist: 43 Items to Hand Over at Launch (Free Template)","A website handover checklist for agencies and freelancers: accounts, domain, hosting, backups, licenses and support terms, plus a free handover document.","2026-10-29T08:00:00+00:00",false,"en","guides",null,[14,15,16,17],"website handover checklist","website handover document template","website handover process","web agency",12,{"path":20,"title":21,"description":22,"date":23,"modified":23,"draft":9,"locale":10,"category":24,"image":12,"translationKey":12,"tags":25,"readingTime":30},"\u002Fblog\u002Fclaude-code-fix-bugs","How to Use Claude Code to Fix the Bugs Your Clients Report","How to use Claude Code to fix bugs: what it needs from a bug report, how to connect it to client feedback over MCP, and how to review the fix before you resolve it.","2026-10-27T08:00:00+00:00","workflow",[26,27,28,29],"claude code fix bugs","claude code mcp","ai bug fixing","bug report",7,{"path":32,"title":33,"description":34,"date":35,"modified":36,"draft":9,"locale":10,"category":11,"image":37,"translationKey":43,"tags":44,"readingTime":49},"\u002Fblog\u002Fbest-website-feedback-tools","How to Choose a Website Feedback Tool (2026 Checklist)","How to choose the best website feedback tool in 2026: the tool types, 12 criteria, a free scoring template (Excel) and a one-week trial plan with a real client.","2026-10-07T09:00:00+00:00","2026-10-22T10:00:00+00:00",{"src":38,"card":39,"alt":40,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F09\u002Fscreencode_7_Bug_tracker_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F09\u002Fscreencode_7_Bug_tracker_GiveFeedback-400x250.jpg","Code on a screen, illustrating how to choose a website feedback tool",1200,630,"feedback-tools",[45,46,47,48],"best website feedback tool","website feedback tool free","visual website feedback tool","client feedback",8,{"path":51,"title":52,"description":53,"date":35,"modified":36,"draft":9,"locale":10,"category":24,"image":54,"translationKey":59,"tags":60,"readingTime":49},"\u002Fblog\u002Fclient-website-approval","Client Website Approval: How to Get Sign-Off Without Delays","Client website approval made simple: the 5 approval stages, a revision-limit clause, a sign-off email, a free website sign-off form (Word) and a checklist.",{"src":55,"card":56,"alt":57,"width":58,"height":41},"\u002Fwp-content\u002Fuploads\u002F2023\u002F06\u002FAutomating-Project-Management-for-Efficiency-Sized.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F06\u002FAutomating-Project-Management-for-Efficiency-Sized-400x250.jpg","Two people reviewing a printed document with a pen, ready for client website approval",1920,"client-approval",[61,62,63,17],"client approval process","website sign off","revision rounds",{"path":65,"title":66,"description":67,"date":35,"modified":36,"draft":9,"locale":10,"category":11,"image":68,"translationKey":72,"tags":73,"readingTime":78},"\u002Fblog\u002Fhow-to-collect-client-feedback-on-a-website","How to Collect Client Feedback on a Website (Step by Step)","How to collect client feedback on a website: 5 methods compared, a review round step by step, good vs vague feedback examples and a briefing email to send today.",{"src":69,"card":70,"alt":71,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_web_Designer_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_web_Designer_GiveFeedback-400x250.jpg","Web designer at a desk reviewing client feedback on a website","client-feedback",[74,75,76,77],"client feedback on website","website feedback examples","client feedback examples","website review process",9,{"path":80,"title":81,"description":82,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":84,"translationKey":88,"tags":89,"readingTime":30},"\u002Fes\u002Fblog\u002Fanotar-capturas-de-pantalla-web","Cómo anotar capturas de pantalla de una web (Mac, Windows y online)","Cómo anotar capturas de pantalla en Windows, Mac, online o en Chrome, cómo capturar una página web entera y cómo marcar los errores para que se arreglen.","es",{"src":85,"card":86,"alt":87,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_office_colours_pc_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F07\u002FFree_Bug_tracking_office_colours_pc_GiveFeedback-400x250.jpg","Persona anotando capturas de pantalla de una web para enviarlas al equipo de desarrollo","screenshot-annotation",[90,91,92,93],"anotar capturas de pantalla","captura de pantalla","anotar captura en Mac","anotar captura en Windows",{"path":95,"title":96,"description":97,"date":35,"modified":36,"draft":9,"locale":83,"category":24,"image":98,"translationKey":59,"tags":100,"readingTime":49},"\u002Fes\u002Fblog\u002Faprobacion-cliente-proyecto-web","Aprobación del cliente en un proyecto web: cómo conseguirla","Aprobación del cliente en un proyecto web: las 5 fases, una cláusula para limitar revisiones, un email de aprobación, un formulario de aprobación gratis y una checklist.",{"src":55,"card":56,"alt":99,"width":58,"height":41},"Dos personas revisan un documento con un bolígrafo antes de la aprobación del cliente en un proyecto web",[101,102,103,104],"aprobación del cliente","rondas de revisión","presupuesto web","agencia web",{"path":106,"title":107,"description":108,"date":35,"modified":36,"draft":9,"locale":83,"category":24,"image":109,"translationKey":111,"tags":112,"readingTime":78},"\u002Fes\u002Fblog\u002Fcapturas-anotadas-en-asana","Capturas anotadas en Asana: cómo llevar el feedback web a tareas","Cómo llevar capturas anotadas y feedback web a Asana: plantilla CSV gratis, cinco métodos comparados y tareas automáticas desde el feedback del cliente.",{"src":38,"card":39,"alt":110,"width":41,"height":42},"Capturas anotadas de una web convertidas en tareas de Asana","asana",[113,114,115,116],"capturas anotadas en Asana","plantilla Asana","gestión de bugs","feedback web",{"path":118,"title":119,"description":120,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":121,"translationKey":125,"tags":126,"readingTime":18},"\u002Fes\u002Fblog\u002Fchecklist-qa-web-antes-de-lanzar","Checklist web: más de 70 comprobaciones antes de lanzar","Checklist web con más de 70 comprobaciones por áreas: formularios, enlaces, móvil, navegadores, velocidad, SEO, accesibilidad y WordPress, con plantilla Excel gratis.",{"src":122,"card":123,"alt":124,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracker_people_pc_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracker_people_pc_GiveFeedback-400x250.jpg","Persona revisando una web con una checklist QA antes del lanzamiento","qa-checklist",[127,128,129,130],"checklist web","checklist QA web","pruebas web","lanzamiento web",{"path":132,"title":133,"description":134,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":135,"translationKey":137,"tags":138,"readingTime":78},"\u002Fes\u002Fblog\u002Fcomo-escribir-un-informe-de-bugs","Plantilla de reporte de errores (bugs): gratis, con ejemplos","Plantilla de reporte de errores gratis en Excel, Google Sheets y Word, con un ejemplo de informe de bugs bueno y uno malo y los campos que importan en una web.",{"src":38,"card":39,"alt":136,"width":41,"height":42},"Código JavaScript en una pantalla, ilustrando cómo escribir un informe de bugs de una web","bug-report",[139,140,141,142],"plantilla de reporte de errores","reporte de errores","informe de bugs","ejemplo de reporte de errores",{"path":144,"title":145,"description":146,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":147,"translationKey":72,"tags":149,"readingTime":78},"\u002Fes\u002Fblog\u002Fcomo-recoger-feedback-de-clientes-en-una-web","Cómo pedir feedback a un cliente sobre su web (paso a paso)","Cómo pedir feedback a un cliente sobre su web: 5 métodos comparados, una ronda de revisión paso a paso, ejemplos de feedback bueno y vago y un email para enviar hoy.",{"src":69,"card":70,"alt":148,"width":41,"height":42},"Diseñador web en su mesa revisando el feedback de clientes sobre una web",[150,151,116,152],"cómo pedir feedback a un cliente","feedback de clientes","revisión de una web",{"path":154,"title":155,"description":156,"date":35,"modified":36,"draft":9,"locale":83,"category":24,"image":157,"translationKey":159,"tags":160,"readingTime":49},"\u002Fes\u002Fblog\u002Ffeedback-web-en-notion","Bugs en Notion: gestiona el feedback de tu web paso a paso","Cómo gestionar bugs en Notion en proyectos web: plantilla gratis, propiedades, vistas tablero, rutina de triaje y cómo recibir el feedback del cliente solo.",{"src":55,"card":56,"alt":158,"width":58,"height":41},"Equipo organizando bugs y feedback de clientes de una web en Notion","notion",[161,162,163,116],"bugs en Notion","plantilla Notion","seguimiento de bugs",{"path":165,"title":166,"description":167,"date":35,"modified":36,"draft":9,"locale":83,"category":168,"image":169,"translationKey":171,"tags":172,"readingTime":78},"\u002Fes\u002Fblog\u002Fherramientas-gratis-seguimiento-bugs","Herramientas gratis de seguimiento de bugs para webs (2026)","Herramientas gratis de seguimiento de bugs para equipos web: los planes gratuitos de Jira, Trello, ClickUp, Notion, Asana, monday.com y Wrike, y una hoja de cálculo gratis.","comparisons",{"src":122,"card":123,"alt":170,"width":41,"height":42},"Equipo revisando incidencias en una herramienta gratis de seguimiento de bugs","free-bug-tracking",[173,174,175,176],"herramientas gratis seguimiento de bugs","bug tracker","gestión de incidencias","hoja de seguimiento de bugs",{"path":178,"title":179,"description":180,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":181,"translationKey":43,"tags":183,"readingTime":78},"\u002Fes\u002Fblog\u002Fmejores-herramientas-feedback-visual-web","Cómo elegir una herramienta de feedback visual para tu web","Cómo elegir entre las herramientas de feedback visual web en 2026: tipos, 12 criterios, una plantilla de evaluación gratis en Excel y una prueba de una semana.",{"src":38,"card":39,"alt":182,"width":41,"height":42},"Código en una pantalla, ilustración de cómo elegir entre herramientas de feedback visual web",[184,116,185,151],"herramientas de feedback visual","feedback visual",{"path":187,"title":188,"description":189,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":190,"translationKey":194,"tags":195,"readingTime":200},"\u002Fes\u002Fblog\u002Fpruebas-de-aceptacion-uat-web","Pruebas de aceptación de usuario (UAT): ejemplos y plantilla","Qué son las pruebas de aceptación de usuario (UAT), diferencias con el QA, ejemplos de escenarios, checklist para webs y plantillas gratis en Excel y Word.",{"src":191,"card":192,"alt":193,"width":41,"height":42},"\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracking_testing-man_GiveFeedback.jpg","\u002Fwp-content\u002Fuploads\u002F2023\u002F08\u002FFree_Bug_tracking_testing-man_GiveFeedback-400x250.jpg","Cliente haciendo pruebas de aceptación UAT de su nueva web frente al ordenador","uat",[196,197,198,199],"pruebas de aceptación","pruebas de aceptación de usuario","plan de pruebas de aceptación","ejemplo pruebas de aceptación",10,{"path":202,"title":203,"description":204,"date":35,"modified":36,"draft":9,"locale":83,"category":11,"image":205,"translationKey":207,"tags":208,"readingTime":49},"\u002Fes\u002Fblog\u002Fque-es-el-feedback-visual","Qué es el feedback visual y por qué agiliza tus proyectos web","Qué es el feedback visual: comentarios sobre la propia web con capturas marcadas, vídeo o notas. Tipos, ventajas, ejemplos y qué pedirle a una herramienta.",{"src":69,"card":70,"alt":206,"width":41,"height":42},"Diseñador web revisando el feedback visual sobre una interfaz","visual-feedback",[185,116,209,151],"capturas anotadas",{"path":211,"title":212,"description":213,"date":214,"modified":36,"draft":9,"locale":10,"category":24,"image":215,"translationKey":159,"tags":217,"readingTime":49},"\u002Fblog\u002Fsupercharge-your-workflow-with-the-notion-bug-tracker-extension","Notion Bug Tracker Template (Free) for Website Projects","Free Notion bug tracker template for website projects: import the CSV, set up the properties and board views, and send client feedback into Notion.","2025-04-24T16:17:44+00:00",{"src":55,"card":56,"alt":216,"width":58,"height":41},"Team organizing website bugs and client feedback in a Notion bug tracker",[218,219,220,221],"notion bug tracker template","notion issue tracker template","bug tracking","website feedback",{"path":223,"title":224,"description":225,"date":226,"modified":36,"draft":9,"locale":10,"category":11,"image":227,"translationKey":194,"tags":229,"readingTime":78},"\u002Fblog\u002Fuser-acceptance-testing-in-software-development","User Acceptance Testing (UAT): Template, Checklist & Examples","What user acceptance testing is, UAT vs QA, test scenario examples, a UAT checklist for websites and free templates: Excel test plan and Word sign-off form.","2023-09-28T17:32:27+00:00",{"src":191,"card":192,"alt":228,"width":41,"height":42},"Client doing user acceptance testing on a new website at his desk",[230,231,232,233],"user acceptance testing","UAT testing","user acceptance testing template","user acceptance testing checklist for website",{"path":235,"title":236,"description":237,"date":238,"modified":36,"draft":9,"locale":10,"category":168,"image":239,"translationKey":171,"tags":241,"readingTime":78},"\u002Fblog\u002Fbug-tracking-tools-free","Free Bug Tracking Tools for Web Teams (2026 Comparison)","Free bug tracking tools compared for web teams: the free plans of Jira, Trello, ClickUp, Notion, Asana, monday.com and Wrike, plus a free bug tracking spreadsheet.","2023-09-21T16:56:47+00:00",{"src":122,"card":123,"alt":240,"width":41,"height":42},"Team at a computer reviewing issues in a free bug tracking tool",[242,174,243,244],"free bug tracking tools","bug tracking spreadsheet","issue tracking",{"path":246,"title":247,"description":248,"date":249,"modified":36,"draft":9,"locale":10,"category":11,"image":250,"translationKey":137,"tags":252,"readingTime":49},"\u002Fblog\u002Fwhat-to-put-in-a-bug-report","Bug Report Template (Free Excel, Word & Google Sheets) + Examples","Free bug report template for Excel, Google Sheets and Word, with a good and a bad bug report example and the fields that matter for website bugs.","2023-09-11T14:43:18+00:00",{"src":38,"card":39,"alt":251,"width":41,"height":42},"JavaScript code on a screen, illustrating how to write a bug report for a website",[253,254,255,243],"bug report template","bug report example","how to write a bug report",{"path":257,"title":258,"description":259,"date":260,"modified":36,"draft":9,"locale":10,"category":24,"image":261,"translationKey":111,"tags":263,"readingTime":49},"\u002Fblog\u002F1-way-to-get-annotated-screengrabs-into-asana","Asana Bug Tracking: Free Template and Annotated Screenshots","Asana bug tracking for website projects: a free CSV template, five ways to get annotated screenshots into tasks, and automatic tasks from client feedback.","2023-09-11T11:56:04+00:00",{"src":38,"card":39,"alt":262,"width":41,"height":42},"Annotated screenshots of a website being turned into Asana tasks",[264,265,266,221],"asana bug tracking","asana bug tracking template","annotated screenshots",{"path":268,"title":269,"description":270,"date":271,"modified":36,"draft":9,"locale":10,"category":11,"image":272,"translationKey":125,"tags":274,"readingTime":279},"\u002Fblog\u002Fspeed-up-qa-testing","Website QA Checklist: 70+ Checks Before Launch (Free Template)","A website QA checklist with 70+ checks by area (forms, links, devices, browsers, speed, SEO, accessibility, WordPress), plus a free Excel and Google Sheets template.","2023-08-19T11:32:36+00:00",{"src":122,"card":123,"alt":273,"width":41,"height":42},"Person running a website QA checklist on a laptop before launch",[275,276,277,278],"website QA checklist","website testing checklist","website qa checklist template excel","wordpress website testing checklist",11,{"path":281,"title":282,"description":283,"date":284,"modified":36,"draft":9,"locale":10,"category":11,"image":285,"translationKey":207,"tags":287,"readingTime":49},"\u002Fblog\u002Fvisual-feedback-faster-bug-testing","What Is Visual Feedback? A Guide for Web Teams","What is visual feedback? Feedback given on the website itself with marked-up screenshots, video or pinned comments. Types, examples and a tool checklist.","2023-08-09T17:41:00+00:00",{"src":69,"card":70,"alt":286,"width":41,"height":42},"Web designer reviewing visual feedback on a website interface",[288,47,266,221],"visual feedback",{"path":290,"title":291,"description":292,"date":293,"modified":36,"draft":9,"locale":10,"category":11,"image":294,"translationKey":88,"tags":296,"readingTime":30},"\u002Fblog\u002Fscreen-grab-annotation-apps","How to Annotate a Screenshot of a Website (Mac, Windows & Online)","How to annotate a screenshot on Mac, Windows, online or in Chrome, how to capture a full web page, and how to mark up website screenshots so developers fix them.","2023-08-02T23:25:13+00:00",{"src":85,"card":86,"alt":295,"width":41,"height":42},"Person at a computer annotating website screenshots for a developer",[297,298,299,300],"annotate screenshot","annotate screenshot mac","annotate screenshot windows","annotate screenshot online",{"id":302,"title":291,"body":303,"category":11,"date":293,"description":292,"draft":9,"extension":667,"faq":668,"image":684,"locale":10,"meta":685,"modified":36,"navigation":686,"path":290,"readingTime":30,"seo":687,"seoTitle":688,"stem":689,"tags":690,"tldr":691,"translationKey":88,"__hash__":692},"blog\u002Fblog\u002Fscreen-grab-annotation-apps.md",{"type":304,"value":305,"toc":657},"minimark",[306,310,315,318,321,325,328,338,342,345,353,357,360,427,442,446,449,452,475,529,537,541,544,564,570,575,586,592,596,599,607,644,651,654],[307,308,309],"p",{},"Knowing how to annotate a screenshot well saves more time than any tool choice. A website screenshot with one red box and a sentence like \"logo overlaps the menu on 1366px screens\" gets fixed the same day; one covered in scribbles with \"see attached\" gets a reply asking what you meant. Windows, macOS and the main browsers already include everything you need to capture and mark up a page; what decides whether it gets fixed is how you mark the problem.",[311,312,314],"h2",{"id":313},"what-is-screenshot-annotation","What is screenshot annotation?",[307,316,317],{},"Screenshot annotation is adding visual marks such as arrows, boxes, highlights and text to a screen capture so that the person who receives it sees exactly what you mean. In website work, the annotated screenshot is usually the core of a bug report or a design change request, sent to a developer or designer who wasn't looking at your screen when you found the problem.",[307,319,320],{},"The annotation only does half the job. The other half is context: which page, which browser, which screen size. Keep that in mind in the options below, because some capture that context for you and most don't.",[311,322,324],{"id":323},"how-do-you-annotate-a-screenshot-on-windows","How do you annotate a screenshot on Windows?",[307,326,327],{},"Press Windows + Shift + S, drag over the area you want, then click the notification to open the capture in Snipping Tool. Its editor has a pen, a highlighter, shapes such as arrows and rectangles, an eraser, crop and undo. Save the image or paste it straight into an email, a chat or a task. Nothing needs installing.",[307,329,330,337],{},[331,332,336],"a",{"href":333,"rel":334},"https:\u002F\u002Fsupport.microsoft.com\u002Fen-us\u002Fhelp\u002F13776\u002F",[335],"nofollow","Microsoft's Snipping Tool help"," lists every option. Snipping Tool is enough when you report a bug now and then and you're the one finding the issues. What it doesn't do: record the page URL, the browser or the screen size, so you have to type them under the image yourself.",[311,339,341],{"id":340},"how-do-you-annotate-a-screenshot-on-a-mac","How do you annotate a screenshot on a Mac?",[307,343,344],{},"Press Shift + Command + 4 to select an area, or Shift + Command + 5 to open the Screenshot app with more options, then click the floating thumbnail in the corner. That opens Markup, where you can draw, add shapes, arrows and text, highlight and crop before saving or dragging the image where it needs to go.",[307,346,347,352],{},[331,348,351],{"href":349,"rel":350},"https:\u002F\u002Fsupport.apple.com\u002Fen-us\u002F102646",[335],"Apple's guide"," lists all the shortcuts. Like Snipping Tool, Markup is free and good for occasional use, and like Snipping Tool it knows nothing about the page you captured: add the URL and browser by hand.",[311,354,356],{"id":355},"how-do-you-capture-and-annotate-a-full-web-page","How do you capture and annotate a full web page?",[307,358,359],{},"Capture the full page with the browser, then annotate the image in any editor. Firefox and Microsoft Edge have a full-page option in their built-in screenshot tools, and Chrome can capture a full-size screenshot from DevTools. Full-page captures are useful for comments on spacing or layout across a long page.",[361,362,363,382],"table",{},[364,365,366],"thead",{},[367,368,369,373,376,379],"tr",{},[370,371,372],"th",{},"Browser",[370,374,375],{},"How to open it",[370,377,378],{},"Full page",[370,380,381],{},"Built-in annotation",[383,384,385,400,414],"tbody",{},[367,386,387,391,394,397],{},[388,389,390],"td",{},"Firefox",[388,392,393],{},"Ctrl+Shift+S (Cmd+Shift+S on Mac) or right-click, then Take Screenshot",[388,395,396],{},"Yes (\"Save full page\")",[388,398,399],{},"No, copy or download only",[367,401,402,405,408,411],{},[388,403,404],{},"Microsoft Edge",[388,406,407],{},"Ctrl+Shift+S (Screenshot, formerly Web capture)",[388,409,410],{},"Yes",[388,412,413],{},"Basic markup (draw, shapes, text)",[367,415,416,419,422,424],{},[388,417,418],{},"Chrome",[388,420,421],{},"DevTools, then the Command Menu (Ctrl+Shift+P), then \"Capture full size screenshot\"",[388,423,410],{},[388,425,426],{},"No",[307,428,429,430,435,436,441],{},"Sources: ",[331,431,434],{"href":432,"rel":433},"https:\u002F\u002Fsupport.mozilla.org\u002Fen-US\u002Fkb\u002Ftake-screenshots-firefox",[335],"Mozilla's Firefox screenshots help",", ",[331,437,440],{"href":438,"rel":439},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fcommand-menu",[335],"Chrome's Command Menu docs"," and Edge's built-in tool, checked in October 2026. Edge's markup options change between versions, so check what yours shows.",[311,443,445],{"id":444},"can-you-annotate-a-screenshot-online-or-in-chrome","Can you annotate a screenshot online or in Chrome?",[307,447,448],{},"Yes, in two ways. Browser extensions and web-based annotation tools let you capture or upload a screenshot, mark it up in the browser and share a link. A feedback widget installed on the website itself goes further: the reviewer clicks a button on the page, annotates it there, and the report arrives with the URL and browser details attached.",[307,450,451],{},"The categories, as of 2026:",[453,454,455,463,469],"ul",{},[456,457,458,462],"li",{},[459,460,461],"strong",{},"Desktop screenshot apps:"," free open-source tools on Windows and paid apps on Mac and Windows add blur, numbered steps, scrolling capture and cloud links. Good for a team that takes dozens of screenshots a week; every person needs the app installed.",[456,464,465,468],{},[459,466,467],{},"Browser extensions and web annotators:"," capture or paste an image, annotate it in a tab, share a link. Quick, but each reviewer has to install or find the tool, and the page URL and browser are still typed by hand.",[456,470,471,474],{},[459,472,473],{},"In-site feedback widgets:"," a script on the website shows a feedback button on every page. Nobody installs anything, and the screenshot, comment, URL and browser details land together in a dashboard or project tool.",[361,476,477,487],{},[364,478,479],{},[367,480,481,484],{},[370,482,483],{},"Situation",[370,485,486],{},"Best option",[383,488,489,497,505,513,521],{},[367,490,491,494],{},[388,492,493],{},"You find a bug once a week and fix it yourself",[388,495,496],{},"Windows Snipping Tool or Mac Markup",[367,498,499,502],{},[388,500,501],{},"You need to comment on a long landing page as a whole",[388,503,504],{},"Browser full-page capture plus any editor",[367,506,507,510],{},[388,508,509],{},"Your team writes documentation or support replies all day",[388,511,512],{},"A desktop screenshot app",[367,514,515,518],{},[388,516,517],{},"Clients or testers review a website before launch",[388,519,520],{},"An in-site feedback widget",[367,522,523,526],{},[388,524,525],{},"Feedback must end up as tasks in your project tool",[388,527,528],{},"A feedback widget connected to that tool",[307,530,531,532,536],{},"Many agencies use two: a desktop app for internal work and a widget for client reviews. For the wider comparison, see ",[331,533,535],{"href":534},"\u002Fblog\u002Fbest-website-feedback-tools\u002F","how to choose a website feedback tool",".",[311,538,540],{"id":539},"how-do-you-annotate-a-website-screenshot-so-it-gets-fixed","How do you annotate a website screenshot so it gets fixed?",[307,542,543],{},"Capture enough of the page for orientation, put one mark on one problem, label it with what is wrong and what you expected, use colour consistently, hide private data, and attach the page URL, browser and screen size. One problem per screenshot: a developer fixes and closes issues one at a time, and five marks on one image usually end with four fixed and one forgotten.",[453,545,546,549,552,555,558,561],{},[456,547,548],{},"Capture the right area: include the header or section title for orientation, not your bookmarks bar and thirty tabs. If the problem depends on screen width, say the width.",[456,550,551],{},"One mark per problem: one rectangle or one arrow. Three problems mean three screenshots.",[456,553,554],{},"A short label: \"Button text cut off, should read 'Book a call'\", not \"this\", \"fix\" or \"??\".",[456,556,557],{},"Colour on purpose: red for errors, another colour for suggestions. Don't put highlighter over text you want read.",[456,559,560],{},"Private data hidden: blur or crop customer emails, order numbers and personal details before sending.",[456,562,563],{},"Context attached: page URL, browser and version, operating system and screen size. Widgets add these automatically; with other tools, type them under the image.",[307,565,566,569],{},[459,567,568],{},"Bad example:"," a full-screen capture with three red circles, two arrows and a scribbled \"?!\", sent by email with the subject \"website\".",[307,571,572],{},[459,573,574],{},"Good example:",[576,577,583],"pre",{"className":578,"code":580,"language":581,"meta":582},[579],"language-text","Title: Contact form submit button overlaps footer on mobile\nAnnotation: one red rectangle around the button and footer, label \"overlaps footer\"\nExpected: 24px gap between button and footer, as in the design\nURL: https:\u002F\u002Fstaging.example.com\u002Fcontact\u002F\nEnvironment: Chrome 129, Android 14, 412x915\n","text","",[584,585,580],"code",{"__ignoreMap":582},[307,587,588,589,536],{},"The developer can open that URL at the same screen size and see the issue in a minute. For the full set of fields, use our ",[331,590,253],{"href":591},"\u002Fblog\u002Fwhat-to-put-in-a-bug-report\u002F",[311,593,595],{"id":594},"how-do-you-get-annotated-screenshots-to-the-developer","How do you get annotated screenshots to the developer?",[307,597,598],{},"Agree on one place where every screenshot goes: a task in the team's project tool, one per issue, or a shared feedback dashboard with statuses. Chat and email work for a single question, but a review round with forty comments turns them into a search problem, and screenshots sitting in someone's Downloads folder help nobody.",[307,600,601,602,606],{},"This is how ",[331,603,605],{"href":604},"\u002F","GiveFeedback.io"," handles it, as a step-by-step workflow:",[608,609,610,622,625,628,631],"ol",{},[456,611,612,613,616,617,621],{},"Install: paste one script into the site's ",[584,614,615],{},"\u003Chead>"," (the ",[331,618,620],{"href":619},"\u002Fdocumentation-tool\u002F","install guides"," cover WordPress, Shopify, Wix, Squarespace, PrestaShop and Google Tag Manager).",[456,623,624],{},"Click: a \"Give Feedback\" button appears on the site; the client clicks it, with no account.",[456,626,627],{},"Capture: on a computer the browser asks permission to capture the tab (phones skip this step), and the visible part of the page is captured.",[456,629,630],{},"Annotate: the client marks it up with arrows, rectangles, ellipses, text, a pen or a highlighter, in five colours, then adds a title, a description and a type such as Bug.",[456,632,633,634,638,639,643],{},"Deliver: the report arrives with the page URL, screen resolution, OS, browser and version, language and time zone, and can be created as an issue in ",[331,635,637],{"href":636},"\u002Fjira-bug-tracking-tool\u002F","Jira",", a card in Trello, a task in ",[331,640,642],{"href":641},"\u002Fasana-bug-tracking-tool\u002F","Asana",", ClickUp or Wrike, an item in monday.com, a page in Notion, a message in Slack or Discord, or an email to your team.",[307,645,646],{},[647,648],"img",{"alt":649,"src":650},"Client annotating a website screenshot with the GiveFeedback.io markup editor","\u002Fwp-content\u002Fuploads\u002F2024\u002F01\u002Fbrowser-1920-1080-GF-modal-6-marked-up.jpg",[652,653],"blog-cta",{},[307,655,656],{},"If you only remember one thing: one problem, one mark, one sentence, plus the URL and browser. Pick the tool that makes that easiest for the person reporting, which for client reviews is usually the one they don't have to install.",{"title":582,"searchDepth":658,"depth":658,"links":659},2,[660,661,662,663,664,665,666],{"id":313,"depth":658,"text":314},{"id":323,"depth":658,"text":324},{"id":340,"depth":658,"text":341},{"id":355,"depth":658,"text":356},{"id":444,"depth":658,"text":445},{"id":539,"depth":658,"text":540},{"id":594,"depth":658,"text":595},"md",[669,672,675,678,681],{"question":670,"answer":671},"What is the easiest way to annotate a screenshot?","Use the tool already on your computer. On Windows, press Windows, Shift and S, then open the capture in Snipping Tool to draw, highlight and add shapes. On a Mac, press Shift, Command and 4, then click the thumbnail to open Markup. Neither needs anything installed, and both are enough for occasional website feedback.",{"question":673,"answer":674},"How do I annotate a screenshot on a Mac?","Press Shift, Command and 4 and drag over the area, or Shift, Command and 5 for more options. Click the thumbnail that appears in the corner to open Markup, where you can draw, add arrows, shapes and text, and highlight. Then save the image or drag it straight into an email, a chat or a task.",{"question":676,"answer":677},"How do I take a screenshot of a whole web page?","Use the browser. Firefox's screenshot tool, opened with Ctrl, Shift and S, has a Save full page option; Microsoft Edge's Screenshot tool also captures the full page; in Chrome, open DevTools and run Capture full size screenshot from the Command Menu. Then annotate the image in any editor. Most feedback widgets capture only the visible part.",{"question":679,"answer":680},"Can I annotate a screenshot online without installing anything?","Yes. Web-based annotation tools let you upload or paste an image, mark it up in the browser and share a link, and a feedback widget on the site lets reviewers capture and annotate the page they are on. Avoid uploading screenshots with customer data to services you haven't checked.",{"question":682,"answer":683},"Should I blur sensitive data before sending a screenshot?","Yes, if it shows customer names, emails, order data or anything private. Use an editor with a blur or pixelate option, or crop the area out. Better still, review staging sites with a test account and sample data, so there's nothing private on screen in the first place, and look at the image once more before you send it.",{"src":85,"card":86,"alt":295,"width":41,"height":42},{},true,{"title":291,"description":292},"How to Annotate a Screenshot: Mac, Windows & Online","blog\u002Fscreen-grab-annotation-apps",[297,298,299,300],"To annotate a screenshot of a website, capture the page, mark the problem with one arrow or box, add a short label that says what is wrong and what you expected, and send it with the page URL and browser details. Windows (Snipping Tool) and Mac (Markup) have free built-in tools; for client reviews, a feedback widget on the site captures the screenshot, the URL and the technical details in one step.","4kkPtUFwouLgD45LzuzWqb2Fzmz_2Lc0CWMAUrUrh9s",1793371019009]