Vade - Responsive Testing Tool

When you need to test a responsive website across multiple screen sizes online, side-by-side device frames beat resizing one window by hand. Typical goals include previewing a website on different screen sizes at once, comparing mobile and desktop layouts in one view, and catching breakpoint problems before release.

This responsive design testing workflow adds practical review steps: you load a URL in preset phone, tablet, and desktop frames, turn on annotation mode to draw marks on the live view, read an automated layout review list when you want a second opinion, and export a full workspace screenshot as a PNG for tickets or handoffs.

Tool Overview

This tool loads a public web address inside one or more device-shaped frames. You can compare sizes, draw red marks on top, and run an automated visual review that lists possible layout issues. You can also save a picture of the whole workspace.

Teams need to see how one site looks at different widths. Testing on real hardware is slow. This tool gives a quick lab view in the browser. It also helps you point at problems with simple drawings and short notes from the review step.

It works for beginners who only need one frame. It helps people who already ship front-end work and need screenshots or a checklist. You should know what a URL is and how to read a simple issue list.

Background and Concept Explanation

Responsive design means one site changes layout as the window size changes. Each device frame here fixes a logical width and height so you can compare layouts side by side.

Many sites block embedding in other pages for security. If a page refuses to load inside the frame, you may see an error state for that frame. That is normal browser behavior, not a bug in the tool.

The review step does not load your page itself. It sends the address and the name of the first selected frame to a server. The server returns a score, a short summary, and a list of items. Each item can include severity, type, text, breakpoint label, fix text, and optional CSS text and selector text.

Drawing on the screen uses a canvas layer over each frame. Marks stay separate per device so you can label one size without changing another.

Key Features

• Address entry with basic checks. Empty input is rejected. If you forget the protocol, the tool adds a secure web prefix. Bad addresses show an error.
• Many preset frames. The list includes several phones, tablets, laptops, and two wide desktop sizes. Each entry stores width, height, frame border look, and corner style. Some entries show simple fake camera or home areas for visual context only.
• Multi-select frames. You can show more than one device at once. At least one frame must stay selected.
• Portrait and landscape. One toggle swaps width and height for every selected frame.
• Zoom the workspace. Zoom moves between thirty percent and two hundred percent in steps of ten points. Default is eighty-five percent. A reset control returns to one default phone frame and the default zoom.
• Fake status areas on some phones. The tool draws simple top and bottom bars on certain phone types for look only. They do not change the real site.
• Annotation mode. When on, you drag to draw red lines on each frame. Each stroke is stored for that frame. You can clear all strokes at once.
• Automated review panel. After a page loads, you can open a side panel. The first run asks the server for a fresh report. Later opens reuse the same result until you load a new address.
• Server screenshots for export. The capture step asks a server for pictures of each frame size. Those pictures replace the live view for a short time. Then the tool rasterizes the whole stage, including frames and drawings, and downloads one PNG file.
• Optional shared state in the URL. On load, the page can read a query field and restore saved address, device list, orientation, review results, and drawings if the field is valid.

Common Use Cases

A designer checks a marketing page on a small frame and a wide frame before a release.

A tester circles a broken menu on the mobile frame and saves a PNG for a bug ticket.

A developer reads the review list for spacing and overflow hints, then opens real dev tools to confirm.

A teacher shows a class how one article looks on different logical widths using the same address.

How to Use This Tool (Step-by-Step)

1. Type or paste a full web address in the box and confirm. Wait for each frame to finish loading or show an error.
2. Open the device menu and pick one or more frames. Remove extras if the stage feels crowded.
3. Use portrait or landscape to match how you want to compare.
4. Use zoom so the full set fits on your screen.
5. Optional: turn on draw mode. Drag on a frame to add red marks. Turn draw mode off when you are done.
6. Open the review action if you want the side panel. Wait for loading to finish. Read the score, summary, and each issue.
7. When you are ready for a picture, run the capture action. Wait for server images and the final raster step. Your browser should download a PNG.
8. To start over with a new site, clear the address field flow as needed and load again. Loading a new address clears the review and the drawings.

Calculations and Logic

Frame size on screen. The tool uses each device width and height. In landscape mode it swaps those two numbers.

Drawing coordinates. Pointer position is scaled from the visible canvas size to the canvas pixel size so lines match the image.

Review request. The tool sends the page address and the first selected frame name. It does not send the drawing data.

Fallback review data. If the server call fails, the tool shows a fixed medium-severity connection-style item and a short summary so the panel still opens.

Capture pipeline. The server returns per-frame images and sizes. The tool matches those to frames in order. It builds a temporary layout, runs a raster helper at double resolution, then restores the live view.

Safe zones on the UI. Extra top and bottom padding for some phone types is computed from simple rules that look at the device name string. This is cosmetic only.

Reference Tables or Scales

Control	Range or rule
Workspace zoom	From 0.3 to 2.0 in steps of 0.1. Default 0.85.
Annotation stroke	Red color, width 4 pixels in canvas space.
Raster export scale	Fixed double scale for the stage capture step.
Device types in the picker	Mobile, tablet, laptop, desktop groups with multiple presets each.

Tips, Limitations, and Best Practices

Some sites block frames. If you see a blank or error frame, try another page or test in a normal window.

The review text is guidance only. Always confirm issues in real browsers and real devices.

The review does not refresh automatically when you change frames. Load a new URL if you need a fresh analysis.

Capture needs the server path. Sign in if the app asks. Network errors show a message.

Cross-origin pages may not expose the true live URL to the script. The capture step falls back to the address you typed or the frame source attribute.

Heavy pages can be slow inside small frames. Zoom out or reduce the number of frames.

Drawings are not saved to the server. Download the PNG if you need a record.

If a shared link fails to load, the page may show an error. Remove the query string and start again.