As much as we would like to turn a blind eye to the large number people using Internet Explorer and thus take advantage of CSS3 and HTML5 in all its glory, with certain projects, we really don’t have much of a choice.
If the traffic in a particular niche is IE-heavy, then you have to deal with that accordingly. If you go the Andy Clarke route then you may choose to use those new enhancements to the full, but allow a degraded experience in IE.
If you go the traditional corporate route, then you do everything you can to get IE to look and behave the same as the other browsers. That could mean ignoring a lot of new CSS3 and HTML5 stuff, or else it means filling in the gaps with scripts, hacks, and IE-only filters.
What’s the Effect of a Degraded Experience?
If you choose to let IE be degraded, then you risk having anywhere from 40-70% of your users view your product in a degraded experience. I’m not a branding expert, but I know the importance of maintaining a consistent experience for all visitors.
It’s no wonder that some big brands are choosing to give IE a similar experience using filters and whatnot. For them, it seems, their brand is more important than any performance drawbacks that may result from using extra scripts and IE-only filters.
Of course, you could choose to fool your visitors into thinking they’re viewing the official branded experience, even though it has some major differences. But that’s assuming you’re okay with the degraded experience. After all, by creating a more enhanced visual brand for certain browsers, aren’t you basically admitting that the IE users are not seeing your product at its full potential?
What’s More Important?
I would love to hear what everyone thinks. Assuming a website’s audience is 40-60% IE users, what would you prefer? A slower website that maintains a consistent branded experience across all browsers? Or a progressively enhanced site that degrades significantly for IE users, but loads faster and uses extra stuff for modern browsers?
I think it depends on what you define as branding. It typically does not cover the entire style of a website. I would definitely make sure that elements that define a brand, such as logo, type, etc work across the board, and the color scheme has to be identical as well.
However, imagine a news box on such a site, with a red title bar. It’s red because that’s the brand color. In modern browsers it looks rounded, in IE square. In both cases the brand is consistent. There is no real lack of branding nor is the experience notably degraded. The same is true for using a placeholder attribute for fields. It is not part of branding, just a little gimmick to lift the experience.
In other words, I don’t think it’s an all-or-nothing choice, unless the client insists it is.
I completely agree with Ferdy, I don’t think rounded corners, a drop shadow here and there, or a slight gradient really have to do with the branding of the site. Is it eye-candy? Yes, but people lived with square boxes long before rounded ones, and if they’re using an older browser then they can continue with such boxes.
I think one thing that needs to be taken into consideration in all these HTML5/CSS3 browser discrepancy stories is that if someone is still using IE 6-8, will they really care about rounded corners, drop shadows, and gradients? It seems like they’d care much more about the actual functionality and message of the site because if they really wanted pretty visuals they would update their browser. I could be completely off-base, but when I do projects that’s how I view it, if people want to see it look nice then they should probably upgrade. Of course if I use HTML5 or CSS3 for structure or the like (i.e last-child, etc.) then I’ll put a hack or fix in for IE. Other than that I won’t go out of my way just so users with older browsers can have rounded corners.
> their brand is more important than any performance drawbacks
But surely performance drawbacks also harm the “brand”? Whatever part of the site you call your brand, whether it just be a logo or a specific experience, it’s vital that as many users as possible can see it.
So if you have 70% IE traffic (which I seriously doubt any site has close to these days) those users should not have to tolerate a performance drop compared to other users. If that means using an image instead of CSS or simplifying the site down, then so be it.
> those users should not have to tolerate a performance drop compared to other users
In theory wouldn’t they receive a performance drop because images are being used instead of CSS? Depending on how many images you need, the loading time could increase as a result. I don’t think it’s so much of a performance drop as a visual drop, but depending on circumstances and the site’s percentage of IE product, it’s a trade-off that needs to be evaluated.
I view branding as how something makes me feel. As long as those feelings are equal for users in IE as compared to users in a good browser, I think you’ll be alright. A slower load time in IE will be much more of a degraded experience for the user than missing out on some progressive enhancements. Your branding is directly tied with your website performance.
I’m curious if you have some other examples of progressive enhancements that when a user is in IE and those enhancements are lost, degrade the experience for them.
An example of some not so graceful degradation would be using CSS3 selections like :nth-child or :last-child for structure and not having a jQuery or Javascript hack for them. The website will completely break for people using IE 6-8 then.
Other things degrade more gracefully though, forms are a good example. HTML5 adds quite a few more options for forms, and if an older browser is used the input fields with newer types specified, such as email, it will just be a simply text field. I believe form validation and required fields also degrade nicely, but I’m not 100% sure.
It’s not that simple.
It depends largely on your target audience. Loads of visitors, expected to own low level hardware props, would make a site targeting the newest web tech a fools gold, no matter the brand.
I’m also questioning whether a successful brand means convoluted and heavy websites. In general, simplicity means elegant. Throwing at browsers all you have only makes for a busy experience, that’s all. The new Yahoo! Mail beta comes to mind.
It’s trendy we’re talking about here, not brand, I say. And, the way I see it, I may hurt my brand if I don’t carefully measure how many drops of the new web tech I pour in when modernizing my online presence.
To summarize, in general, I’m for a moderate amount of the new web tech, enough to wow the visitors without making it obvious I can’t stop touching new things, and a gracefully degraded experience where the new web tech can’t yet fawn. Equilibrium.
I don’t think IE users missing out on rounded corners and a drop shadows really affects a brand at all.
The reality is that 99% of the time content is the main attraction, as long as it all works fine and looks fairly similar having a few drop shadows and rounded corners missing won’t make much difference at all to the majority of users in my experience. After all, they won’t know what they’re missing so to them it will be the definitive version of the site.
I would prefer a progressively enhanced site that degrades significantly for IE users, but good luck convincing a client of that. Clients still don’t understand the web.
I think that everybody never need rounded corners, or gradients or box and text shadow.
So it’s not a problem if ie users don’t see those things.
I agree. I don’t think its a problem because most of the IE users can’t see any rounded corners or text shadows. They can’t complain about something they don’t even know to exist.
Q: A slower website that maintains a consistent branded experience across all browsers?
No. Slow means loosing potential clients, recommendations, contacts. It is out of the question.
Q: A progressively enhanced site that degrades significantly for IE users, but loads faster and uses extra stuff for modern browsers?
How about a site that works and feels the same (90%+) for all browsers, including IE (from 7 onwards)
I don’t define branding as just something people see. To me, it’s much more about the perception gained from words. The look and feel, while part of the brand, is there purely in a “support” role.
I would never agree to a slower website that maintains exactly the same look across all browsers, stupid ones included. If we’re going to get pedantic, websites can’t look the same in every browser, and trying to get them to do just that is a waste of time and money.
Well said.
I think it’s the best for everybody that we use what it’s available to give all users the best experience they can get in their browsers. Branding doesn’t have to suffer from this.
So you decide to make the coolest website in the world, every image has a 100dpi resolution, it has rounded corners, a slider with 100dpi images, so what?
You have the best website ever, but will someone be pacient to wait until it loads, once it has more than 1mb of size?
Yes, brand is not everything.
Great post , thank you your blog
I believe the content is more important than appearance.
Furthermore, if our branding / message is supposed to be presented through visual effect,it is very obvious for me to consider — as Louis Lazaris has pointed out — the “importance of maintaining a consistent experience for all visitors”.
What is the point of creating an amazing design that can be visible to just 30-40% of your target audience?!
I do have still problem with humble CSS2 rules in order make my markups compatible in different versions of IE. I mean IE7 and the newer versions.
So I am not that much fancy about using eye-catching techniques of CSS3 and HTML5,
until then it cab be viewed by at least 60% of the visitors.
I don’t really think it matters at all, as long as they can see the content or whatever you have on your site.
Great post , thank you your blog