3 Must-Have Tools for the Web Designer’s Toolbelt

Seems to me that web designers have to relearn everything they know about building websites about every 18 months, and that’s the fun part. Each time I design a new site I get really excited about all the shiny new toys I get to play with; new tools that make the web design process faster, easier and more fun. Yes, I’m a geek… For the latest revision of Eloqua.com I relied on three relatively new tools I feel like I’ll never be able to live without–until the next site!

Snagit

To put it simply, Snagit replaces whatever it is that happens when you click the “PrtScn” button on your PC with an incredibly flexible screen capture utility coupled with a low-end graphics editor. Instead of capturing the entire display, you can select the window or region you want to copy.  While every site designer still needs Photoshop or Fireworks for complex image editing, Snagit does a fantastic job at cropping, adding borders or shadows and outputting for the Web. Another great feature is that Snagit archives all your captures and remembers where you snapped them (the application and/or the website) so you can easily find captures in the future.

How do I use it? Let me count the ways… Now instead of right clicking on an image, saving it to my desktop, opening Photoshop, opening the saved image, editing the image and then exporting it for Web (time consuming!), I just capture the image, edit it quickly in Snagit and hit save.

VMWare Player

VMWare Player has come to my rescue repeatedly. While I know that VMWare Server can be used for all sorts of advanced IT purposes that boggle my mind, I depend on the free and easy-to-use VMWare Player to test web sites against different operating system/web browser combinations. I also have a virtual machine that runs a simple Web server, useful for debugging server-side configuration or scripting issues.

How do I use it? Without VMWare Player I would be surrounded by a swarm of humming boxes and monitors, each with a different set of browsers and operating systems. Now, I have a laptop and a few VMs. Life is good!

Firebug

Some of my marketing colleagues at Eloqua turned me on to Firefox’s Firebug a while ago and I haven’t looked back since. In the past, site designers were in the dark–you had to have a very deep understanding of the DOM (Document Object Model) to debug issues with CSS (Cascading Style Sheets). Firebug helps to visualize the DOM and then allows you to make changes to CSS and HTML on the fly (no saving and reloading the page) until everything looks perfect.

Firebug was originally designed for Firefox, but you can run Firebug Lite on almost any browser. However, it seems that Firebug was so popular with site developers that both Microsoft and Google have added similar developer tools to the latest versions of their browsers. I found a great rundown of the available Firebug-alikes and their capabilities on ElegantCode.

How do I use it? One of the best things that Firebug does is parse and re-display any CSS styles that you have added to a page. Since Firebug writes much cleaner, more compact code than I ever could, I copy and paste the improved CSS into my style sheets.

What great tools are in your Web design toolbelt these days? And, how do they fit in with marketing effectiveness?  We want to hear about them!