In case the reference is unclear, here's the commercial.

Here's an interesting video about usability. Well, "Usability 2.0" (what ever happened to 1.1?). It's a panel discussion with participants from Netflix, Google, and Yahoo.

There were many good points made, as you might expect, but there was one comment in response to an audience question that opened my eyes a bit. One of the panelists said, and I paraphrase, if you have to evangelize passion, you have a different problem. That is, if your product doesn't stir enough interest that you need to convince your users to be passionate about it, there's something wrong with your product.

From a web site perspective, if you've successfully marketed your site, you'll be getting new unique visitors that will arrive on your doorstep with a certain amount of passion. Be it curiosity or honest to god faith that what you have is worth their time and effort to invest in, you're basically battling the atrophy of the fantasy. People are more likely to think about the end result of dealing with your product than the required interaction time/effort to realize that dream. So they come in at A wanting C, and your job is to tell them they have to go through B to get it. Hmm. Passion dwindles. How fast it dwindles is up to you.

That's where the difference between a walkup UI and an awkward UI stands out. The better your UI is at managing your users psychologically along their path to C, the more likely they are to stay there for the ride, and if your lucky, remember how easy it was to get there. And if you're really lucky, tell their friends.

Same goal, different perspective

There are a lot of people out there that don't understand the value of design and usability, and a lot of them are at the top of the corporate food chain. Those of us that actually care about good design and intuitive user experience aren't out there to create an ok design. So here's another way to look at it:

A new user comes in with passion level at, say, 100. With each design decision or compromise, think what the cost will be? By the time they reach C, how much is left? When they return to the site to do it again (should you be so lucky), they won't likely start at 100. Will they come in at 50, 70, 90, or 10?

When I was a kid, I remember someone saying 50% is an F. Fortunately, they were talking about work ethic, not about my grades :) Point being, ok is a failure when you know you can create excellent.

When I was putting together the rounded border box example, it occurred to me that a better fit for the single image method would be on sliding doors.

A common misconception about sliding doors is that it necessitates splitting the sliding image into two images.

You only need to split the sliding image when it includes a transparent portion that must allow another background image to shine through.

If your images don't include transparency OR if your images aren't over another background image (and even then, sometimes), you can and should use a single image.

Starting point

Let's take a slightly altered version of ALA's Version 1 example.

<!--[if lt IE 7]><div class="IE"><![endif]-->
<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<!--[if lt IE 7]></div><![endif]-->

And the css

* { margin: 0; padding: 0; }
body {
    background: #fff;
    color: #000;
    font: normal 76%/1.5 Georgia, Times New Roman, serif;
}
#header {
    float: left;
    width: 100%;
    background: #DAE0D2;
}
#header ul {
    padding: 10px 10px 0;
    list-style: none;
    overflow: hidden;
}   
#header li {
    float: left;
    background: url("left.gif") no-repeat left top;
    padding-left: 9px;
}
#header a {
    float: left;
    background: url("right.gif") no-repeat right top;
    padding: 5px 15px 4px 6px;
    text-decoration: none;
    font-weight: bold;
    color: #765;
}
#header a:hover {
    color: #333;
}
#header .current {
    background-image: url("left_on.gif");
}
#header .current a {
    background-image: url("right_on.gif");
    color: #333;
    padding-bottom: 5px;
}
.IE #header ul {
    zoom: 1;
}

Take a look. I removed the container's background image, cleaned up some odd style declarations, and moved the IE/PC targeting to a conditional comments driven method. Not as pretty without the background image, I know. But let's stay focused.

A simple change with a big payoff

Now, we take right.gif and left.gif and combine them into tab.gif

and do the same for right_on.gif and left_on.gif

And change the background declarations to point to the new images.

* { margin: 0; padding: 0; }
body {
    background: #fff;
    color: #000;
    font: normal 76%/1.5 Georgia, Times New Roman, serif;
}
#header {
    float: left;
    width: 100%;
    background: #DAE0D2;
}
#header ul {
    padding: 10px 10px 0;
    list-style: none;
    overflow: hidden;
}   
#header li {
    float: left;
    background: url("tab.gif") no-repeat left top;
    padding-left: 9px;
}
#header a {
    float: left;
    background: #DAE0D2 url("tab.gif") no-repeat right top;
    padding: 5px 15px 4px 6px;
    text-decoration: none;
    font-weight: bold;
    color: #765;
}
#header a:hover {
    color: #333;
}
#header .current {
    background-image: url("tab_on.gif");
}
#header .current a {
    background-image: url("tab_on.gif");
    color: #333;
    padding-bottom: 5px;
}
.IE #header ul {
    zoom: 1;
}

