Snap Guides To Measure Website Elements With Tape For Chrome
Good web design relies on several factors, one of which is the right placement of every element. Tape is a Chrome extension to help web designers with this by allowing you to add rulers to a web page. Tape goes beyond what common pixel-measuring extensions offer; it doesn’t just tell you the area occupied by a particular element in pixels, but also lets you add as many rulers to the browser interface as you want, to measure and outline the relative distance of different elements from each other. You can add rulers both horizontally and vertically, define origin points (yes, more than one), and set the pointer to automatically snap to different elements in a web page as you move over them, much like in Photoshop. Tape is enabled on a webpage through a button and is controlled solely through your keyboard. Obviously, the web page itself does not remain functional while Tape is enabled, so you won’t miss the normal key functionality.
Once installed, click the extension’s button next to the URL bar to enable it. A small popup will appear at the bottom left, listing the keyboard shortcuts and their functions. Your cursor will automatically change in to a ruler with both horizontal and vertical lines. As you move your cursor across the web page, you will notice it snaps to the elements (highlighted in red). Consult the list of keyboard functions to determine how to add a ruler. Most of these shortcuts are quite intuitive to begin with; for instance, you can use the H and L keys respectively to add horizontal and vertical ruler lines.
You can drop both a vertical and horizontal line that originate from the same point by positioning your cursor over it and hitting the O key. Tape is excellent for working with large design elements, and also offers a magnifying tool that will allow you to add rulers to smaller elements. To activate the magnifying tool (called the Loupe), hit the L key with Tape enabled, and your cursor will magnify whatever you move it over.
The rulers that Tape enables can accurately accommodate even the small display elements, and creating a good grid around them is very easy. Perhaps the best feature of the extension is that if you deactivate Tape on a page after drawing a grid on it, it will remember your old markings whenever you next activate it, so long as you do not refresh the page, close the tab, or exit browser.
Tape is quite fast and very responsive, and we found no reason to complain about in our testing. The features are enough for every web designer who uses Chrome to give it a try.
Install Tape From Chrome Web Store
