How many web browsers support responsive design?

Responsive designFor anyone investigating Responsive Design it’s natural to ask what percentage of web browsers support this design technique.  However, the real question you’re asking is “what percentage of web browsers support CSS3 media queries?”.  CSS3 media queries are the primary technology involved in responsive design.  If you’re simply looking for a quick answer, here it is:

Responsive design is supported by 70-80% of today’s web devices

However, the complete answer is a lot more nuanced than this.  The number above examines all web-related traffic.  However, responsive design is often used to target mobile devices.  Those statistics look a lot different.  Furthermore, there are techniques for addressing browsers & devices that do not support responsive design.

This post will examine the details missing from the generic statistic above.

What web browsers support CSS3 media queries?

CSS3 media queries are the primary technology powering responsive design.  These queries enable web designers to customize the website’s style for different form factors (desktop, smartphone, tablet, print, etc.). Consequently, quantifying web browser support of responsive design requires an examination of CSS3 media query support:

CSS3 Media Query support in modern web browsers [Image courtesy of caniuse.com]

The biggest red flag is Internet Explorer, which only recently began supporting CSS3 media queries with IE9.  IE9 is the current version of IE and previous versions still have significant marketshare.  In fact, as of this writing IE 8 maintains the largest marketshare (22.3%) for a single version of a web browser.

Marketshare for single versions of web browsers[Image courtesy of statcounter.com] 

If we add IE8 (22.3%), IE7 (3.96%) and IE6 (1.85%) then we quickly begin to climb towards the 20-30 non-supported percentage stated at the beginning of this post.  However, it’s worth noting that browser statistics vary per website.  For example, W3schools.com puts IE8 usage at 10.5%.  You’ll want to compare these general statistics with the statistics for your website.

How many mobile browsers support CSS3 media queries?

Many websites are using responsive design to target mobile devices (smartphones & tablets).  As shown above, IE8 is a cause for concern on desktop computers; however, IE usage on mobile devices is relatively insignificant:

Mobile browser marketshare

[Image courtesy of hitslink.com]

These mobile statistics vary strongly based on region.  For example, Opera is the most popular mobile browser for large parts of Africa & Asia:

Global web browser marketshare per country[Image courtesy of browserrank.com]

The good news is that CSS3 media queries are supported in all dominant mobile browsers (Android, iPhone, Opera, Blackberry, etc).

Chart of CSS3 Media Query support in Mobile Web Browsers[Image courtesy of quicksmode.org]

As a result, if you’re primarily using responsive design to “gracefully degrade” your default website design for tablets and smartphones then CSS3 media queries are widely supported (90%+ support).  However, as with desktop traffic you’ll want to compare these statistics with your own website.

Does it really matter if Responsive Design isn’t supported?

The stone age called and it wants its browser back

Web browsers simply ignore anything they do not understand.  This behavior creates the basis for backwards compatibility on the web.  In fact, it’s possible for a modern HTML5 web page to be usable with a text-only browser.

Consequently, your website can utilize CSS3 media queries to create a responsive design while still addressing browsers and devices that do not yet support this technique.  Doing this requires you to define a set of base layouts, styles & functionality that would be appropriate for older browsers & devices.  CSS3 media queries would then be layered on.  Older browsers would ignore these unrecognized attributes and newer browsers would become enhanced by them.  In both cases the web page remains usable.

This design philosophy is known as progressive enhancement and it’s worth studying. These techniques can be supported at different levels, but at their core they enable you to utilize responsive design while still addressing older clients.

Conclusion – go ahead and give it a try

Responsive design is already supported by the majority of web traffic  (70-80%).  For mobile devices, that support is even higher (90%+).  Furthermore, CSS3 media queries are simply ignored if they aren’t supported.  Consequently, it’s possible to create a web design that is enhanced when possible but degrades when necessary.  As a result, there is no reason not to start experimenting with responsive design techniques on your own website.

Update from Reddit:  There is a clever Javascript library called respond.js that can be used to emulate CSS3 media query support in IE6, IE7 and IE8.

More information about responsive design

  • http://www.linkworxseo.com/ Link Worx Seo

    Awesome information. Found you on Link-Assistant Facebook page. Responsive design is somewhat a new term to me, but still understand the concept and always have understood it. Just did not know that it was referred to as responsive design. Great new term I just learned here. I usually just associated with the word compatibility. 

    As for evidence that more browsers are now making the shift, for one your diagrams display it very nicely and two analytic shows the increase in numbers as well to back your information up. I recently have noticed more and more CSS styling that supports areas of porting for different devices. Have learned a few new tricks recently dealing with CSS3. 

    Although compatibility has always been an issue while designing, it most definitely has gotten much better in recent years. Yes, that includes strides in IE as well. Looking to nab a new book on advanced CSS, got any suggestions? Have not done the research yet for one. 

  • h

    rh