Since the image includes transparency, I've set the background-color on the a to mask the li's background image and blend with the ul's background-color.

Step 2, profit

That's it. Besides the container background-image concern, there's really not that much to consider. And the benefits are:

1. reduced page resource requests by (at least) two images—a big help for browsers that use a limited set of concurrent connections to load page resources
2. rendering of the graphics should always happen simultaneously—no one-sided tabs while you wait for the other side to arrive from the server
3. when you want to change the look of your site, you only have one file to edit
4. no concern about browser caching causing a mix and match of old and new images, making one side green and the other red

Exceptions to the no background image rule

You can actually use the single-image method in some cases where you are working over a background image. The key is the placement of the transparency in the sliding image relative to the background image below it.

Exception 1

When the slider transparency overlaps a region of the background image that is a solid color. For example, ALA's Version 3. You can see that recreated in single-image mode here.

Exception 2

If your images include transparency, but the background behind the transparent portion will always be exposing the same portion of the background image, you can modify the slider image, filling the transparency with the background pattern. Less flexible? yes. Still, one fewer image request doesn't hurt. It's up to you whether it's worth it.

So stop creating so much work for yourself and the browser!

Working from home, Sundays sometimes feel like this.

There are plenty of ways to build rounded border boxes. I wanted to do so using a single background image (just for kicks). Naturally, I wanted to minimize excess markup. I also wanted the box to be elastic.

So here it is.

The basics

The image I created was basically an oversized rounded border box with a transparent content area surrounded by a white background and drop-shadow.

The markup goes a little something like this:

<div class="box">
    <div class="box_head"><h2>Test Title</h2></div>
    <div class="box_content">
        <p>
        1 Proin at eros non eros adipiscing mollis. Donec semper
        turpis sed diam. Sed consequat ligula nec tortor. Integer
        eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum
        ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque
        neque. Nulla luctus erat vitae.
        </p>
    </div>
</div>

And the css:

* { margin: 0; padding: 0; }

.box {
    width: 25em;
    background: url(rounded_corners.png) no-repeat bottom right;
}
.box_head {
    background: url(rounded_corners.png) no-repeat top right;
    padding-right: 25px;
}
.box_head h2 {
    background: url(rounded_corners.png) no-repeat top left;
    padding-left: 25px;
    min-height: 25px;
}
.box_content {
    background: url(rounded_corners.png) no-repeat bottom left;
    padding: .7em 0 1.5em 25px;
    margin-right: 25px;
}

The decoration

I then added a few more classes to describe the various content styles I wanted applied.

p { margin: 1em 0; }

.bg_green { background-color: #7a9; }
.bg_tan   { background-color: #ffe; }
.bg_red   { background-color: #922; }
.bg_gray  { background-color: #eee; }

.fg_white { color: #fff; }
.fg_red   { color: #d99; }
.fg_dgray { color: #444; }

.bg_gray .box_head h2 {
    font-family: Monotype Corsiva, monospace;
    letter-spacing: 1ex;
    padding-top: 1ex;
}
.bg_gray .box_content {
    padding-top: 0;
}

.head {
    text-align: center;
    font: bold 120%/1.3 Verdana, Arial, sans-serif;
}
.head h2 {
    padding-top: .2em;
}

.horz_center {
    margin-right: auto;
    margin-left: auto;
}
.vert_margin {
    margin-top: 2em;
    margin-bottom: 2em;
}

And added them to the div.box and div.box_head class attributes.

<div class="box bg_tan horz_center vert_margin">
    <div class="box_head head bg_green fg_white">
...

Keeping the structural css separate affords me the flexibility to decorate the header and content areas differently.

IE compliance

IE7 supports png alpha transparency natively, but previous versions don't. Since the AlphaImageLoader filter doesn't allow for positioning, I just created a gif version of the same image and served that up for IE using the single stylesheet conditional comments method.

Markup

<body lang="en">
<!--[if lt IE 7]><div class="IE"><![endif]-->
...{content}...
<!--[if lt IE 7]></div><![endif]-->
</body>

CSS

.IE .box,
.IE .box_head,
.IE .box_head h2,
.IE .box_content {
    background-image: url(rounded_corners.gif);
}