Luckily I have an awesome sister who works in design and is good with Illustrator – which I am definitely not. Thanks to my sister Ryanne, I was able to go from a concept:

To the final design:

She finally helped me get it right. All that’s left is to finally get my blog design in order. It’s due for a refresh. Let me know what you think.

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

<br/> IE is still dominant – so testing for these browsers is essential.

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

<br/> 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!

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.

The results are in! And it’s looking fairly interesting. For the first time, I feel like I have some perspective.

Although I no longer work there full-time, I am still fairly involved with all developments, and I’m proud to unveil the 2007 Edition of FrightCatalog.com. Let me know what you think!

It’s nothing fancy really just a collection of white and black PNG’s that are grouped by their transparency 10% – 90%. Saves fellow designers the 15 minutes it took to create all the images! (background color added for display purposes)

PNG’s are 5x5px that should be tiled. Example of use:

.w10 {
background: url("/images/w10.png") repeat;
}

Download » Easy-Bake Transparents Set

<input type="text"/>
<input type="submit" value="submit"/>

This leads to a term Jeffery Zeldman coined as “classititisâ€? – the extraneous use of class assignments in markup. To deal with IE6 I previously would create markup such as this:

<input class="text" type="text" />
<input class="submit"  type="submit" value="submit" />

to give myself the proper style hooks required to differentiate the elements.

With browsers that support CSS2 – Firefox, IE7, Safari, etc (basically every one nowadays except IE6) it is easy to use proper CSS2 selectors

input[type=text] { /* styles /}
input[type=submit] { / styles */}

However, leveraging jQuery and some simple rules can cleanup our markup and avoid classititis. We can even add in sharp focus/blur based styling behaviors for an enhanced prettification of otherwise boring form elements.

Enter jQuery

I am a huge fan of jQuery. I’ve used quite a javascript frameworks but none of them stuck more than jQuery. Between the thriving community, excellent documentation, and plethora of plugins – you can’t go wrong.

I frequently reuse code snippets of useful functions and css rules that I’ve accrued over time (more on my CSS toolkit another time). Here is code that allows me to avoid the trap of classititis due to lack of CSS2 support in IE6:

$(document).ready(function() { 
        $("input[@type=password], input[@type=text]").addClass("text");

    $("input[@type=password], input[@type=text], textarea").focus(function() {
        $(this).addClass("focus"); 
                //focus class provides a hook to alert the user 
    });
    
    $("input[@type=password], input[@type=text], textarea").blur(function(){
        if ($(this).find(".focus")) {
            $(this).removeClass("focus");
        }
    });
});

input type=”text” try typing in some text and taking focus off the input box

textarea This is a textarea element with some content

CSS that will pull it all together

input.text, textarea, select {
  color: #777;
  padding: 2px 5px;
  font-size: 110%;
  border: 1px solid #333;
  background: #fafafa;
}
.focus {
  background: #fff !important;
  color: #000 !important;
}

Be sure to check out 456bereastreet for an excellent article on CSS 2.1 selectors.