FIRST CHTools

FIRST CH TOOLS / Images / 74 SCREEN REVIEW BOARD

Screen Review Board

For checking a website redesign: lay out screenshots by page, screen width and before/after and compare them. Drop numbered pins with notes where something needs attention. The finished board, images included, exports as one HTML file that the other person simply double-clicks. Images stay on your device and are never sent anywhere.

Drag & drop your screenshots here, all at once or click to choose / paste with ⌘V or Ctrl+V (PNG / JPEG / WebP, several at a time)

Name files page_width_before/after and they sort themselves (e.g. top_375_after.png). Anything read wrongly can be fixed in the list below.

BOARD

EXPORT

How to Use

  1. Add screenshotsDrop the before and after screenshots in one go. The page, width and before/after are read from each file name; pick them by hand where the name says nothing. To just try it out, press “Try with sample screens”.
  2. Compare and add notesSwitch pages with the tabs and widths with the buttons, then compare with “Side by side”, “Slider” or “All widths”. Press “Add pins” and click a screen to write a numbered note.
  3. Export and send“Export as HTML” makes one file holding every image and note. Send it by email or chat, and the other person double-clicks it to use the same board. For paper or a PDF, use “Print / Save as PDF”.

About This Tool

When a redesign is reviewed through screenshots pasted into slides or chat, it soon becomes unclear which page, which width, and whether a picture is before or after the change. This board gives every image those three labels, puts pages on tabs and widths on buttons, and always shows the before and after of the same page and width next to each other. The slider overlays the two so you can move the dividing line and catch small changes in spacing or type size. “All widths” lines up every width at the same zoom of its screen width, so you can check in one view that the order of content holds up from phone to desktop.

The exported HTML embeds the images and the viewer itself. It opens without an internet connection, is set to make no outside requests, and is marked noindex so search engines leave it alone. Many images make a large file, so the size is shown before you export. If it is too big for email, turn on WebP re-compression and downscaling (Retina screenshots carry twice the pixels of the screen width, so “Up to 2× the screen width” looks practically the same).

There is no way to enter a URL and capture it automatically, and no crawling of a whole site: both need server-side processing, and a browser page cannot read other sites. Take screenshots with your browser's developer tools (full-page screenshot) or similar. To add a background or frame to a screenshot, use the Screenshot Frame; to show a flow as a video, the Screen Recorder with Auto-Zoom.

If you would like the improvements you find carried out as part of a website rebuild, First CH's web production service can take it on.

Other Tools