Designing a standards-compliant website that is cross-browser compatible is tough. Really tough in some cases. Accessibility is one issue, IE is another altogether and visual appeal is the third element that makes designing a good website a balance of usability, browser-compatible code and stylesheets and an efficient user interface to allow site visitors to find what they are looking for.
Internet browsers are a personal preference, with choices of IE, Firefox, Opera, Netscape (now discontinued), Safari (Apple), SeaMonkey, Konqueror, AOL, Lynx, the list goes on and on. In the majority of web design circles, Mozilla Firefox is probably the widest used due to it’s expandability and security as compared to Internet Explorer. Here is a rundown of my personal list of the top Firefox extensions for website design and development:
1. Web Developer
This tool will be found in most “top extensions” lists because of the sheer number of features it adds to Firefox. The ability to view CSS style information as you view a web page just by mousing over an element makes troubleshooting CSS layouts a breeze. It also provides tools for enabling or disabling cookies, images, forms, javascript and more. Validation tools are included for CSS, HTML and feeds. It’s a must-have extension for your web design toolbox. It can be downloaded from Chris Pederick’s website.
2. FireBug
FireBug is a useful improvement on the built-in Firefox debugging systems. It splits a Firefox window into two parts: the top half, which is dedicated to the web page itself, and the bottom half, which works as a console, complete with its own menus. It flashes up errors, combining an HTML and CSS validator, Firefox’s JavaScript Console and DOM Inspector, together with a command line JavaScript interpreter.
One extra-useful feature for AJAX developers that’s not enabled by default is the XMLHttpRequest Spy. This monitors the various web services messages that go between Firefox and the web server that’s running the AJAX application, making debugging a whole lot easier. It can be downloaded at Joe Hewitt’s website.
3. IE Tab
IE Tab is a handy extension for those designers who prefer to use Firefox as their primary browser, but still need to be able to preview a website within the IE environment. Download from the mozilla.org website.
4. SEO Firefox Extension
This handy extension provides insight into your competitor’s website information, including webpage PR, age, number of inlinks, authority links, Alexa rank, dmoz listings and more. It provides the data below the search engine results for your query. It’s recommended to keep this extension off during casual browsing and only turn it on when performing specific market research. It can be downloaded from SEOpen.com.
5. LinkChecker
I don’t know about you, but occasionally I get a site live and don’t discover some mis-directed links until viewing the 404 log later. In my case, it’s usually due to links generated on a dynamic page or a mod-rewrited URL that my link should have been relative to the root versus the page. This tool allows you to discover those dead links in a live preview and color-codes the links for easy recognition of a broken link. It can be downloaded at Kevin Freitas’ website.
6. Clear Cache Button
I frequently find myself testing websites and having to clear out the cache to reload files from the server. A recent example was when I was testing a Flash-XML site and the only way to keep pulling the new code from the server was to clear the browser cache. This handy button puts that ability right on your toolbar and saves a few repetitive clicks. The extension is by Chris Holtz and can be downloaded here.
7. Aardvark
Aardvark is a user-friendly extension that provides some similar functions as the web developer extension. It allows you to select elements in a live webpage and performing functions such as remove, navigate wider, isolate, view source, and includes an undo function. Very handy if you want to print one element of a webpage or just troubleshoot element information. The extension is by Rob Brown and is available here.
8. Broadband Speed Test and Diagnostics
This extension isn’t so much website design as it is network troubleshooting. If your browser can’t pull up a webpage, the extension automatically checks your internet connection and you can perform network troubleshooting tests on your NIC card, local gateway, DHCP server, DNS server, and web site. It also displays private IP address, MAC address, default gateway, DNS server, DHCP server, routing table, ARP table, and active connections. Downloadable here.
9. ColorZilla
ColorZilla is a handy extension that helps designers choose colors from a live webpage. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. The extension can be downloaded from iosart.com.
10. X-Ray and Professor X
X-Ray and Professor X are separate plugins for Firefox that compliment each other. X-Ray allows you to see the tags used on a webpage without viewing the sourcecode. You can find out if a list is made of li, dd or p elements, or if text is tagged with H1, H2, etc. Professor X allows you to view the head code of a page without having to view the source code. Easily view meta, script and style content. Both extensions are by Stuart Robertson and you can download X-Ray here and Professor X here.
That’s my personal top 10 list for useful Firefox addons and extensions. There are so many extensions available that it’s hard to narrow it down. If you have an indespensible extension to add, feel free to put it in the comments!