Using Firefox for Web Design

One of the great frustrations of web design, for me, is dealing with cross-browser differences in rendering code. The worst part of putting together the new design here at Gnomicons was probably not creating the PHP scripts (although those caused plenty of trouble, too), but getting the CSS stylesheets that position everything to render properly in both Microsoft Internet Explorer and Mozilla Firefox, the two browsers I use for design testing. (I have the regular Mozilla suite as well, but I figure that it renders things the same way that Firefox does, and I regularly surf using Firefox, so it gets used to evaluate my site.) While most of my site’s visitors use IE to view the site, I avoid that browser as much as possible because of its lack of W3C standards compliance. Firefox, on the other hand, is pretty strict in its standards compliance, so I feel pretty comfortable that the site is functioning properly if both IE and Firefox can render it.

Firefox has a lot of features (particularly in some of its extensions) that can help a web designer out whether they’re a complete beginner or a long-time pro. Here are some of the ones that I recommend:

  • View–> Page Source — Yes, it’s obvious, but when you have scripts that are giving information to the browser, this can be very helpful in pinpointing problems. IE has the same option under View –> Source. Both programs also offer it on the right-click menu.
  • View This Page in IE — This option is available on a right-click menu after installing the IE View extension in Firefox. It’s simple, but enormously effective. Note: There hasn’t been a 1.0+ compatible release of this extension, but I got the extension in the 1.0PR release of Firefox and it continued operating after I upgraded.
  • Resize –> 800 x 600 — This is one of the first features in the Web Developer extension that I wish I’d had and used in making this version of the site. The site still requires a bit of scrolling at 800 x 600, I think, but it’s not too, too bad.
  • Outline –> Block Level Elements (WDE) — I don’t doubt that this is what my friend Mark used to help me get the CSS positioning right. When I installed this extension and tried that on my site, my eyes glazed over with happiness. Life will be much easier from now on.
  • Images –> Find Broken Images (WDE) — I run a graphics site. Hello.

I could go on and on about some of the other features in the WDE, but I won’t. I’ll just suggest that anyone using Firefox who does any sort of web design go out and get it because it will make your life easier. And for those of you who don’t use Firefox, well, of course, I encourage you to click the button to the left and go get it! The program is wonderful and easy-to-use whether you’re a programmer or not. Besides, once you experience tabbed browsing, there’s no going back!

0 Response to “Using Firefox for Web Design”


  • No Comments

Leave a Reply