In All Reality - I can’t be a rockstar…so I do this instead.

I love what I do.  I love designing for such a dynamic environment as the web.  I love the challenges inherent in a medium as fluid and malleable as a web page.  I love the interactivity with the audience that completely devoid from formats like print and video.  I love it….except for the last step (at least for me) in the evolving process of web page creation: browser debugging and troubleshooting.

Why So Sad?

The depth of my hatred for browser debugging is unfathomable.  I’m not a believer in karma, or some sort of balancing scale that governs the universe…but I somehow feel that the sheer love and joy that I get from designing for this medium exacts some sort of price in the Spreadsheet of Life, and that the somehow ends up being the time I always have to spend debugging issues after everything is said and done.  I know that it comes with the territory, but it always seems to be a giant buzzkill at the end of the creation process.

1. My typical workflow goes something like this:
2. Create design (i.e. play in Photoshop for several hours/days)
3. Chop up design into component images, tiling backgrounds, etc.
4. Write up the basic HTML for the structure of the page
5. CSS the crap out of it
6. Spend several days testing it in every browser I can find, making changes, making changes to the changes I made because they don’t work in IE6, making changes to those changes because they don’t work in IE7, wishing every browser had a debug tool like Firebug, and generally becoming very frustrated and angry.

Browser Defaults

A ton of potential problems that lead to extended time debugging a design are because of the default ways that browsers display objects in the DOM.  Forms, fields, paragraphs, buttons….these all look and behave differently depending on which browser you use.  The IEs are particularly bad in their addition of extra margins around <form> tags.  <ul> and <ol> bullet displays have a reasonably wide variety of possible outcomes.  And of course there are the OS/browser overrides of buttons and form controls.  Macs get shiny buttons, Firefox makes select boxes that actually pay attention to widths correctly, and Opera does all manner of odd things with Flash.

A lot of these issues can be resolved by using a reset stylesheet.  This is simply a CSS file that’s included in every page before any other stylesheets come into play.  The actual content of the reset sheet varies depending on personal preference, but the idea is to declare your own set of standards for most, if not all, HTML tags.  For instance, the stylesheet that I use on this site declares that all heading tags (H1 – H6) have a 10 pixel margin all the way around.  This standardizes the output in every browser, before I ever actually style an H# tag.  That way, I know that whatever styling I apply starts from a standard set of “ground rules”, regardless of browser.

CSS Compatiblity

This isn’t as much of an issue now as it was even 3 years ago.  However, even modern browsers contain a large amount of spotty or outright absent CSS support.  This means that there limitations imposed from a design standpoint going forward because of the imperative of using CSS methods that are acceptable to all browsers.  The alternative is to use some method of browser detection and apply stylesheets based on the browser brand and version viewing the page.  This is called version targeting, and it can get messy very, very quickly.  For more info on CSS support, check out this awesome report from Quirksmode.

Alas, IE6

This probably doesn’t come as a surprise, but I abhor IE6.  Actually, that’s not really fair.  Yes, IE6 is terrible, but most “old generation” browsers were/are.  No, I hate IE6 because everyone still uses it.  It is the ultimate bottleneck of progression in the wonderful world of the interwebs.  This is more of a rant toward people who wont upgrade.  I understand that there are still a sizable amount of people still on non-broadband connections and updates are painful at best.  Yet, even worst-case it would only take one evening of downloading the update to IE7 and the world would be a much better place.

Because of the sustaining prevalence of IE6 usage, it’s still a major browser and debugging must be done for it.  The problem is that IE6 is so strange and backward, that changes made to correct visual flaws when viewed in IE6 almost always result in breakage when viewed in IE7, FF, or some other nextgen browser.  Often it seems an either-or situation: you can fix it for IE6 or you can make it work with everything else.  Thankfully, there are still IE’s proprietary conditional tags.  Even though these are a mild form of version targetting, they allow for and easy inclusion of an IE6-only stylesheet that can be used to make the tweaks and special formatting needed for the monstronsity.

You.

That’s right…you.  Well, maybe more specifically, your computer.  It isn’t really your fault, but even the addons or inconsistency in operating system updates on each individual system can have an effect on how the page you’re viewing is rendered.  IE6 v6.0.2 could display things differently than v6.1.6 of the same browser.  Even Firefox 2 and Firefox 3 contained some variations in padding and margin displays.

I think this is perhaps the worst part of the debugging for me personally, and it’s largely because of the feeling of impotence about it.  There is simply no way to make every design and page look and behave exactly the same in every browser on every computer, anywhere, all the time, forever.  The unfortunate thing is that some people are less understanding of this fact that others, and those people seem to be the ones who become the clients of web designers.

I take great pride in my ability to create CSS and markup that avoids the vast majority of the issues mentioned above.  Even so, I still find myself battling these issues on a daily basis.  I don’t have a solution to it; I really wish I did.  Hopefully, as more and more browser versions are released and more and more people begin to make the web an integral part of their lives, we’ll see a smoothing out of the bumps in the debugging process.

But I feel better now that I’ve complained about it.