There are a lot of ways to measure the size of website elements, but one of the most common is by their weight. You can use a number of different methods to measure the weight of website elements, but the most common is to use a web page’s file size. To measure the weight of website elements, you’ll need to create a file that has a specific size and then measure how many bytes it takes to download. You can use any program that can create files with specific sizes, such as FileZilla or 7-Zip. Once you’ve created your file, you’ll need to compare it against the size of the website element you want to measure. If your website element is smaller than the original file, then it will be lighter in weight. If it’s larger than the original file, then it will be heavier in weight. The easiest way to determine whether or not an element is lighter or heavier is by looking at how much data is stored inside its files. If an element has less data inside its files, then it will be lighter in weight. If an element has more data inside its files, then it will be heavier in weight. Once you’ve determined which website element is heaviest and which website element is lightest, you’ll need to decide how much space each one needs on your site for them both to fit comfortably. You can use any program that allows you to calculate how much space an Element needs on your site before they start taking up too much space (such as Google Analytics), but make sure that you’re using this information correctly so that your measurements are accurate.
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.
You can change the horizontal versus vertical orientation, theme, or minimize myRuler to the “System Tray” using the “Right Click Menu”.
Click on the “myRuler Link” to see the keyboard commands for moving, resizing, directional flipping, and screen placement.
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…
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…
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.
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)
