The Overblown Excitement Around Modern Web Browsers

Apr 19 2011 by Jason Gross | 41 Comments

The Overblown Excitement Around Modern Web Browsers

In the past few months, there has been a lot of talk around modern web browsers (Firefox 4, Chrome, IE9, etc.). The software application we use to navigate to our favorite websites is seeing tremendous attention, increased competition amongst its vendors, and advancements in its features.

Designers are understandably excited about these so-called modern browsers because they support HTML5 and CSS3 and have enhanced performance that can render complex graphics animation and processing-intensive scripting. At the same time, we’re seeing a big push to move users off older versions of browsers like IE6. All great stuff.

While Internet Explorer still holds a majority of the market, Firefox and Chrome, for instance, have been gaining a lot of ground. For web designers, this means we can take advantage of the new features today.

While this is all exciting for the design and development community, I can’t help but wonder how much it all really matters.

Does it really matter to the average user and to the typical client that the animated hover states of buttons or dropdown menus are now using CSS instead of JavaScript (or Flash) because of CSS3 transitions? Would they even know the difference between a Flash object versus something that’s made using JavaScript, CSS3, and HTML5?

In the eyes of the site user and the site owner, the real value of a website will remain the same. It’s still all about the content. Users visit websites in order to gain information, socialize with other users, or to complete a specific task. As long as they can accomplish their goal, they will be happy. That’s all that matters.

Focus on What Matters to Users

While it’s now an accepted reality that any given website can look differently depending on what browser you use, it’s not acceptable that a website requires its users to use a modern, future-standards-compliant web browser. A web designer should never have to include a disclaimer with their website saying that it’s a better site when experienced in Chrome or Firefox or Safari or IE9.

The information a website displays or the task it allows its users to complete must be accessible in all platforms and in as many scenarios as possible.

Never make browser choice a hindrance to access and the user experience.

Along the same lines, a website’s interactive features (such as its navigation menu) must remain functional across all platforms and interfaces. All of the cool new features in the world won’t save you from a web design with poor functionality. A website with poor UI design is just as broken as a site that doesn’t work well in IE5.5.

The Modern Browser

There’s no arguing that modern browsers boasting wide support for the newest features in HTML5, JavaScript, and CSS3 put more power in the hands of designers and developers. They allow us to craft better and high-performing user interfaces and innovative designs.

The ability to design a website just for one environment is the utopian scenario; it’ll make things so much easier. Unfortunately, this is hardly ever a realistic scenario for most of us.

The truth of the matter is that we’ll always be required to design and debug for the weakest browser. Sometimes this means putting an ideal solution to a problem on hold in favor of one that’s supported by all browsers. Other times we choose to force weaker browsers into compliance with hacks, script, and overrides. Both courses of action are taken in order to achieve the same goal: to make sure that the core content and functionality of the website remains the same for everyone, regardless of the browser they choose to use.

This may make it seem like users on old systems are holding us back and preventing the web from evolving. This unavoidable situation certainly doesn’t help move things along. However, it doesn’t leave us at a complete loss for taking advantage of what modern browsers have to offer.

What Users Don’t Know Can’t Hurt Them

While we shouldn’t punish users for having an old, outdated browser, we can certainly reward those who choose to use a more feature-rich browser. How can designers use modern methods to build a beautiful site that boasts rich interaction on modern browsers, without neglecting those who still use outdated browsers?

Let’s talk about this through a pragmatic example. The CSS3 border-radius property provides a great example of a way to achieve what was once a painstaking task with a simple line of CSS.

But older versions of Internet Explorer don’t support this feature. That good news is that they simply don’t render rounded corners — they ignore the rule — and fall back to right-angled corners. It’s harmless and doesn’t affect the user experience of people who use browsers that don’t have support for this new CSS property.

If used consistently throughout the site, IE users will never notice their corners are any different; and they probably don’t care either way.

This kind of design methodology can be used for many situations. The core concept is that the new techniques and site features aren’t barriers to those that choose to use older browsers.

The Reality

In reality, web designers will always need to take into consideration how their site renders on the weakest browser. And right now, the weakest browser also happens to be a pretty popular one. While Firefox, Safari, Opera, IE9 and Chrome are gaining momentum, it really doesn’t matter if the number of IE7-IE8 users are still significant enough to merit our concern. Even though better browsers have surpassed IE6 in market share, we can’t ignore the weakest possible scenario until its usage significantly drops off.

Even if IE9 provides designers with a huge improvement over what’s available in IE8 and below, we still need to wait for the older versions to be phased out. The complete adoption of CSS3 and HTML5 is not something that’s going to happen over the course of a single year.

