What is Responsive Web Design (And Why Does it Suck)?

By Jef Rice on Sunday, August 04, 2013

What is Responsive Web Design (And Why Does it Suck)?
Responsive defines an approach to web design aimed at simplifying the design, development, and maintenance for a web developer. Responsive web design (or RWD) was 'invented' in 2010 by Ethan Marcotte. He unveiled it to the world in an article in A List Apart and it has since made him very famous -- well, web-famous.

There are 3 basic parts to a responsive website:
A fluid grid is a method to define your screen based on percentages rather than fixed pixel-based dimensions. It allows for the containers on the screen to grow as the screen size grows. Fluid or scaling images respond to the container they are in and scale accordingly. Finally, media queries allow you to control the visibility of content blocks on the screen based on the device you are using to view the content (desktop vs mobile). I have included links to Ethan's articles if you'd like in-depth information about each subject.

The main benefit of this approach is a single codebase for your website across a constantly growing number of device resolutions and form factors.

Results

So Ethan (and others) went about applying this approach to a big redesign they did for the Boston Globe. Once they were done they posted this autopsy, pointing to mixed results:

The Good
  • They ended up with an easier to manage website
  • They have a website (and framework) that is more future proof as you move forward
  • They’ve been able to reduce costs and complexity by keeping a unified team
The Bad
  • They had to employ a team of highly skilled visual designers and developers.
  • They took their whole site back down to the ground and rebuild it -- over 7 months.
  • The performance of the site is totally dependent on the bandwidth and processing capabilities of the site visitor's browser
Hold up. That last statement deserves some additional attention.

Responsive Design depends on media queries to hide and show content for different devices. You end up downloading all of the content to every device and then make the browser to decide what to show or hide using CSS. While this is great in theory, it is horribly irresponsible in practice. 

Images are scaled on the device
Imagine downloading 2550px wide images and then scaling them down to 320px on the iPhone. To put it in perspective, a 2,550x1,725, 1.66 MB image would take around 1 second to download at 10Mbps. It would take over 8 seconds to download over 1.5Mbps (T1 & maximum 3G speeds). It is faster on 4G -- which can be between 2-6 Mbps -- but it is still well over 2 seconds to download. That same image resized to 320 pixels could be as small as 14K and would download in well under a second on every major mobile network in the world.

All content is downloaded and then hidden
If you are using media queries to hide various content blocks on a mobile or tablet device, then you still pay the price for downloading the content and then use CSS to hide it.

Not all devices support media queries
For example, Internet Explorer before version 8 doesn't support media queries. No feature phones support media queries. In some countries you are mathematically eliminating up to 70% of your users from day one. Check this chart to see browser compatibility  [NOTE: the statistic claiming 87% of the world's traffic supports media queries is very wrong because it comes from StatCounter - a JavaScript-based tracking system. A small percentage of the world's phones support JavaScript tracking (see chart).]

So Responsive Web Design is a great concept, and it is even a great idea to strive for, but the implementation (like so many things in life) needs some work.


DevKit Templates

Find the website template you want in the Moboom Market