SEARCH

How-To Geek

Find the Size of Website Elements the Easy Way

Have you ever found a website with a design or layout that you think is great but finding out the pixel sizing for individual elements is a hassle? Now you can easily get that information with myRuler.

Setup

This is what myRuler looks like when it first starts up…the first time it will be set at a default of 500 pixels. Whenever you start myRuler again afterwards it will remember the pixel size you used the previous time.

my-ruler-01

You can change the horizontal versus vertical orientation, theme, or minimize myRuler to the “System Tray” using the “Right Click Menu”.

my-ruler-02

Click on the “myRuler Link” to see the keyboard commands for moving, resizing, directional flipping, and screen placement.

my-ruler-03

myRuler in Action

Perhaps you see graphics in a website like sidebar buttons or blog post images and really think the sizing within the layout is perfect. You can easily find the sizes with myRuler. For our example we are looking at one of the images in a blog post…first the horizontal measurement…

my-ruler-04

And then the vertical measurement. At this point you may be thinking that yes you could save/copy the image to your computer or right click for the properties, but if the image is not the only element that you are working with on the page then…

my-ruler-05

If there is a particular section of a website that you like the sizing/fit of (say the width of a forum listing or sidebar), then you can easily find the size to help with the design for your own website.

my-ruler-06

Conclusion

myRuler makes a convenient app to have around for those times when you need a quick way to find the size of website elements and make designing your own website easier.

Links

Download myRuler (version 0.5)

Akemi Iwaya (Asian Angel) is our very own Firefox Fangirl who enjoys working with multiple browsers and loves 'old school' role-playing games. Visit her on Twitter and .

  • Published 12/2/09

Comments (11)

  1. Alfredo

    I SO needed this. THANK YOU!

  2. Asian Angel

    @Alfredo – ^__^

  3. Dustin

    Why would you do this when you can get the same information from FireBug? In firebug it is as easy as right clicking the element, choosing inspect element, and that information is right down in the firebug panel. It also gives you the entire box model to look at so you can get actual width/height, padding, and even margin. :-)

  4. Arvedui

    Interestingly enough, Avast! is telling me that the site is downloading a Trojan called “Win32: Delf-MZG” onto my comp when I click the download link. Any idea?

  5. Dave

    I’m with Dustin. Filed under pointless apps.
    Why not use the ruler built-in to the IE Dev Toolbar? Snaps to elements, fixes to vertical or horizontal measurements or will do angles. I do not need yet another app on my “Installed Programs” dialog

  6. JHubbard92

    Thanks for the find, this will be very helpful when I do my webdesign stuff :-)

  7. moopenguin32

    Another great utility that contains this feature and more is PicPick. It includes a pixel ruler, color picker and more. It’s also portable. I’ve been using it for the past couple of days. The PicPick homepage is: http://picpick.wiziple.net/

  8. David Levine

    Another program with this capability is PicPick. It includes a pixel rules, color picker, screen capturer, and more. The best part is the fact that it is portable. It can be found by going to: http://picpick.wiziple.net/

  9. The Geek

    @Arvedui

    Unfortunately Avast has a big bug right now, they are detecting nearly everything incorrectly. They’ve pushed out an update to fix the problem.

    Here’s more information: http://www.downloadsquad.com/2009/12/03/avast-has-a-freak-out-goes-on-a-false-positive-spree/

  10. Bob Argo

    Re: Arvedui

    Interestingly enough, Avast! is telling me that the site is downloading a Trojan called “Win32: Delf-MZG” onto my comp when I click the download link. Any idea?

    I had the same warning from my Avast. Used Trend Micro to get it out.

  11. Asian Angel

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!