A Few of My Favorite Web Utilities

A couple of weeks ago, I wrote a column on some of my favorite software utilities -- programs that help me get my work done a bit quicker and easier. As a Web developer, I also rely on certain web and HTML utilities to assist me with my daily chores. For those of you who also handle web design or development, I thought some of the following tools might come in handy.

HTML Color Picker

Trying to find exactly the right color for web content can be challenging. In my design work, I sometimes need to choose a color that is an exact match for another color I see on the screen. Other times, I just need to know the RGB and hex values for a color that I find. To help me with my color questions, I use a free tool called HTML Color Picker. This tool lets me select any color I see on my monitor by using an eyedropper icon. The values of the color I select are instantly copied to Color Picker’s small application window. I can see both the RGB and hex values of the color I picked and automatically copy the hex value into my HTML or CSS (News - Alert) code.

MultiRes

One of the challenges in designing Web pages is trying to ensure that those pages display properly under all types of screen resolutions. One rule of thumb that’s been around for awhile is to make sure your pages look good at a 1024x768 resolution at a minimum and that they continue to look good as you scale up the resolution from there. Since I run my desktop monitor and notebook at 1680x1050 pixels, I need a quick, convenient way to jump to lower resolutions and bounce from one resolution to another. And for that, I use a handy and free utility called MultiRes. This resolution switcher resides in your Windows system tray. Simply click on its icon, and you’ll see a pop up menu displaying all available resolutions for your monitor from 640x480 and up. Just click on the one you want, and MultiRes will instantly change your monitor to use that resolution.

PixelRuler

Measuring the precise number of pixels used by a page, image, or other content can be another challenge of web design. For example, I with a graphic designer and often need to tell her the precise dimensions required for a new image that she’s creating. To help me measure items on a page, I use a free tool called PixelRuler. This utility displays an onscreen ruler that I can place anywhere on my monitor and position horizontally or vertically. By lining up the ruler exactly, I can precisely measure a block of text, an image, or any other content on a page. Though PixelRuler is free, you can kick in a $5 donation if you like the software. One caveat here: I ran into technical problems trying to run the current version of PixelRuler 4 on my Windows 7 computer. So instead I still use PixelRuler 3 on all my computers, which works just fine.

Plug-Ins

Besides standalone utilities, I also depend on a couple of browser plug-ins to help me with my web development. In Internet Explorer, I often use the Internet Explorer Developer Toolbar. This tool displays a panel at the bottom of your IE window showing you all the tags and styles for your HTML content. You can view CSS rules, examine specific elements on the page, and even validate your HTML and CSS code. In Firefox, I sometimes use a plug-in called Firebug. Another handy utility for web developers, Firebug can display your HTML and CSS tags and let you modify them on the fly. It also offers a cool JavaScript debugger that easily lets you trace your code to track down errors.

You’ll obviously find plenty of other great design and development tools on the Web, but these are the ones I rely on regularly. Do any of you designers or developers out there use other helpful web tools in your daily work? If so, let us know about them in the Comments section below.