Friday 6 September 2013

The battle of a Web Developer: Modern Technologies vs Legacy Support

HTML 5 is the new standard for web developers to work toward. It has superseded the HTML 4.01 and XHTML 1.0 formats, and it’s what we are building your websites in. Some coding elements have been dropped and new ones have been added. The same applies for CSS3, in fact, possible even more-so, with the ability to create animations and transitions through simple markup being more powerful than ever before, essentially allowing you to do with HTML what you could do with Adobe Flash roughly 10 years ago, except without the bloated addons, security flaws and massive load times.

However, the one big issue that we face in the fatBuzz office when designing and building a site, is how much of the future technologies do we support, while maintaining support for legacy systems? It’s a difficult act to balance, as ultimately supporting one, will almost definitely ‘break’ the other. We want to create beautiful, dynamic websites and HTML5/CSS3 allows us that freedom but unfortunately, support for older browsers like Internet Explorer 8, does restrict us.

To help understand the various permutations, Find Me By IP (http://fmbip.com/litmus/) offer a multitude of charts on what features are supported by browser. The list is vast but generally speaking the latest versions of Chrome, Safari, Firefox, Opera and Internet Explorer 10 provide a large majority of support, while Internet Explorer 9 has limited modern support. Go to IE8 and below and the support is really starting to diminish, if not completely disappear. If you’d like to check your browser’s compatibility, check out the HTML5 test (http://html5test.com/).

To look at the 2013 stats provided by w3schools (http://www.w3schools.com/browsers/), 80% of Firefox users, 92% of Chrome users and almost 100% of Safari users are using browsers that deploy a decent level of HTML 5 support. 88% of web users use a non-Internet Explorer browser, so from those figures it can be assumed that the majority of visitors will see our sites as intended. Again, using the figures from w3schools, we can deduce that 6% of web users will see our site from the perspective of IE8 or lower, with the other 6% using IE9 or IE10.

Taking all that into consideration, it must be argued that support for 6% of legacy users being balanced against 88% of modern users seems like a significant mismatch. The legacy figures are only going to wane as time goes by and as much as we aim to provide as much backwards support as possible, there will come a time where we need a draw a line in the proverbial sand and start looking forward, not back.


Below are some examples of really cool sites that we like, that use HTML5 and CSS3 to create some awesome, dynamic websites. Please note though, they won’t work properly if you’re viewing this on Internet Explorer 8 or below! So now would be a good time to download Chrome or Firefox to have a look at what we’re seeing.

Tweetflight - http://tweetflight.wearebrightly.com/

Uses HTML5 to embed flash free video (and therefore viewable on Apple iOS devices) and CSS3 transitions to create animations for the text and tweets.
The Mustache Game - http://www.themustachegame.tv/#/digital-edition

This demonstrates what used to only be possible with Adobe Flash. More of a fun website, but it demonstrates the functionality possible.
A really simple site that cleverly uses simple images and CSS3 to rotate and move items in a skewed way. Site is also responsive and changes nicely for mobile devices.

Manchester City Council - http://www.manchester.gov.uk/

You normally wouldn’t expect such a beautiful site for a local authority. This is a big favourite in the fatBuzz office with it’s combination of pastel colours, hidden dropdown menus and clear, exciting images.

If you have have any queries regarding any of the topics discussed, please get in touch by emailing me at jon@fatbuzz.com, or by commenting on this post.



If you have found this post interesting please share it with your online community using either the Twitter, Facebook and Share buttons below. Thank You.



    

  

No comments:

Post a Comment