Webdesigner tip: measure on page px dimensions beautifully

As a recent inductee into the web designer class, i am always on the look out for new tools, workflow hacks, and other ways to streamline by design and development cycles .

I find that i want to find out the px dimensions of various user interface elements, buttons, and parts of websites that i visit all the time. So i have been looking for a great ruler or grid measurement extension for chrome.  

Today i finally found a chrome extension that is worth mentioning for this purpose (and i have tried at least 5 other ones in the past, and normally resort to skitch or the Mac OSX system screenshot tool Shift + Command + 4 ) .

Check out Ruul. Ruul has a really beautiful way of giving web designers rulers for measuring pixels directly on pages. The reason the experience is beautiful is because Ruul gives the user a ui that looks like an actual ruler. It is super intuitive to use.

Just click the Ruul button.

Pick the Ruler you want

Voila its on the page (you can drag it around or add another one)

Go try it out for free on the chrome store : https://chrome.google.com/webstore/detail/mlbnpnlmfngmlcmkhjpbfokdphfehhjj

P.S.(ed & zach ... i started opening files live on  the server vs dragging to fetch... i know i know took long enough :) )