Responsive Web Design is Solid Gold

A few years ago I wrote an article entitled CSS Media Query for Mobile is Fool’s Gold. It garnered a lot of attention at the time, and I still see people reference it.

I’ve long wanted to write an update to that article, but never knew quite what to say until now. And because one inflammatory title deserves another, read on for why Responsive Web Design is Solid Gold.

Back in 2010 when I wrote the Fool’s Gold article, our default approach for mobile was to use device detection. If a site was simple and the budget small, we might use responsive web design.

Some time ago our default approach switched. We now treat responsive web design as the default approach and look out for reasons why it won’t work instead of the other way around.

Why did our default approach change? Two reasons: performance and device diversity.

Much of my Fool’s Gold article focuses on performance problems with flexible images and CSS background images. One of the reasons why I’ve had trouble figuring out how to write a follow up is because the performance issues that I raised remain true today.

Let’s do a quick round up of the issues and updates on each:

• Full Images = Unnecessarily Large Files to Download — Still true.
  This is why we’re working on responsive images solutions which I’ve written a lot about.
• Browser Resizing Can Be CPU and Memory Intensive — A stretch.
  I’m not saying that there isn’t an impact to having the browser resize images. There definitely is especially if you’ve got an image that is several times larger than it needs to be based on the page layout. But in retrospect, this argument was a bit of FUD.

• IMGs hidden with display:none still download — Still true.

• Background images hidden with display:none may still download — Still true.
  My original tests found two techniques that worked: media queries that don’t overlap and display:none on the parent element. Tim Kadlec did more extensive testing last year and found similar results.

• CSS media queries do not optimize HTML or Javascript — Still true
  Simply putting display:none on portions of the HTML document or JavaScript code doesn’t prevent it from downloading and executing.

• CSS Media Queries aren’t supported well — No longer true
  Most browsers support media queries now and if you build your responsive site properly (more on this later), it is never an issue regardless.

Perhaps most importantly, most responsive web sites are still far too large on small screens.

So if most of these remain true and most responsive designs are bloated, why has my perspective changed?

Because it is possible to build responsive design responsibly and create fast experiences. The keys to doing so are:

1. Build mobile first responsive designs
2. Keep CSS background images in scoped media queries
3. Conditionally load JavaScript and even HTML fragments based on screen size and capabilities
4. Implement a responsive images solution
5. Handle retina images very carefully and err on the side of performance

If you do these things and do the normal things you should do to make any web page fast, you will have a fast responsive design. It may not be easy, but it is possible.

But what about the fact that most responsive designs are bloated? As Tim Kadlec says, “blame the implementation, not the technique“.

I don’t blame device detection for the many sites that route people to the mobile home page instead of the article they’re looking for. And I don’t blame responsive web design for the fact that most implementations are bloated.

Probably not. But the web is a balancing act between many competing interests. A site that was completely tailored for search engine optimization would be unreadable by humans.

By the same token, performance is an extremely important factor, but is still just one of many factors that make a site successful. You can build responsive designs that are fast enough that the benefits of responsive design outweigh the potential performance improvements you might get from separate sites.

Especially when you consider device diversity.

Let’s assume for a moment that responsive design doesn’t work for your project. So you decide that you’re going to need to build mobile, tablet and desktop experiences. And let’s set aside for the moment the inevitability of new form factors like televisions, watches, etc.

Even in this scenario with different experiences for each of the three major form factors, you’re still going to end up needing responsive design—or at least responsive characteristics.

Yesterday, Samsung announced that it was launching a 6.3 inch phone. The range of screen sizes on mobile phones alone will likely force you to build something that will adjust from the small screen sizes of Blackberry Bolds and feature phones to the mammoth screens of some Samsung devices.

Tablets present a similar challenge ranging from 7 to 13 inch displays (and sometimes much bigger). And we’re all familiar with the large difference between ultrabook screens and cinema displays.

I wrote in much more detail about the impact of device diversity earlier this year and my conclusion that:

Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone.

So regardless of what techniques you use in addition to it, responsive web design will likely be part of your solution.

One of the other points I made in the Fool’s Gold article was related to mobile context. It is something I’ve struggled with for years.

I’m now firmly on the side that there is no mobile context. We have abundant data that shows that people use their mobile devices indoors and for a wide variety of things.

Luke captured it well when he wrote:

But if there’s one thing I’ve learned in observing people on their mobile devices, it’s that they’ll do anything on mobile if they have the need. Write long emails? Check. Manage complex sets of information? Check. And the list goes on. If people want to do it, they’ll do it on mobile -especially when it’s their only or most convenient option.

Amen.

So Jeremy Keith and Stephen Hay were right. There is no mobile web. Mea culpa.

I concluded my Fool’s Gold article by stating the obvious: there are no silver bullets when it comes to adapting our existing apps and sites for mobile screens. At that point in time, people were touting media queries as a quick fix for mobile.

Since then, our profession has learned a lot more about the complexity of designing and building experiences for multiple devices. Now it is generally understood that supporting all the devices that may access our content and services isn’t easy, but that tackling problems that range from responsive images to legacy content management systems are the heavy-lifting that we must do in order to be future friendly.

And despite those challenges, I’m excited about where the web is heading and what we can do with progressive enhancement and responsive web design.

Responsive web design: it’s solid gold, baby. 🙂