Since in recent history the Missouri State homepage only gets a complete overhaul about once every 5 years, deciding on what HTML and CSS technologies to use as a baseline is tricky. Five years from now what was once cutting edge could now be old news. So the balance is between a cutting edge technology or something already over 10 years old. We opted to go for the HTML5 route. Little did we know the struggle that would bring.

Browser support

Everyone knows that not all browsers are created equal, but when it came to an actual HTML5 design old browsers just had to go. This wasn’t just Internet Explorer 6, but also FireFox 2 and older. The critical point came down to how a browser would handle an unknown tag. Without some JavaScript help, IE8 and older would treat any unknown tag as inline and had no way to style them. FireFox 2 just choked. There were a couple of options:

Use a hybrid template

In order to handle browser shortcomings, many people just advocated using an HTML4 design with the new tags wrapped around them. Later, you can come back and remove the extra HTML4 structural elements. While this approach would be fine in situations where you can control your templates, for a large distributed site it just wasn’t really feasible and frankly is just kind of cheating.

Go all out

This option punted on support for older browsers in order to look forward to future browsers. However, this meant requiring JavaScript for the template to even function in Internet Explorer 8 and older (IE9 platform preview support looks excellent as of this post). This could also be called the “short-term pain for long-term gain” method. Oddly enough, very few complaints related to this actually materialized.

Gracefully degrade

HTML5 and CSS3 bring some great new features – drop shadows and rounded corners alone are a godsend. But what happened to making the site look the same everywhere? I believe that question has been answered. Instead of killing ourselves on consistency, we chose just make sure the features gracefully degraded in older browsers. Try out the homepage in IE, Chrome and FireFox – all three have minor differences.

Brand new toys

HTML5 brings with it quite a few new features: native audio, video and drawing support are probably the most touted. Yet these are problematic. Not only do only the very newest browsers support the tags, but they can’t even agree on a common set of codecs. So for now, we’re forced to use browser detection to determine whether to use the native tag or to output a flash version. I guess you still can’t have your cake and eat it too.

This is the first post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:

• Honey I Shrunk the Website