The Good News

Web designers are in a unique professional position in that we have the ability to drive our own future forward at a faster pace by holding web browsers accountable and by promoting the use of better browsers.

The continual improvement of web browsers is wonderful, but it will never hold the true key to our success. What will always drive the achievements of a web designer is their ability to use their skills and experience to present a message and a great experience to the user.

Much like different brands of TVs vary in size, quality, resolution, and features, web browsers, too, have differences between them. However, what really matters and what deserves our attention is what’s playing on the channels, not the box that presents them.

Do you test your designs to ensure that the core functionality of your sites remains the same across all browsers? Are you taking advantage of what CSS3 and HTML5 have to offer yet?

Related Content

About the Author

Jason Gross is a freelance web designer focused on creating clean and user friendly websites. Jason currently lives in Indiana and can be found on Twitter as @JasonAGross or on the web at his personal blog and portfolio.

41 Comments

Tony Bishop

April 19th, 2011

Please do not try an tell me the browser stats shown above represent real shares – you really must provide data source.

ehhwhat.co.uk

April 19th, 2011

I wrote a similar piece (http://www.ehhwhat.co.uk/blog/?p=116) a few months back about the need for CSS3 to work across all browsers, i dont believe it needs to.

Good read

Anon

April 19th, 2011

Where did you get your “Browser Statistics Month by Month” from? Geez, site your sources and give credit where credit is due.

Also, the stats totally contradict a statement you make early in the article: “Internet Explorer still holds a majority of the market”. A quarter isn’t a majority.

dejoe

April 19th, 2011

I feel you overlooked two important points here:
1) Performance – Though you just mentioned high-performance. But it is more than that. High performance counts. If the pages load within few seconds, it has a huge positive benefits on the users. Modern browsers load them faster. Performance is a huge reason why people are pushing for modern browsers. And a huge area where they compete.

2) The impact on designers. If more and more people have powerful browsers, then designers, and developers can spend less time on the obvious, and concentrate on interaction. For example the border-radius means that developers could concentrate on interaction, than spend time cutting corners and hacking divs and css and js.

So a website is not just about content, it has so many things around it. As a matter of fact if it had all been about content, then netscape navigators would have been sufficient.

Michael Gunner

April 19th, 2011

I agree that there is a correct and an incorrect method of employing new design techniques. For example, on a site I have designed, I have used CSS gradients, but with a fallback. The fallback ensures that anyone using an older browser still gets the same functionality and essentially won’t notice the difference.

I find web developers that strictly only code websites that work in the very latest browsers incredibly arrogant and out of touch.

Whilst we shouldn’t have to bog our sites down to look great in IE6 but break apart in Chrome, there’s nothing to say that with a bit of effort on our part we can’t code and design websites to degrade gracefully. Those who don’t are in my mind simply lazy.

This especially applies to web design, there is simply no reason whatsoever a site cannot look half decent in all browsers.

Federico

April 19th, 2011

Yeah but could you imagine a world where everyone used Chrome (or any auto-upgrading browser)? If the WebKit team came up with something game-changing, we could use it within a month. If you think about it, it would be more or less like with Flash: AS4 is out, use it tomorrow and in two days everyone’s browser will already support it. IE (and slow browsers) are holding back the web, and that’s why we’re so excited when something new comes out.

You can say “content is king” but when you’re building a serious web app, you need speed and reliability.

marcvangend

April 19th, 2011

I agree that we should never punish users, but instead reward those with modern browsers, but that leaves one question to be answered: How do we inform users with older browsers about the reward that is waiting for them, hidden in HTML5 and CSS3? We cannot assume that using an older browser is always a deliberate choice, some people simply don’t know that there is a choice to be made.

Would you consider it punishment if I tell a user about the reward that modern browsers offer? I think it must be possible to inform the user in a non-obtrusive way – does anyone know of good examples?

Adam

April 19th, 2011

To you who have no idea where those stats come from, you need to expand your reading more. They are perfectly reasonable stats from an audience who is concerned with nothing but web standards – i.e. W3Schools – http://www.w3schools.com/browsers/browsers_stats.asp

I recognized them instantly.

Jim

April 19th, 2011

It goes without saying that a user’s browser shouldn’t *need* CSS3′s bells and whistles to display the essentials of a website. But supporting users on IE6-7 is an exercise in futility, especially in more complex web apps.

The time spent hacking together CSS and JS to give adequate functionality to users who refuse to update their browser simply is not worth the effort. It’s perfectly acceptable (and preferable) to simply point the user to a browser update or lock them out of your app. By doing this, not only are you doing the user a favor, but you are also progressing the web as a whole.

