Five Web Design Tools You Shouldn’t Be Without
Just about every web designer uses applications like Dreamweaver, Coda, Photoshop, and the like for their work each and every day. These tools really lay a foundation for web design work, but there are a number of other applications and plug-ins out there that you may not be aware of. These tools can increase your productivity and make your job easier to boot. In an effort to alleviate your designer woes, I have come up with a list of the five most valuable (and FREE) tools that I’ve found. Your comments and supplemental suggestions are most welcome!
1. Firebug
The no-brainer. If you’re in web development, you’re going to need a DOM inspector, and Firebug is the best there is. You’ll find it makes your job of inspecting and troubleshooting your HTML, CSS, and JavaScript much easier (no more “view source”). Firebug lets you inspect any element on your page with just a click, and furthermore, you can even change HTML and CSS properties on the fly to see how your changes will affect your design before you even implement them. In addition, you get some great script debugging tools that help you troubleshoot your AJAX, jQuery, and other scripting elements that you’ve added to your application. This is a free add-on for Firefox (if you’re not already using Firefox, please consider “the switch;” it’s simply the better browser, and add-ons like this make it even more so). For more information and features, visit GetFirebug.com.
2. Web Developer
While we’re on the topic of Firefox add-ons, let’s look at another great addition to your web developer’s toolbox. The Web Developer add-on for Firefox gives you an impressive array of tools to use at your web design disposal. This installs a toggle-able toolbar in Firefox that gives you an overwhelming amount of power to alter and view your web document in a number of different ways. View your document at different standard screen resolutions, disable CSS styles, disable and get meta information for images, disable and debug client scripting, and even view and modify file and session cookies used by the page you’re currently viewing. There’s much more to this add-on than I could ever touch here, so I implore you to read more about it at the Mozilla add-on page, which can be found here.
3. Instant Eyedropper
Web designers need to know what colors they’re looking at on the screen. This happens all the time. Often times, I see other designers taking a screenshot of their page, opening Photoshop, and pasting the screenshot into a new image file. This can be tedious and resource intensive for something as simple as copying a six-digit hex code from your screen. One application that will make this process much more streamlined is Instant Eyedropper. This is a great little utility that puts an unobtrusive icon in your Windows taskbar. When you need to copy a color from your screen, simply click on the icon, and drag your mouse to the area on your screen where the color appears. Using a magnifying glass, you can pinpoint the exact pixel you’d like to copy the color from. When you’ve found your pixel, simply release the mouse. The color is now copied to your clipboard. It’s a marvelously simple idea, and I love the configuration options you’re given with this utility (magnification level, color formats, etc.). Unfortunately, the latest supported OS for this utility is Windows XP. It still works on newer systems, but I’ve noticed some buggy behavior on Vista, Server 2008, and Windows 7. Additionally, this utility does not support dual monitors, so you can only copy colors from your primary display.
4. HttpFox
This is yet another Firefox add-on you should be interested in. HttpFox lets you quickly and easily view HTTP header information (such as post/get variables), HTTP response codes, and caching information. When something isn’t working, this is a fantastic tool to figure out exactly what the web server is sending back to your clients. I have seen a lot of similar add-ons and programs, but HttpFox really shines in terms of quality, stability, and polish.
5. IETester
There are “browser compatibility issues,” and then there are “IE compatibility issues.” Every web designer struggles with getting their content to function and appear just as great on IE as it does on other (*ahem* “better”) browsers. Internet Explorer is in a league of it’s own, and that’s not a compliment. The various versions of IE are so numerous and so different in their rendering functionality that it becomes a cumbersome burden for designers to even attempt to achieve the oft-coveted “cross-browser” badge of honor. One problem you’ll run in to when hacking your sites to look good in IE is that it’s somewhat difficult to test multiple versions of IE on one machine. One tool that I’ve found to make this process a little easier is called IETester. This program is still in “alpha” release, so it’s quite buggy, but it works well enough to quickly test your site’s functionality and appearance in older IE browsers. The latest version, at the time of this writing, has everything from IE 5.5 all the way up to IE8 RC1. If your user demographic is heavy on the IE-side of the browser spectrum, you’ll definitely want to give this tool a shot.