This is part one of a three part series on Web Calipers by HB Design. This article concerns the history of Web Calipers, their evolution and what they can do. Part 2 is on How to use them and Part 3 is on the technology that went into creating them.
Digital Calipers – What Are They?
As a web developer I use Screen Calipers to measure items within my browser every day. I can remember a time when I had never used them. It was this frustrating process of guessing what the width or height of an object was. Or the distance between objects, or the combination of widths of objects or text etc. One day I was introduced to my first set of digital calipers and it would change how I worked forever.
First Calipers – An Integral Tool
The first digital calipers I ever used were Screen Calipers v1.0 by Nico Westerdale.
They worked very well and were easy to use. I used them constantly for years even though the design looked like something out of the windows 95 era. Over time newer versions were made but I never used them. I felt that I had no need for the extra bits that were added such as rotating to any angle. In web design I’ve never needed to measure distances at any angle other than 0° or 90°. Having grown tired of their design I decided to create my own.
Second Calipers – Cross Platform
Wanting to improve the design, and create something that would be cross-platform, I created my first set of calipers.
I used these for a long time. They looked better and were more functional. The mac users and the pc users alike could use the same calipers, they had color changing handles, key controls and even opacity management. It felt like a step in the right direction.
Even though they had improved, there was still something that really bothered me. All of the calipers tools I had used or created had to be installed on my computer. Which can be a pain.
I move on to a new computer every few years and then I have to reinstall everything that I had installed before. This often involves the full Adobe suite, several developer tools, all of the most popular web browsers, etc. Small things like calipers can get lost in the shuffle. Then comes the fateful day when I’m working on a project and suddenly realize I never installed them. Now I have to go track down the files somewhere and install them again. There had to be a solution to this problem.
Third Calipers – Cross Platform, Cross Device, No Installation
This lead me to creating my next iteration of calipers.
They look very similar to the previous calipers, but these are very different in deployment. These newest Calipers are created in javascript, css and html and live within the browser. They are created as a bookmarklet and offer the same functionality as their desktop counterparts. But you never install them. You simply bookmark them.
Once bookmarked they are available every time you open your browser… on any page. As an added bonus if you are logged into your browser (for example using Chrome and logged into Chrome using your gmail account) you can open your browser at work and they’re 1 click away in your bookmarks bar. You can then go straight home and open your browser and again… they’re right there 1-click away! So, when you get a new computer and login to your browser… they’re right where you expect them to be.
Which leads to mobile. I’ve never had calipers that work on mobile. These calipers do. To learn more about how to save the bookmarklet for desktop and for mobile click here. There was a lot of cool technology and techniques that went into creating the Web Calipers. If you’d like to read about that, please read about it here.
Hope you enjoy. If you have any suggestions or bugs, please let us know.
Thank you,
Gery