Resources

It doesn't matter if you're a carpenter or a web designer - using the right tools makes your job so much easier!

Here's a list of things we use on a daily basis that we couldn't do without.

What font

This little tool's purpose in life is to show you an information box containing font size, font-family, color and line-height, for any area of the web page you're looking at. It lives on your browser's tool bar as a bookmarklet.

To use, just click the bookmarklet, then click the word on the page that you're interested in.  A black box pops up with all the relevant information.

And yes, it really is that simple!

Here, we've clicked on the word "Services" in the Navigation bar.  It tells us that the font is Verdana, 16px with a line height of 24px.

Instantly!

Pretty neat!

Here's the web address where you can download it.

http://chengyinliu.com/whatfont.html


JRuler

Although it's nice to have a fancy piece of software for measuring things on the page, sometimes you just want a ruler, that you can hold up against the screen.  

That's when you need JRuler.

It's a virtual ruler, that you can use to measure things by eye.  Just push it into position, and read off the scale.

Below is a screenshot of the JRuler sitting just above a red rectangle.

Very, very simple and very straightforward.

You can get it at the Developer's site

http://www.spadixbd.com/freetools/jruler.htm

and this is what it looks like, measuring a red block we just drew on the page.


The Available Width button

Often, we need to measure the width of the Nav Column or Extra Column, so that we can put an ad or sponsor image into the column. Eventually, we put together a little piece of code that does it for us.  

We call it the "Available Width" button.  

Just put the code into a Reuseable block, and then drag it into place wherever you need it.  When you Preview the page in your Blockbuilder, you'll see the button.

Here's what it looks like below.  Just press the button to find out how wide the page is at this point. 

The red rectangle is taking up 100% of the width available to it.
Click the button NOW to find out the maximum width of the div in pixels





Here's the code for the Available Width button below.  Just copy it and put it into a Reuseable Block.  Then drag it onto the page where you need it.  

<!--This is a RAW HTML block that tells you the width of the current container-->

<style type="text/css">
#div1 {
  width: 100%;
  background-color:#D60A0A;
  color:#fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
  font-size:large;
  text-align:center;
  }
</style>

<script language="javascript" type="text/javascript">
  function getDivWidth()
  {
  alert("Div Width:   " + document.getElementById("div1").clientWidth);
  //   alert("Offset Width:   "
  + document.getElementById("div1").offsetWidth);
  }
  </script>

  <p>
  The red rectangle is taking up 100% of the width available to it.        <br>Click the button to find out the maximum width of the div in pixels
  </p>

  <div id="div1">
  <br>
  <input type="button" value="Get Div Width" onclick="getDivWidth()" />   <br>
  <br>
  </div>
  <br >



Pendule

A Web Developer toolbar is a browser extension that gives you "under the hood" information and statistics about a particular web page.  The most common one is by Chris Pederick, and is called "Web Developer"

But the one we use the most is a Google Chrome extension called Pendule.

Why do we prefer it?  

2 reasons.

One, the Chris Pederick toolbar has a lot of options.  In our view, there are almost too many.  This makes using the toolbar more complex than necessary.

And two, Pendule has a killer function that works really well for us.  It's a way to list and view all the images, including background images like headers, footers etc, that exist on a specific web page.

Pendule opens up a new page that shows you each image individually at full size, together with a link direct to the image, its size and type.  

This is a very powerful feature when designing web pages.

Here's what the Pendule menu looks like.

And here's an example of the kind of information Pendule will give you about the image.

This makes it a breeze to find out the size of a header image when you want to replace it with a new one.  

No more guesswork!


Google Chrome browser

Hidden away in the Google Chrome browser is a set of tools called the Chrome Dev Tools.

This is the most powerful set of authoring and debugging tools you will find anywhere on the web - and they're available for free in the Chrome browser.

Just right click on any page and select "Inspect element".  

Or use the keyboard shortcut CTRL+SHIFT+I.

We won't even attempt to tell you everything you can do with them.

You can check and alter CSS, change html, see all the elements that load on a page, check Page Speed - the list is endless.

If you're serious about web development, this is a must!