How to deal with browser compatibility with HTML5 and CSS3?

Question

Well, I've been reading about the new features of HTML5 and CSS3 since 2011, however, I still find myself a little preoccupied in using those features because of people using old browsers (or worse, old versions of I.E). The point is: there are lots of things that HTML5 and CSS3 make much easier than without it, however, I don't know how to deal with this issue, so I have been postponing the use of those technologies until today.

I know there are tools like Modernizr that allows us to detect whether some resource is available or not, but it seems that the work is them doubled and so I would be losing productivity. Since I would use the new features to simplify the development and gain time and quality, it would seem a little bit strange to do the work twice: once in a pleasant way, and another time in trying to fit browsers and so on. One example is the border-radius feature: while with some few lines of CSS we can make rounded corners, if we accept to do the alternative version it would require all that work with images and so on.

I mainly feel preoccupied because there are people out there using I.E 7 or I.E 8, or old versions of Firefox and all, and then when this people access some of my websites it's possible that he/she thinks "oh my god, this developer is terrible!", and so, if the person was likely to contact me to buy a website for the his company, or if the person was likely to buy a personal website, this will not happen, and it's just because of the version of the browser. Also, I get preoccupied with the websites of my customers, in the sense that since I'm selling them a marketing tool, it can bring bad results if the website doesn't look nice or functional just because of browser issues (if someone uses an old browser, it's likely that this person has no knowledge how it influences the websites).

So, how we should deal with this kind of situation today? Use new features from HTML5 and CSS3, verify the browser and alert the user to update it? Make two versions of each feature, one with HTML5 and CSS3 and an alternative one to support old browsers?

Answer 1

Unfortunately there is little you can do for the users that use older browsers, whether it be out of ignorance, inability to update (in the case of a corporate environment), or lack of money for newer computers/operating systems (IE 9 and 10 don't install in Windows XP, for example).

It is impractical to make a interactive website that is backward compatible with every possible web browser out there, so your best course of action is to look at what browsers have the most market share and target those browsers. I usually try to target anything with more than 10 to 14 percent market share, since anything below that is not going to be reaching very many people.

When looking at browser market share, I use something like StatCounter's Global Stats, since they have their tracking code on a number of high traffic websites and are a good base line for information.

Beyond that, basic compatibility between different browsers is to be expected. If you are really concerned with your clients opinions about how your websites appear to them, you might take the time to point out that you target browsers with a certain market share percentage and that if they are not in that target percentage, you cannot guarantee form or functionality.

Basically, you can make some of the people happy some of the time, but you can't make all of the people happy all of the time.