Designing for the web is an inherently limiting experience that's bound to induce frustration, irratation and, occasionally, full-blown exasperation. In fact, the very reason this site exists is to help our fellow web developers break through those barriers and push the upper limits of the online user experience. All too often, web designers, developers and even backend programmers compromise their vision due to a lack of support in popular technology, or simply for lack of the knowledge it takes to work around such obstacles. Most of us have had great ideas beaten down because of poor browser support and antiquated hardware, so why are we still letting outdated tehnology determine what is possible on the ASU web?

The solution is simple - start designing for cutting edge user agents and let the rest catch up. Of course, this is easier said than done and that's where the idea of graceful degradation comes into play. As long as your designs specify fallbacks for older, or different, technology, you can build web pages that look beautiful and behave flawlessly on the best systems while keeping a clean conscience that you're not barring the least advanced users from accessing your content.

At this point, you're probably wondering why I'm rewriting Jeffrey Zeldman's classic "To Hell With Bad Browsers", or "Fluid Thinking" by Peter-Paul Koch. Clever observation. Give yourself a pat on the back. The reason is that, not only are these articles more relevant than ever given the state of the Internet Explorer version transition, but the ASU web is riddled with sites that were designed in a narrow-minded fashion. Some of them break in good browsers, some choke in old, bad browsers, and some are even using browser-propietary code to generate entire layouts. This is a real problem and it's in a very immediate context. I won't name examples or print URLs, but let's just say there's a site under the asu.edu domain coded so poorly that the horizontal navigation bar completely covers and obscures the standard header above it in Firefox. I'd say I was just being nitpicky, but this site happens to be linked directly off the ASU home page. The irony? The obscured header contains the only link (above the fold) back to www.asu.edu. Of course, it works fine in Internet Explorer, which brings me to my next point...

STOP DESIGNING FOR INTERNET EXPLORER

I know I'm probably preaching to the choir in this forum, but the message is worth repeating: Checking your designs exclusively in any version of IE is not only bad cross-browser design practice, it's simply detrimental to your understanding of CSS and XHTML and will ultimately lead to your utter bewilderment the first time a client asks you to fix a display issue that seems to be cropping up in Opera. For your part as responsible web designers at ASU, it's your job to both (1) design with a wide range of browsers and devices in mind, and incorporate a varied test suite into your QA process; and (2) notify site owners when you come across pages (especially high-traffic pages) that were clearly designed only for Internet Explorer. Send them an Email cordially bringing the display issue(s) to their attention and (most importantly) providing them with possible solutions, including chunks of cross-browser compatible code. Avoid, however, stepping onto a soap box and chiding these offenders for their mistakes. Steer clear of condescension and adopt a non-snarky tone, but feel free to educate them about good design and testing practices. Be constructive. Or, let UTO alert the site owner for you. We're happy to play the hip, older brother, and our communications probably come with a certain level of implied authority.

*COUGH* EXAMPLES! *COUGH*

So, how do we "Design for the highest common denominator"? The good news is, it's fun, and somewhat elitist - just like most of us. Here are a few examples of ways to use the latest, coolest tricks in your work, without killing the user experience on lesser technology:

• Take advantage of Microsoft's proprietary conditional comments - With the advent of this system for targeting specific versions of the browser, I can't fathom why anyone would still need to use hacks in the main stylesheet. Want to correct for the broken box model in IE 5.x without affecting the way IE 7 renders your code? Make a stylesheet specifically for IE 5 and call it with conditional comments. It's browser detection at its most reliable: Microsoft officially supports this method and has promised not to remove recogntion of the syntax in the foreseeable future of their browser release schedule.

[Example] <!--[if IE]><link rel="stylesheet" href="ie-eats.css" type="text/css" media="all" /><![endif]-->

• Specify custom fonts first in your CSS "font-family" rules - Font trees have been begging for you to take advantage of their #1 slot since the day they were conceived. Go ahead, put "New Century Schoolbook" first in the tree and let systems without the font use the next fallback in the list. Another example is the use of "Helvetica Neue". It's pre-installed on all systems running OS X. it's a slightly more elegant font and you can use it to reward Mac users by placing it first in the list. One caveat: be careful that your fallback fonts are close approximations of your primary choice. For example, specifying "Helvetica" as a fallback for "Helvetica Neue" would be a poor substitution. "Arial" would be a more suitable choice.

[Example] font-family: "helvetica neue", arial, sans-serif;

• Use CSS3 elements for browsers that have already begun supporting them - The latest versions of Opera and Firefox have added support for some of the cool features of the next CSS specification. Play around with them and get a leg up on the future of CSS. Soon, you'll be able to specify an object's opacity, target and style every third paragraph of a div without any additional markup, and insert content into an HTML container by printing it in your stylesheet.

[Example] opacity: 0.8;

CONCLUSIONS

These are just a few examples of tricks you can use to enhance the user experience for the most capable user agents. As long as you thoroughly test your designs in older browsers, across a suite of heterogenous platforms and devices, you can use any technology you wish. Your designs shouldn't be held back because of a vendor's limitations. Likewise, avoid pigeon-holing a certain technology as "unsafe" for the web. For instance, Flash is notorious for being inaccessible, but does that mean you should never use Flash? Of course not, just avoid using it for important content, especially navigvation. And who's to say someone won't invent a way of making animated content completely accessible in the future? Flash and QuickTime won't be the only rich-media plugins forever. With the recent explosion of streaming video on the web, we may begin to see embeddable media players being developed in diverse markets. Microsoft just released Silverlight, and variations are almost sure to follow. At ASU, we strive to stay ahead of the curve in many areas. Shouldn't our websites reflect this?

Update: Andy Budd has a fairly thorough write-up on the development state of CSS3.