arkitrave :: log

The first significant move toward adoption of web standards at Fisher-Price has finally gone live. The main site template consists of a left nav and a legal footer, with a fixed-width content area. The left nav has been a Flash movie for IE users and a load of document.write statements without flyouts for all other browsers.

Along with a crackerjack developer, I recoded the entire site template to (mostly) standards-compliant code. The left nav now uses CSS for flyout menus (with a little JavaScript for IE) and degrades gracefully if images and/or JavaScript are unavailable or turned off. It works as well in Lynx as it works in Firefox. The JavaScript is external and unobtrusive.

The soft launch page with this new template is Toys by Type. If all goes well, this template will be deployed for all new .NET pages in the main Fisher-Price site.

Any feedback is welcome. Here are the things I know are not fully standards-compliant along with a brief rationale:

• If applicable, I’m using a custom track attribute to handle tracking from the left nav. I don’t think this template is using this at all, so it shouldn’t throw any errors.
• There is a tracking control which writes non-compliant code (script language="javascript", unencoded ampersands, an image inside a noscript tag, etc). I’d like to see this control’s HTML modified, but for now, I have no control over it.
• XSLT is being used to write the left nav items from XML, and though it may be possible, we could not figure out how to close self-closing tags XHTML-style with the XSLT factory. Therefore, a couple input and img tags do not have the closing slash required by XHTML.
• There are a couple left nav links which remained as a xhref="javascript:openWin... statements. This is because the applications which they are opening are JavaScript only. I’d rather have a link fail than have a user open a window they can’t use.
• Yes, all this could mean I should have used HTML 4 transitional. However, I made a judgment call that it was worth using a standards-compliant doctype. First, this encourages us to write good code, and second, it is a break with the past and a move forward that psychologically is healthy for us as front-end coders and developers.

The actual download size is more than a 50% reduction. Not to mention that with all the links being inside document.write statements, Google wasn’t seeing any links on the page. Now the entire navigation in search-engine spider-able.

I’m pretty proud of how far we’ve come in a few months. Check out Toys by Type for yourself.