tools of the trade
April 30th, 2006, 11:07 am
Like many CSS-based web designers, I don’t have tons of whiz-bang gadgetry in my arsenal of tools.In fact, after finishing the graphical elements in Photoshop, really all that I use is my trusty text editor (*) and FTP upload software. Any of that kind of WYSIWYG stuff — like Dreamweaver — doesn’t really work for CSS, so it’s useless to me. I just keep Firefox open as I’m uploading and keep refreshing the design in the browser as I tweak my CSS into shape (of course, I’ll avoid really long parentheticals about the “and next” with IE6, and the horrors of then mangling your design until it at least kinda works in the Browser of Great Evil).
But there is one additional tool in my kit which bears mention, without which I would be stranded, helpless, sobbing like a babe as the unkind waves of the web world buffetted me on the ocean of the internet.
That tool is the Web Developer toolbar extension for Firefox, written by designer Chris Pederick. As the name implies, it is a toolbar extension in the Firefox browser which essentially allows you to strip, expose, debug, investigate, explore, test, and otherwise disassemble the page you are viewing. When that page is a page you’re in the process of designing / revising, it is an invaluable tool for tracking down errors and experimenting with solutions to layout issues. If you’re doing CSS-based designs, I would say that it’s nearly invaluable in solving design issues with your pages.
There’s fifty trillion commands and options, so I won’t go into all of them here. But I will highlight some of the commands I use the most, which include:
- View Style Information: the ability to click on any element in the page and view the CSS statements which Firefox have applied to just that element in a new tab. I find this really helpful in determining why, for example, some statements are not being applied to an element that I’ve defined in the CSS (like text not going bold, or an anchor not being displayed as a block). If the statement you expected does not appear in the new tab, it means that for some reason Firefox does not realize that the CSS definition applies to that element — probably because of a typo or oversight (like accidentally defining a class as an id in your stylesheet). I’ve solved countless boo-boos this way.
- Display Line Guides: much like guides in Illustrator or Photoshop, a horizontal and vertical guide appear laid over the page, which you can move anywhere in the viewing window. I sometimes use these to verify whether the tops of floated columns really do line up to the pixel, or if something I’ve overlooked is throwing them off (like forgetting to zero out standard margins).
- Outline Block Elements: perhaps the most powerful tool in the toolbar, you’ll see this used in countless web design books. Every block level element in the page gets outlined in a variety of color-coded boxes, and labelled. Structurally, turning this function on can be the most elucidating of all effects, as you suddenly realize, say, that those dls are overlapping across that div, or whatever. Because the colored outlines show the true dimensions of the block elements in your page’s design, you can really see what the underlying structure of the page is, and where these block level elements are meeting (or colliding).
There’s tons more, like a really handy set of what amounts to bookmarks so you can jump to various validators with nothing more than a single click, or all the commands which help you disable functionality on your site (like seeing how your page looks with images disabled). But the best way to see if it works for you is to load it in to your Firefox and start to play with it.
It’s become one of my most cherished and important web design tools, because it greatly facilitates the debugging / revision process, a process which can be extremely frustrating and time-consuming. It even helps me when I load up my design in IE6.0 (which I always do after nailing it in a more compliant browser), because I bounce back and forth from IE6.0 to Firefox, using the Web Developer toolbar to assess those elements (and the underlying CSS governing them) which are causing IE to choke. So, while it’s not actually designed for use with IE, it greatly speeds that part of the process which we can all agree is the least rewarding part of CSS-based design.
Think of it as a kind of Swiss Army knife with a first-aid kit built in. I’d probably be drowning in that unkind internet ocean by now if I didn’t have it.
* Most designers use BBEdit as the text editor of choice, but since I don’t have a Mac I use the “source code editor” functions in Adobe GoLive CS, which I got bundled with my copy of the Creative Suite Pro CS upgrade. Although GoLive can be a major pain in the ass, and I wouldn’t touch the WYSIWYG stuff with a ten meter pole, the source code editor is very good, color-coding HTML, CSS, and PHP, and pretty helpfully pointing out code errors — it’s particularly helpful when your HTML is wrapped up in layers of nested if or while PHP statements, because you can quickly ascertain to which statement a given closing bracket belongs, and so forth. It’s also a so-so FTP uploader, containing trees that form a particular site, and it saves some time that would be consumed constantly jumping over to SmartFTP to upload my revised files.
Hamburg-based
Swords of Fury (1988) Williams Electronics
Last December or thereabouts, on BBC2 — or thereabouts — an entire evening was devoted to the demise of the British situation comedy, and why. And then a bunch of other stuff celebrating this “dead” art form.