DesignWell

I have not tested Dreamweaver CS3, but prior versions of the program do a mediocre job of displaying CSS correctly. For instance, div tags do not always display correctly without inline style tags–which we all know is such a coding faux pas. This has led to a departure from using a WYSIWYG editor and to using the browser to construct webpages. Below are the best aids I have found in debugging and editing webpages in the browser Mozilla FireFox.

Suggested extensions for making coding easier

Web Developer

The Web Developer FireFox extension was the first FireFox extension I ever installed. It was mid-2004, and I was frustrated with Cascading Style Sheets. I was using CSS, not for the first time, but I was using CSS for margins and padding and widths– all those things we used spacer gifs and tables for back in the web?¢‚Ǩ‚Ñ¢s infancy–for the first time. The sole reason that I would have even paid for this extension was the Outline tab and it?¢‚Ǩ‚Ñ¢s ?¢‚Ǩ?ìOutline Block Level Elements.?¢‚Ǩ¬ù The fact that I could actually know where one element ended and another begin was a godsend. There are many more uses for the plug-in. Almost too many to name here. The highlights that I use (or used to use) regularly are:

• Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements
• Disable images
• View the CSS for a particular element by clicking on that element
• Disable cache and cookies
• Display various page and screen sizes for testing (what does this site look like on an 800×600?)
• Disable background images (ever browsed though MySpace, which reminds GeoCities circa 1997)
• View the CSS for a web page while browsing
• Edit the CSS style sheet of web page without reloading
• Validate HTML, CSS, feeds, and links

Firebug

I have only mentioned Web Developer first because it was my gateway drug of FireFox extensions. I use Firebug more often now that CSS is even more prevalent then it was in 2004, thus simplifying the HTML and making hand-coding HTML much easier. Firebug focuses solely on the content of a page and doesn?¢‚Ǩ‚Ñ¢t have the browser related features such as disabling the cache or resizing the browser window. It shines when you want to tweak HTML, CSS and JavaScript contained in a page, all on the fly.

The way Firebug works is by clicking the ?¢‚Ǩ?ìInspect?¢‚Ǩ¬ù button and selecting an element on the page. The HTML and CSS associated with that element is then displayed. The inheritance and overriding of CSS attributes can be seen (hence the cascading in cascading style sheets) and any CSS attributes can be edited or disabled.

Firebug helped make my CSS leaner. Before I discovered it, I often ignored the inheritance features of CSS and repeated the same attributes numerous times, since inheritance is an abstraction that is hard to remember without either modeling (which Firebug does) or precise documentation. Firebug shows this inheritance, thus making the relationships between.

Firebug will measure and illustrate all the offsets, margins, padding, and sizes for you–similar to what you would have in a WYSIWYG editor. Since offsets, margins, and padding can often overlap, there is a ?¢‚Ǩ?ìLayout?¢‚Ǩ¬ù tab that allow editing of these qualities and shows their relationships.

Link Checker

If you?¢‚Ǩ‚Ñ¢ve ever clicked through a large site in order to test all the hyperlinks, you?¢‚Ǩ‚Ñ¢ll find this simple add-on convenient and productive. It will highlight valid and invalid links of a page. Once Link Checker is installed, you?¢‚Ǩ‚Ñ¢ll have to add the toolbar button yourself.

Measure It

You could use the guides in Firebug, but most times, one just wants to quickly estimate the correct margin or padding. This add-on gives the height and width in pixels of a rectangle that can be drawn atop the webpage.

ColorZilla

ColorZilla adds an eyedropper tool to the status bar that allows color sampling and copies RGB values (in five different ways) to the clipboard. This means you don?¢‚Ǩ‚Ñ¢t have to go back to Illustrator or PhotoShop to grab RGB values for your CSS.

A note about Internet Explorer

Unfortunately, the majority of web users browse with Microsoft Internet Explorer and thus testing a site with IE is necessary. At work, I create my websites on an Apple Macintosh and have an old Dell laptop with IE 6 installed to test websites with Internet Explorer. A tool that I have not used extensively, but does help sometimes in debugging under IE is Internet Explorer Developer Toolbar.

To the designer, it’s a pain only using Arial and Times New Roman for headlines (well, the MacHead designers are probably using Helvetica and Times, but I regress. . .) , so one uses images. The problem is that images are static unless you have an image generation script package installed on your web server to create images on-the-fly.

So what’s one to do?

A friend of mine actually sent me a link to Mike Davidson’s site on sIFR 2.0 (Scalable Inman Flash Replacement) two years ago. I had forgotten about it until my creative director wanted a headline in a pixel font in a database driven site.

The concept

sIFR can replace short amounts of text with text rendered in the typeface you choose–whether or not your users have the font installed on their computer. A flash movie is created on the client side and uses JavaScript to pass text to it from the HTML (that’s correct, no coding the text twice). That means with a few lines of Javascript, you can use any fancy font you want for headlines and pullout quotes.

–Stephen M. James
www.smjdesign.com