• March 22nd, 2008
• Filed in
  • Agile Development
  • CSS
  • Web Design
  • Web Development
  • Work

I recently spent the day debugging Internet Explorer. I save it for the absolute last step in front end development before pushing a site live. I want to avoid Explorer as much as possible.

I figured my process would be worth sharing. This is my setup.

1. MacBook running Firefox with the Web Developer Plugin and Firebug plugins installed.
2. Old Toshiba Laptop 1.8ghz barebones Windows XP installation with IE6
3. Parallels installed on the MacBook with IE7 on Windows XP SP2

With this setup I can test for any modern browser with any kind of significant market share.

• Firefox Mac
• Firefox Win
• IE 6 + 7 (soon to be 8 as well)
• Camino
• Safari

Debugging IE issues is probably the most painful thing about my job, but one that’s made a little bit easier because of my approach so I thought it’d be useful to share.

I develop 9-5 in Firefox so any rendering bugs usually come to my attention right away and I’ll fix them immediately. Camino is based on the same Gecko rendering engine so I don’t have to worry about anomalies there. Safari does a good job rendering everything and my colleagues use it as their day to day browser so we usually catch any rendering bugs that way.

Then it comes down to IE debugging. I only concern myself with IE6 and above, I can handle well for modern browsers, besides the market share of browsers that fall outside this range is really insignificant statistically. For small development teams it’s hardly worth the extra effort to pay attention to the long tail of browsers.

Looking at Google Analytics for a heavy traffic site that I work on:

5.6m Visitors from 8/1/07 - 3/20/08

IE is still dominant - so testing for these browsers is essential.

If we look at the last 6 months, IE7.0 and IE6.0 are neck and neck ~50/50, however:

In the first 3+ months of 2008 you can see that IE7 has taken a significant leap above IE6 in the market 61/39 and IE 5.5 has gone to a 0.12% market share to a meager 0.07% market share.

That leaves us only concerned with IE6 and IE7 (and hopefully upcoming IE8 will be a non factor). The best way to deal with CSS and IE is by leveraging something called conditional comments

Before conditional comments I relied on browser hacks to differentiate between browsers, but conditional comments are a lot easier and so much more effective. Currently I use these declarations:

<!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/stylesheets/ie7.css" type="text/css" />
<![endif]-->

I start with IE6 and clean up any rendering issues - then I move on to IE7, which invariably has fewer issues to deal with. Because IE does not have a handy dandy tool like Firebug to help me diagnose the problem this process usually involves a lot of trial and error. It’s a very iterative process and one that my Agile Development Workflow is well suited for.

One technique I’ve found to be indispensable is assigning various background colors to the markup that I’m trying to debug. Often this is all I need to target CSS rules run amok. Over time you can avoid generating certain CSS + HTML that will break IE altogether - and that’s what separates the experts from novices.

Was this helpful? How do you approach debugging CSS in IE? Share!

Popularity: 10% [?]

• February 23rd, 2008
• Filed in
  • CSS
  • Rants
  • Web Design
  • Web Development

I can’t help it, I’m a front end guy so as I peruse the web and I see something that sparks my interest I fire up Firebug, my go-to Firefox plugin to see the “meat and potatoes of a website”. Websites are like onions and I like to analyze the layers to get at the good stuff, deconstruct it, and understand it.

I work on Yumdrop.com, a popular lingerie site. Often I’m out there looking to see what the competition is doing to see how we stack up and also evaluate how well we’re pushing the envelope in our particular niche. Victoria’s Secret is by far the leader in this industry as far as market share, but their website could’ve been built in 2002.

When I peeled back Giselle’s onion I was flabbergasted. I haven’t seen egregious CSS like this in a long time. As developers have embraced web standards over the years (something I have done from the start) and standards based practices have been understood and adopted, people have just gotten a better understanding of how it all comes together. You don’t see blatant misuse of CSS like this anymore. Even basic knowledge of CSS inheritance could let them avoid this debacle.

On http://www2.victoriassecret.com/html/includes/globalstyles_normal.css for example:

.blacktext {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:10px; }
.blacktext2 {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:11px; font-weight:bold }
.blacktext3 {color:#000000; font-family:Arial, Helvetica,sans-serif; font-size:11px; }
.text2 {color:#333333; font-family:Arial, Helvetica,sans-serif; font-size:11px; text-decoration: none;}
.text3 {color:#333333; font : 10px/14px Arial, Helvetica, sans-serif; text-decoration: none;}
.textPink {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-size:10px; }
.textPink11px {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-size:11px; }
.textPinkBold {color:#FF76A4; font-family:Arial, Helvetica,sans-serif; font-weight:bold;font-size:11px; }

It goes on and on and makes me quite agitated

Turn off Javascript. They use it to write OUT their styling.

No Javascript, No Styling, NO degradation. You end up with something like THIS ». The complete header with site navigation and footer don’t even render, making the site pretty useless to navigate or use.

And as laughable as all this it keeps getting better!

The site navigation is 1 large image map! This is just not done in practice. How can screen readers access the content? How do visually impaired users shop?

Never mind degradation here, there are so many better ways to construct such navigation. Each time you visit a different department you must create a whole new image map image. What a waste of time. If your navigation changes, you have to recreate all of the active department images all over again. With modern development techniques this just makes no sense.

There’s just too much to point out so I’ll just list the rest I briefly spotted in the 5 minutes I looked..

• They’re using a centered div w/ css to center the containing wrapper, but they use tables for layout.
• Extraneous use of classes all over the markup because they don’t understand inheritance.
• Validate much? Of course not, are you even surprised though?

As a web developer, you think that “doing things the right way” is part of building a successful web presence, but as time goes on I’m beginning to realize that it really doesn’t matter as much as we often think. I wonder if Victoria’s Secret developers know that it is not developed with the best practices, I wonder if they care. I wonder if they have an internal team or whether they just outsourced it to a very misguided web shop.

If anyone at VS wants me to scramble their onion, contact me. You deserve better.

Popularity: 15% [?]