Web development is sometimes like playing Whack-a-Mole. Since there are several different browsers (Internet Explorer, Chrome, Firefox, Safari, others) running on different operating systems, it is really frustrating to develop for all of them since each has their own quirks. Fortunately, the most recent versions of Chrome, Firefox, and Safari render sites enough alike that we rarely run into differences between them. However, when dealing with Internet Explorer 7, 8, and 9, the rules completely change, causing us to spend a ton of time tweaking sites to render correctly when using them. It is important to keep the differences between browsers  in mind when incorporating new technologies like HTML5 — the focus of this post — when performing web development work. Understandably, older browsers (even those that many people still use) do not support newer technologies, and accommodating older browsers should remain part of the strategy.

HTML5 is a new version of HTML that is continuing to gain more widespread adoption.  It offers web developers new opportunities, but older browsers — including IE 7 and 8 — don’t support it.  Further, since HTML5 is a evolving standard, browsers support different HTML5 features.  Even considering all of this, we have decided to develop features in HTML5 — even if we have to account for older browsers.  As web browsers and the Internet continue to evolve, using HTML5 is a must.

Another important reason why we’ve done this is to better conform to the rapid rise of mobile browsing. For instance, Apple’s iPad, iPhone, and iPod don’t support Flash, but they do support HTML5.

Here are three factors that we keep in mind when developing sites with HTML5.

Backwards Compatibility

So, if HTML5 isn’t supported by older browsers like IE 7 and 8, then how can we use HTML5?  Fortunately, there are workarounds for older browsers.  For instance, we have used javascript libraries like Modernizr to modify the HTML5 elements in older browsers so that they work.

There are times when such workarounds are not sufficient, and that is when it is important to develop an alternative version of a feature for older browsers.

Two Pronged Development

HTML5 uses elements like svg (scalable vector graphic) images well.  However, there are some known issues with such elements in some browsers.  For instance, in IE svg graphics don’t work well.  An example of an issue is when there’s a transparent overlay above the svg image  to add additional information to the image, the overlay prevents events that occur when one hovers over or clicks on a section on the svg.  Thus, when using a svg image for an interactive map, this would require a Flash version that is used in concert with browser detecting code set to display specific versions in specified browser versions.

Mobile Development using HTML5 and device specific apps

When it comes to mobile development, using HTML5 has its advantages.  For instance, by using HTLM5 developers can focus on one user experience versus variations between multiple versions of applications (one for iPads/iPods/iPhones, one for Droids, etc.).  For awhile Facebook decided to place major emphasis on the HTML5 browser version of its site so that it could more quickly update it across multiple mobile platforms. However, Mark Zuckerberg concedes that this approach has a significant negative side when he said, “I think the biggest mistake we made as a company is betting too much on HTML5 as opposed to native.”  That is because they did not write the HTML5 application in a way that was as efficient as it could be on mobile devices.

While Facebook still needs to focus on HTML5 since many people still access Facebook through their mobile browsers, it devoted “too much” attention to the HTML5 version of the site, and in hindsight Zuckerberg feels that Facebook did not devote as much attention to developing and improving its device specific apps as it should have. Recently, it has rectified that by releasing a new version of its app for Apple devices that has better performance.

It is important for organizations to make an assessment of their mobile strategy. How many resources should the mobile version of the site receive? If developing an app is deemed important, how much attention should that enjoy to ensure that the apps run smoothly? The answers to these questions will vary from case to case.