One True Fit - Standards Design

This paper will attempt to give an overview how I built Lee Jeans - One True Fit.

I will try to give an overview of the major technical points, separated it into some general categories, but they will overlap somewhat.

Tip: to view the site without stylesheets, append ?style=false to any page's url. To turn CSS back on, append ?style=true or click the link at the bottom of each page.

Design

The design is based on the One True Fit Commercials. I am very happy with it but will focus this review on the technical side of things.

Flash was used in moderation for simple animations to enhance the mood and further match the commercials. I used Travis's excellent Flash sniffer to (a). work around invalid markup in object/embed tags, and (b). Provide alternate content to unsupported versions of Flash and those without script capabilities. It is up for debate whether using Javascript to write invalid markup is acceptable, but it was the best solution for now.

Backend - PHP/MySQL

The site runs on a custom templating system. It is object-oriented and modular, making it easy to put pages together with reusable pieces of markup. The design of the template system is based loosely on various Java frameworks such as Tiles and Tapestry. The combination of these bits of markup and CSS to style them differently is extremely powerful. For example, the sweepstakes ad on the homepage and internal pages use the same markup, but styled differently.

The site has a few simple dynamic features such as the testimonial in the right column and the voting system. These were designed with the Data Access Object (DAO) pattern in mind. This pattern gives you a nice seperation of database logic and application code.

This layered approach makes the site very flexible - the layout, structure, data access, and data store layers are, for the most part, only tied to their nearest neighbor. This means that any modifications to one layer only affect adjacent layers; e.g. changing the layout (css) only affects structure (markup).

Markup

The entire site validates as XHTML 1.0 Strict. I used a combination of id and class elements on the <body> tag to style each page individually where needed. This gives you a lot of flexibility in setting base styles for all pages, then overriding or adding additional styles for each page. I used standard <div> containers with id's: header, content, navigation, footer to seperate each logical piece of the page. A minimum of class attributes were used, instead relying on structural and semantic markup to target each part of the page.

CSS

The CSS validates with the exception of a Star-7 hack on the homepage.

I think I got away with relatively few CSS hacks. Mostly minor adjustments for versions of IE, this type of thing (not an actual rule): 

/* "* html" targets only versions of ie */
* html body#internal #content {
	
	\width: 429px;	/* set for all ie */
	
	w\idth: 400px;	/* ie5win will ignore this  */
	
	/* backslash hack hides from ie5mac \*/
	width: 200px;
	/* end hack */
}

Other CSS techniques used:

  • lir image replacement - used extensively to turn a plain page into a graphical page
  • Fahrner image replacement - for a couple tricky spots where ie5mac couldn't handle the lir method.
  • Fast rollovers - reduces image downloads (e.g. bandwidth) and also fixes the "flicker" problem when doing css image swaps
  • <body> id & class - a great way to target each page for customization. I use id for the basic page type; home, internal, popup, etc. And use class for the specific page; commercials, privacy, etc. If you look at the stylesheets you'll see that each rule starts with with something like "body.commercials #content" which will only affect the content area of the commercials page. To make this easier, I allow the template system to determine the "id name" of each page by the file path. So, for example, "/commercials/index.php" turns into "commercials-index" (note dashes for css compatibility).

The stylesheets were broken up into a few files for easy reuse:

  • global: very basic styles for all pages, including form styles
  • page: colors and common elements for all pages; for example, navigation
  • layout_home: positional styles for the homepage
  • layout_internal: positional styles for internal pages
  • content: specific styles for each page's content
  • popup: styles for all individual popup windows

All stylesheets except global are wrapped by a file that @import's the actual stylesheet. This hides those styles from Netscape 4 and IE 4 on MacOS 9. Those browsers see a lightly styled page which is fully functional but without the fancy layout. Here is the @import (credit to Travis) which also filters out IE 4.5: 

@import 'page.css';     /* for everyone but mac ie - note single quotes */
@im\port "page.css";    /* for mac ie5 but not mac ie4.5 */

Since the homepage is completely graphical, it is layed out with absolute positioning. The internal pages are controlled with a combination of absolute, inline and floating styles so the content will flow. Try changing your font-size to see how it adjusts.

Since this is not meant to be a highly accessible site, I used pixels for font-size in most places. However, I used a combination of pixels and em's for positioning to best suit font-size adjustments.

Rollover Flicker in IE 6

Using background images and a:hover causes a flicker in ie6. The problem seems to be caused by choosing "Every visit to the page" in the cache options. See my post on css-discuss for more information, and a few workarounds. See this follow up for a possible fix, though I can't seem to get it to work yet.

Update: I've got some new detailed information on flickering

Accessibility

I have not done anything special to make the site accessible. However, the beauty of XHTML/CSS design is that accessibility comes almost automatically. There is some javascript used on the site for popup windows, opening external links in new windows, etc. but none of it is necessary. A quick 508 check shows no problems on the homepage.

Other

Unfortunately, this site had to run on PHP through IIS, so I couldn't do nice things with mod_rewrite.

Major Accomplishments

I'm happy to say the site looks great in:

  1. IE 5 on OSX
  2. Camino on OSX
  3. Safari on OSX
  4. OmniWeb 4.5 on OSX
  5. IE 6 on Windows
  6. IE 5.5 on Windows
  7. IE 5 on Windows
  8. Opera 7 on Windows
  9. Netscape 6.2 on Windows
  10. Other Mozilla browsers - Netscape 7, Firebird, etc.
  11. Basic style - Netscape 4
  12. Basic style - IE 4.5 on MacOS9

Each browser has its own quirks, but they've been worked around with various hacks. In a few cases I had to change the design slightly for certain browsers.

Favorites

My favorite parts of the site are: the poll results ("8,217 Women said they love their One True Fit Jeans" - check out the homepage with css, and without css, and the stylesheet under the comment "Stats"), and the little rounded corner at the bottom right on internal pages. I'll let you figure out how that got there :)

The Commercials popup is also pretty cool, it uses multiple class names in the body tag to handle variations for the commercial and bandwidth choices. For example, <body class="commercials happyplacea high"> says "this is the commercials page, showing clip 'happyplacea' at high quality". So with no other changes to the page, the stylesheet handles everything.

Conclusion

Although I could list about a thousand reasons that sites should be built with XHTML/CSS, the main motivation, and reason the client would accept a higher browser requirement (5.0 and up) was search engine rankings. I'm no search engine expert myself, but I believe with less source code for spiders to look at, semantic hints such as <h> tags and page content near the top of the file, we should do well.

Hopefully this site will show that proper markup and stylesheets can be used to create more than the typical "blog" site. As much as I admire those, and other information-rich sites; I think One True Fit shows another side of things.