cancel bubble

April 19th, 2011

Sorry, can’t take you seriously when you use browser stats that are obviously catered to the web dev world.

I work for a HUGE health care org and we have many sites that attract a lot of visitors – the general public, mind you. I just checked the stats on one of the big sites for one week:

* 4/4/2011 – 4/10/2011
* Nearly 3.5 million hits
* 2 million of those are IE
* 1/2 of the IEs are IE8
* Nearly 300k of those 2 million IE hits are IE6

These stats are filtered for all external visitors – the general public. This is in the US as well.

http://i.imgur.com/EyfqK.jpg

TheAL

April 19th, 2011

“A web designer should never have to include a disclaimer with their website saying that it’s a better site when experienced in Chrome or Firefox or Safari or IE9.” I agree. Though, doesn’t this kinda clash with how everyone is trying to rush into HTML5 and CSS? There is degradation, yes, but it’s still a way of saying people are missing out without the latest and greatest. It’s also more work for the developer to basically make two sites in one, often times wrapping html5 in xhtml and using tons of javascript to fill the gaps.

Stomme poes

April 19th, 2011

Amen. And we already hear the “but we need fancy flashy bloated modern design NOW” from designers. Or their clients (who like things to look all dancing and singing but have no clue what their visitors want because user testing “is too expensive”).

That we need a modern browser just to not spend a day downloading a page that we want just to get an insurance quote or check if an online shop has that book we want or to listen to a video clip or to find someone to walk our dog… I just don’t get this. More and more people switch to the mobile version of Facebook and other sites, not because they’re on a mobile but because the “desktop” versions are getting so filled with garbage and multiple calls to several other servers just to add widgets and advertisements and flashing thingiemajiggies…
or they’re using Readability and similar plugins. Why are those so popular? Aha.

Seriously this is why I *need* to surf with NoScript… to stop all the unnecessary loading of crap that serve only two purposes: to make the design look pretty and to slow me down in my task(s) as a visitor. Obviously sites who are dayjobbing as “apps” need to be bigger and run lots of scripts, but that’s NOT the majority of web sites. And won’t be for a long time.

Frankly, someone adds one of those obnoxious “Best viewed in Browser X” badges on a site that ISN’T a New-CSS-Techniques demo/experiment, and I just leave. I likely already have that Browser X, but only because I’m a web developer and I have them all. My mother-in-law doesn’t, and she won’t think your site is promising so much AWESOMENESS that she’ll go spend time downloading a piece of software just to read the text on it.

Seriously, the 90′s called and want their Best View In… badges back.

Benjamin T. Watson

April 19th, 2011

The above browser stats are from the below site. As several of you have already guessed these stats are a little off in the fact that this is only a Technology site. People come to w3schools to learn technology and for that reason the stats are of a larger technology and developer base and not of the general population.

http://www.w3schools.com/browsers/browsers_stats.asp

Akhtar

April 19th, 2011

video and audio tags in html5 is just amazing.

we should move bit further and have facility to build video directly from webcam and store it on server using html5 + browser. . it means no more flash anymore.

Thorne

April 19th, 2011

It has more to do with usability than anything. Will anyone notice the different on the front end? In most cases no, but what will happen?

They will have websites that load more quickly with modern browsers, not because of being a more efficient browser, but because of allowing programmers to use more efficient techniques, which will be a most noticeable difference to wifi users these days.

Other than that, it comes down to usability. Most people never really notice the huge improvements to usability, things just become easier to them. Though they don’t notice, though the customer doesn’t even know the difference, they will see the different in how people interact with their website.

That is my opinion on why I support modern practice and technology for the most part.

Michael Tuck

April 19th, 2011

‘Modern’ browsers (often Webkit-based such as Safari) are great playgrounds for designers to try new and fun variants. For just one example, Chris Coyier on CSS Tricks loves to put up demos of this and that effect that work only in a Webkit browser, or sometimes a Gecko browser, etc. These are the Web design/development equivalents of those car shows where you get to see, and sometimes even test-drive, those futuristic cars that look like something from The Jetsons. However, just as real-world automobile designers must design cars that work on today’s roads in today’s world, we have to design real-world sites that work in older, less modern browsers. Sometimes the futuristic stuff becomes more mainstream, and then we’d be remiss not to make them part of our design arsenal. But for right now, most of these effects are not good candidates for inclusion in real-world designs. (Certainly there are caveats and exceptions to this, and when they do become available, I’m like the rest of the pack — hot to try ‘em!)

