Using the Web Developer Toolbar For Search And Usability

One of my favorite plug-ins is the Firefox Web Developer Toolbar. Don’t be fooled by the name. While it’s specifically designed for web developers, the toolbar has many options and features that are also useful to search marketers, usability consultants, and SEO analysts.

The toolbar has far too many features to describe in a single article, but here are a few highlights. Use them to quickly help clients see design options and/or problems with their sites and demonstrate a solution without actually changing the site’s code or layout.

Web Developer Toolbar Features

The toolbar is a quick and easy way to look for problems and errors on your own site. It’s also a useful tool to use when working with clients who are unsure about, or resistant to, making any changes.

Page Resize: Show your client how the page displays in different screen resolution sizes.

Maybe the site design uses an 800×600 fixed-width instead of a liquid layout. In seconds, you can show the client how tiny that “perfect” page looks to users with higher resolutions. Or what about that client who insists on a wide banner and large home page images? Demonstrate just how little page content displays “above the fold” to users with a lower resolution setting.

Here’s a real-world example: the Wine Enthusiast site loses all its bottom banner information at the lower resolution:

Turn Off JavaScript: Some site visitors who use assistive technology (like screen readers) don’t have JavaScript turned on. Neither do search engine spiders – those handy little bots that make it possible for visitors to find your clients’ web sites through the search engines.

With the Web Developer Toolbar, you can easily show your client how his site works (or doesn’t!) when JavaScript is disabled. Of course, you can do this without the toolbar, but the Web Developer Toolbar lets you do it with a single click instead of navigating through multiple screens.

Image Options: The three most useful are the “Disable Images option,” “Display ALT attributes,” and “Outline Images Without Titles” options.

1. Disable Images: This is a quick way to view the site through the eyes of a search engine spider. A client with an image-heavy site may be surprised to find out just how much important information is missing if images are turned off.

   There’s not much for the spider to index at the WineEnthusiast.com site:

   

2. Outline Images Without TITLES: The TITLE attribute can be used to add context and extra meaning. The TITLE attribute appears when the mouse runs over the image, so it’s a good opportunity to add additional information. For instance, if the image highlights a 50% off sale, add a TITLE attribute that emphasizes the day the sale ends: “Hurry! 50% off all pet food ends Thursday, April 3rd.”

   The Web Developer Toolbar outline images without TITLE attributes in red, making it easy to choose images that would benefit from additional context. Note that every image in the screen shot below is outlined in red. There’s a lot of opportunity!

   

3. Display ALT attributes: ALT text describes an image – “Save 50% on Pet Food When You Order Online.” Quickly point out images with no ALT text and images with less than descriptive text. These are important components of Web Accessibility standards. The ALT text is used when the image is not available (not loaded yet, or when using a screen reader or browsing with images off to save bandwidth). Note: MSIE also uses the ALT text as the rollover text when no TITLE attribute is present.

Edit Styles in Real Time, in the Browser Window: Help clients choose between fonts and color schemes with the “Edit CSS” option. The toolbar opens a side window containing the style sheet. Make changes and see them real-time in the browser window. Show your client a variety of options without producing a template or file for each one.

This is particularly helpful for clients whose sites have usability and/or readability issues that may be hard to describe. Show them instead. Search marketing may bring visitors to the site, but the site’s usefulness and usability keeps them there.

Look how much more readable this menu is with the font-weight changed to bold, even though the text size is slightly smaller. With the toolbar, you can easily show your client the difference, and reassure him that the change won’t break the layout.

The first image is a screen shot of the original page, and the second shows the CSS edit bar open with the suggested changes displayed.

Small Screen Rendering: How do most web sites display on the small screen? With small screen Internet access on mobile devices like cell phones and Blackberry PDAs growing in popularity, it’s worth knowing how your site stacks up against rivals.

Here are three examples:

Downloading the Free Toolbars

To use the toolbar, you first have to download and install a free copy of Mozilla Firefox. Then, download and install the Web Developer Toolbar.

Here’s how it looks installed, although it actually displays in a single row in the top of the Firefox browser window:

Other browsers have similar add-ons. Download the Internet Explorer Toolbar from Microsoft.

The Safari Web Inspector is part of the Safari WebKit. Its installation is a little more complicated, but it’s certainly worth the effort if you’re a Safari user.

Search marketing and web development are closely related: it’s hard to market a poorly-designed site. And many search marketing professionals have clients who paid a lot for a web site design. They’re often reluctant to make even the smallest changes. Use these Firefox Web Developer options to help clients understand how a few small changes can have a big effect on the potential success of the site.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.