For 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:
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.
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:
These mobile statistics vary strongly based on region. Â For example, Opera is the most popular mobile browser for large parts of Africa & Asia:
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?
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.