Leon

April 19th, 2011

Couldn’t agree more. People used to have kittens whenever banks insisted we use IE, so what’s the difference in making them use FF, webkit et al?

The degree to which your site doesn’t bork in IE depends on the audience, of course.

Conor Darcy

April 19th, 2011

I think you should design first & formost for the majority of your audience. As a web designer in Ireland 41% of web users (according to Statcounter http://gs.statcounter.com/#browser_version-IE-monthly-201104-201104-bar) are using either IE6, IE7, or IE8. Therefore 59% are probably on a ‘modern browser’ give or take a few percent.

I’m going to design for modern browsers but will take care to ensure that the sites degrade gracefully & the content remains fairly presentable. I have no problem giving some users a better experience than others. I dont see why users of modern browsers should get less of an experience to cater for IE 6,7 or 8 users.

Jason Gross

April 19th, 2011

@cancel button – I feel like your comment amount the high number of IE visitors you (and everyone else in health care) have stands to further solidify the point of the article.

Obviously the w3schools statistics are skewed towards the design and development community but a 20%+ share of the market for IE among this group is obviously still very significant. No single set of browser statistics is fully representative of the entire internet that we must design and develop for which is part of the core reason why I am making the argument that new and shiny browsers just don’t merit all of the pomp and circumstance that they have been getting.

@marcvangend – My opinion on advising users to upgrade their browser tends to lean towards something designers shouldn’t be doing. Even if it is accomplished in a noninvasive manner we still really have no business telling people what browser they should prefer.

Whether designers should have the role of encouraging browser upgrades or not is an interesting debate in my opinion and perhaps a topic for a later post =)

Big Buddy

April 19th, 2011

Thank you thank you thank you for this article. I am so tired of hearing about CSS3 and HTML5. You know how many lines of CSS3 code and HTML5 code I’ve written in the past year? Zero! Because it is basically just for having fun and doing cool new tricks (for the most part). You are right when you say it is all about “what’s playing on the channels, not the box that presents them.”

Great article…

whiteInk

April 19th, 2011

I made the switch to using html5 full time about six months ago. Of course I test in every major browser and implement fall backs when I think they’re needed. Not doing this is poor web design imo.
Do I tell users they should use a modern browser? Certainly not, though if they are using something like ie7 or ie6 I do tell them their page may not display correctly if javascript is disabled.
Also though, your audience is a huge factor on whether or not this is important. If I’m doing a website for a shop that sells clothes aimed at teens and twenty-somethings, how important is IE7 compatibility? When a nice chunk of traffic is coming from smart phones, not very. And how important is reducing the amount of javascript I load on a page through using hml5/css3 for smart phone users? Very important.

Gonzo the Great

April 19th, 2011

Hi Jason,

I really enjoyed reading your vision and I think you’re 200% right! Especially the ‘Focus on What Matters to Users’, .. just excellent (unless you’re making a client’s site for yourself?)!

The reader or client is not interested how you cook and which ingredients (CSS3) you use. The end result, his plate with gorgeous looking and nice-smelling food is what the client wants to see!

They really don’t give a sh*t if you use CSS-transitions, Javascript or even Flash! They just want to see the result, the stats, etc. and that must look good – preferably in every browser!

Thanks for sharing your vision, respect that! Cheers & Ciao ..

Anon (not really)

April 19th, 2011

@Adam,
I know exactly where the stats came from. You completely missed the point. The author used someone else’s work, and didn’t credit them. That is -normally- frowned upon in this industry. Even worse though… his entire argument relies on those stats, yet someone who isn’t “in the know” wouldn’t know if they were credible… so the entire article becomes garbage.

To top it off, he hasn’t change the glaring mistake I pointed out… in the beginning of the article, he says that “Internet Explorer still holds a majority of the market”. Then he shows a screenshot from w3fools that shows IE has 26% browser share.

Lame, sixrevisions, lame.

Web Developer

April 19th, 2011

I think that if users are still in the IE6 mode they are either not interested in the experience, they are using dated computers, or they are ignorant. Let them stay there, when they see the advantages of moving to a better experience they will. Until then, I think we should be backwards compatible until the time does not justify the cost. When is that?? I think the developer can decide that. Thanks for the post.

Andy

April 19th, 2011

This should be required reading for everyone that wants a web site built from this point forward. All clients, managers, marketing departments, designers, coders, freelancers, and every one in between.

Jatin

April 19th, 2011

This article saved my life (seriously). I was trying to convince my client that if we are trying to make hacks for each and every browser available in face of the earth, then development time would take long.

