Working together for standards The Web Standards Project

Ryan:

I did all the design and programming for the site.

Ryan:

The primary goal of the site was to get the word out about these new jeans, and search engine placement was a very important part of this. After my initial designs were complete, I was pressured to change things to become more “search engine compatible.” I quote that because all this meant was changing some graphical text to actual text (thereby mucking up the design), and adding alt attributes to images.

It took some convincing, but I showed how I could take a page very optimized for search engines (the no-style version), and still make it look exactly like my original design. I explained the benefits of semantic markup, very little source code, content at the top of the page, and CSS. Once they believed that we could have the best of both worlds, the only sticking point was browser compatibility.

Historically, Lee’s sites have been 4.0-compatible, but usage of those browsers is continually dropping and probably hovering at 1% now. We decided that the search engine benefits greatly outweighed 1% of the audience seeing an unstyled (but still completely usable) site.

…you have to explain the benefits in business terms.

The short, and more generic answer to “how did you do it” is: you have to explain the benefits in some kind of business terms. For me it was search engines. Without an explanation of added value, there’s no way anyone will care how nice your code is. They will care that 1% of users can’t view the design.

Ryan:

I don’t have any official stats, but I know we were ranked very high within days after launch. There was a temporary placeholder site up before, so that probably helped the speed. Still, it was amazing to see how much better it ended up ranking overall. Not to mention that because we were going for the term “sexy women’s jeans” we’ve got some pretty stiff competition…

Ryan:

Yes, that caused me a little stress. My first move was to change the parameter that triggered the “no style” page. It was originally ?css=false so I just changed it to ?style=false. Luckily that link hadn’t propagated much at the time. Secondly, I added a meta tag to the unstyled page to tell search engines not to index it:

<meta name="robots" content="noindex" />

Notice I didn’t specify nofollow since individual links on the page are okay to index, they don’t contain the style parameter. Within a couple days Google switched its primary URL and everything was cool.

As for the bosses, I quietly fixed the problem before anyone noticed and then told ’em.

Ryan:

Thanks. The commercials were all I had to go on. Branding for the jeans had gone through a couple phases, the commercials being the strongest and most recent attempt. To make things even more interesting, we didn’t have web usage rights to any photography that went along with the commercials. Yep, every image on the site is a screen grab from a Beta tape. [Ed. — ouch!]

As far as direction, the major goals were:

• Show off the jeans.
• Match the mood of the commercials.
• Balance the glamorized feel of the commercials by creating a feeling that these jeans are for real people. The simple voting and testimonial features helped out here.

Ryan:

…it’s probably not a problem for most people.

Fortunately, since the problem is caused by manually setting the cache to check for updates on “Every Visit to the Page”, it affects designers a lot more than your typical user. For onetruefit.com, I did as much as I could but ultimately gave in to the fact that it’s probably not a problem for most people.

Recently I’ve found out a few more things about what causes this. The short story is that flicker is caused by any of these three:

• background-repeat set to anything but repeat
• background-color set to anything but transparent
• background-position set to anything at all

If the element’s width × height is less than 2500 pixels it will flicker. If the image is a transparent GIF it will flicker. That should be easy enough to avoid in most situations. For more information, the gory details are on my site.

Ryan:

Putting an id and/or class on the body element allows you to target any element on a specific page, or even override the styles for an entire page.

My general method uses the body’s id to define a type of page (e.g., “home,” “internal,” “popup”) and class to define the subtype (e.g., “products,” “contact,” etc.) One might argue that those should be reversed, because an id should be unique. However, see below on using multiple class names.

For example, every internal page on the site has id="internal" but a unique class like class="commericals". This way you can differentiate the h2 on the homepage from the one on the Commercials page, from the one on the Where to Buy page all in one stylesheet.

body#home h2 {
 /* only the homepage */
}
body#internal h2 {
 /* all internal pages */
}
body#internal.commercials h2 {
 /* only the commercials page */
}
body#internal.wheretobuy h2 {
 /* only the where to buy page */
}

In practice, I used a separate stylesheet for home and internal to avoid unnecessary download. I also defined the internal page’s h2 (the big title) in an inline stylesheet to avoid excess image downloads since some browsers download all images defined in a stylesheet regardless of whether they’re used or not.

A more interesting example is in the Commercials popup window. The body tag looks something like this:

<body id="commercials"
 class="happyplaceb high">

id="commercials" — This is a special kind of page, different than “home” or “internal”

class="happyplaceb" — The current commercial’s name. I use this to target the page headline, and show the hover state image of the thumbnail on the right side.

body#commercials.happyplaceb
 #header h2 {
   background-image:
   url(title_happyplaceb.gif);
}
body#commercials.happyplaceb
 #navigation a.happyplaceb {
  background-image:
  url(thumb_happyplaceb_over.jpg);
}

class="high" — The chosen movie quality (high or low). I use this to target the bandwidth selection button, to highlight the current one.

So with a few changes to the body tag, I had a very dynamic page without changing other markup at all.

Ryan:

I was fortunate to be able to write the CMS and site together, so there wasn’t a problem. Using CSS for presentation makes it a lot easier to create a content management system with a sense of reusable modules.

For example, the logic and markup for things like the Sweepstakes Ad and the “10,400 Women love their jeans…” block are defined in once place, but look completely different on the home page than on internal pages because of the stylesheet applied. With just the right div wrappers and other ids and classes, you can put a chunk of markup just about anywhere on the page and then style it.

Of course in reality if you’re doing a layout that flows, you have to deal with source code order and floats, but you get the idea.

Ryan:

Most people tend to think these things are conflicting ideals. By using Javascript to write the Flash content or an image if Flash is not available, as well as using a <noscript> tag to write that same image, we get valid markup and the best experience that a particular user can get. I leave it up to you whether writing invalid markup with Javascript still constitutes a valid page, but it works.

Ryan:

Three: Creative Director, Producer and myself.

Ryan:

I would have liked to make the site a bit more accessible. It’s very close but since the target audience doesn’t necessitate it, I didn’t get the time. What’s nice is how accessible it ended up without making any special attempt.

Oh, and I would have liked to fix that stupid IE6 flicker.