Skip navigation.

Measuring pixels

Measuring pixels

I love watching developers whine and squirm when you put in defects about something being off by x pixels. Here I am, just doing my job, comparing a Web site layout against a specification. Spec says table should be 500px wide, table on site is 495px. Sounds like a defect to me. Here is the conversation that occurs on the phone shortly after I submit the "pixel" defect:

Ring. Ring. Ring...

Brent: QA! We put the K in Kuality! This is Brent.
Developer: Hey I just saw that defect you put in.
Brent: The one about SQL injection?
Developer: No, the one about the table being 5 pixels off.
Brent: Oh, that one. Yeah, 5 pixels
Developer: Are you freakin' kiddin' me?
Brent: Yeah I'm kiddin' you. It's the same joke as the other 20 defects I put in against you today but just worded a bit differently.
Developer: Alriiiiight?
Brent: The spec says 500px the table is 495px
Developer: Well, I can't get it to be 500px due to the 1st column being managed by percentage.
Brent: I'm just following the specification. Either it needs to be fixed or the specification needs to be modified.
Developer: What are you freakin' bored up there or something? Why are you looking at this stuff?
Brent: Bored? How can I be bored? I put 10 severity 1, 24 severity 2, 46 severity 3 defects against you in the last 3 days....Cuz it's a requirement.
Developer: You're killin' me!
Brent: So that means you're going to fix it?
Developer: (long pause)..Yeah. What are you using, a friggin' pixel ruler or something?
Brent: Yep.
Developer:Uhm, Oh... (long silence). Alright thanks.
Brent: No problem.

And that's pretty much how well pixel related defects are received.

For a few years now I've been using a free tool called Pixel Ruler. It allows me to look at pixel lengths and placement in a browser or anything on my desktop. It's pretty handy when you're trying to measure Website layout and wading through code doesn't quickly yield the numbers you're looking for.

Today I looked around to see what else was out there and ran into Ruler and the MeasureIt FireFox extension. Here is my take on the three pixel rulers:

Ruler: It's easy to use, it has opacity so you can see what you're measuring if you place the ruler over the top of your item to be measured. Measuring width and height is as simple as placing your top-left corner where you want to start the measurement and then dragging the right and bottom edges to where you want the measurement to end.

Pixel Ruler>: Pixel Ruler is easy to use, it doesn't have opacity so you can't overlap the item you are measuring. If you want to measure height versus width you have to flip the ruler (opposed to dragging ruler edges in Ruler).

MeasureIt: First off, since it's a FireFox extension you can only measure pixels in FireFox. This isn't very helpful for measuring things in IE or for that matter, anything on the desktop. Secondly, you have to drag a marquee around the object you want to measure. I had a really hard time doing this on my laptop thumb-pad and my test Google image of 80 pixels took me 6 tries to get the 80px measurement. I didn't like this tool at all.

I'm switching to Ruler. It's seems easier than Pixel Ruler by a smidge. What free tool do you use to measure pixels?