In short, a great article, worth reading and sharing.

Christian Krammer

April 20th, 2011

You really have a point there. More and more I am convinced that the only way to go is by starting with a minimal, the lowest common denominator, that every website can see, no matter if it supports CSS3 or media queries. And then make versions for the bigger screens using media queries. But unfortunately ther is a catch to it as I have discovered recently. What about browsers apart form IE that don’t support HTML5 like the PS3 web browser? If you look at a website that makes some use of HTML5 it’s a mess there? I think that’s a real problem.

Gustaf

April 20th, 2011

Just as some other people above have pointed out, beeing able to use modern standards saves developing time. Time that could and should be spent focusing on content and functionality.

If I can get rounded corners in 1 minute instead of 30 minutes, that is good both for me, the client and the visitor since more time and money could be spent on the importaint stuff -content-. Everybody wins

Vitaly Friedman

April 20th, 2011

While I very much agree with the premise of the article, I am not quite sure I agree with its ultimate statement. Indeed, our websites should be working on our clients’ browsers, and of course they should be working well. But we can also provide users with better browser with a better user experience. I would argue that users do know the difference between certain paradigms of web browsing. They will know the difference between a Flash-based text, a sIFR headline and a @font-face-copy, perhaps when they decide to copy the text to their Notepad. They will notice the difference between flickery hover transitions in JavaScript and seamless transitions with CSS sprites.

Asking the users to upgrade to use the website is wrong and we should avoid at all costs. Yet I believe that we should do our best to design the website the best we can in the best browsers out there and then accomodate for other browsers as well.

Irina Shishkina

April 20th, 2011

I use CSS3, then hack around for browsers that don’t support it. If an effect is impossible to simulate using alternate CSS etc, I try to make sure the site doesn’t break in other browsers, even if it looks a bit different. I believe that web designers should definitely use CSS3 and HTML5. The more people stop supporting IE6, the sooner it will go away.

Theo

April 20th, 2011

I like to belive that http://gs.statcounter.com/ are near to the real stats.

Jason Gross

April 20th, 2011

@Vitaly – I like your point about users noticing a difference between flash-based, sIFR, and @font-face text solutions because of what they can do with them. I do think this particular comparison still falls in line with the article because I wouldn’t consider flash to be an acceptable solution for a cross-browser, multi-device site anymore. However, your point is still right on line.

Animal

April 20th, 2011

excuse my clamsiness.. I just was thinking what the use of a browser.. which is “translate code into visual”, or I think it is like that, I am not a genious :), so, coders are really lucky.., or unlucky :)

all the best!

jana brubaker

April 20th, 2011

For me, your infographic is less problematic for its information contradicting your text or for not citing your source (although these criticisms are interesting too), but that it is so visually unappealing. Bold AND underlined typography? Really? Color choices? Borders around table cells? And you call yourself a “designer”?

Daran

April 21st, 2011

Content is important but for a client it’s not “all about content” for them, it’s all about measurable results and user tracking metrics and newer technologies are making this process easier and accessible.

David Ball

April 21st, 2011

Showing the W3C browser statistics isn’t representative of all users. It would be really interesting to get statistics from the most popular websites in the world, websites that so many different types of people use like google.com or facebook.com

Bratu Sebastian

April 24th, 2011

And yet, we can hope that in 4 or 5 years IE6 will be just a relic. And we will probably think about CSS4.0 or something else. Or, who knows, maybe we’ll have a new markup language :)

CiNiTriQs

May 1st, 2011

Whatever one thinks, the browsers WILL one day keep up with the designer community itself, there aren’t many browser developpers that will go out and say: fuck html5 and css3, I like square corners, no transitions and i will certainly not like being able to see transparant colours (rgba). I mean, they all want their browser to be used the most, now that IE’s empire is slowly crumbling down they have no choice but to give users a better internet experience by helping the developpers community using the tools that are ready for other browsers… ah well, to each his/her own I guess, in the end, we’ll all have to weigh the pro’s and the cons concerning the user experience cross browser wise…

Daquan Wright

May 2nd, 2011

My principle is that an application should be “usable” across the board, but the bells and whistles are saved for browsers that a work implementing them in. Of course you need to take your audience into the equation, but there’s no point in going all out in IE6 (especially if the client’s budget is tight).

Rob Davis

May 4th, 2011

I wholeheartedly agree. Well said!

Adrusi

May 9th, 2011

I strongly disagree, there are plenty of environments that ie isnt a problem in. Chrome apps, mobile sites… For personal projects you can always choose to depend on it.

Leave a Comment

Subscribe to the comments on this article.