Anyone who sits looking over my shoulder as I build websites soon asks “How’d you do THAT?” – and often they’re talking about one of the free webmaster tools I use on a daily basis.
My website tools let me work smarter instead of harder, while getting better results for my clients. If you’re working on your own site, they’ll help you understand what’s going on and create better results both visually and in terms of site performance.
I use the Firefox web browser, which I consider the best browser choice for anyone building websites on a PC. These webmaster tools are Firefox Plugins, and while some may be available for other browsers, I’m assuming you’re using Firefox for the purposes of this article.
Webmaster Tools – The Essentials
I lost my main hard drive and had to reinstall everything last week, and these are the Firefox Plugins I installed right after I installed Firefox:
Colorzilla lets you “sample” a color on a website, and copy the hex or rgb codes that describe that color to programs used for creating graphics. For example, if I want to match a client’s logo, I can click the Colorzilla button, click the color in the logo I want to identify, and have it copied to the clipboard.
My site logo, for example, uses #D95B43. I can also use the drop down next to the Colorzilla button in Firefox and see the rgb version of that as R: 217, G: 91, B: 67. This means that if I want to color match a graphic, I know what I need.
I often use the Color Wizard site in conjunction with Colorzilla, to find tasteful colors that go well with the main color in a logo or other graphic which a client provides.
Another Webmaster Tool I find essential is Web Developer, by Chris Pederick. This tool does so much, but one of its simplest features is one I find indispensable. It allows me to quickly display a website as it would be seen in various screen resolutions. If you use a large wide-screen display at 1440 x 900 or 1920 x 1200, it can be easy to lose track of what someone on a smaller monitor, laptop or iPad may be seeing.
With a click of the Resize button, I can check out how a site looks at 800 x 600, or add other resolutions I’d like to display. The one I develop to most frequently is 1024 x 768, and Web Developer’s Resize makes it super-easy to keep track of how a site looks at that resolution. I first mentioned the Web Developer Tool when I wrote about screen resolution back in February. That article will help you understand more about how important correct resolution is to web design.
Disable Personalized Search
Yoast makes great plugins, and one I love is his super-simple Disable Personalized Search. It’s important to see if you’re reaching the first page of Google for your search terms, but it’s sometimes hard to tell, since a default Google search puts more “weight” on pages which are local, and pages you visit frequently. That can be very misleading. This plugin removes that bias, and lets you see the true search results for your search. If you are working on Search Engine Optimization, it’s a huge help.
Firebug is a more technical tool, but when you’re wondering what part of your HTML or CSS code is causing a particular result on a page, it’s the right tool for the job. I’ve used it to try out different colors on a page, to identify which plugins a WordPress site is using, and to help me understand what parts of a site’s code I need to tweak to get the result I want. The Net panel can be really good for identifying WordPress Plugins or other elements that slow your page’s load time. I’m not much of a programmer, so I only scratch the surface of what Firebug can do, but I still find it a must-have. You can learn more about what Firebug can do at http://getfirebug.com/ and in this excellent video from WooThemes:
I have a few more Webmaster Tools which I’ll cover in a followup article, so please make sure you sign up for updates, so you don’t miss it.
Edit: Part Two of Webmaster Tools You Can Use is up – check it out!