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.
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
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:
- Celebrate Global Accessibility Awareness Day (GAAD) on May 19 - May 16, 2022
- New Content Management System Coming Soon - March 3, 2021
- Meet our newest team member: Valerie Cummings - October 20, 2020
- Graduate students: Share the stories of MSU - May 1, 2019
- New design for university websites - April 17, 2019
- Marketing and communications offices have new names - July 6, 2018
- Social Media Kit: Spring 2018 Public Affairs Conference - March 27, 2018
- Lessons learned from the Alumni Association and Bear Bulletin redesigns - March 2, 2018
- Be smart on social: You’re one of us - February 27, 2018
- Recap: Making Your Statement in a Digital World, Spring 2018 - February 26, 2018