There IS no mobile web: Making Web Designs More Responsive

The web changes so quickly that writing an in-depth post about a particular subject in that area almost has to be precognitive. In other words, no matter how much you research the matter at hand, in the time it takes you to write it and get it posted, there could already be new information and insights on it that could make it irrelevant. Or somebody might have posted a blog entry explaining why it’s total crap like it was the Emperor’s new clothes and the blog entry’s link has already been retweeted five thousand and one times.

Hyperbole aside, or maybe not, I have a feeling that this could prove to be the case with one of the newest buzz terms of the web design world: Responsive Design.

Almost a year ago (which is like 25 in web years) bespeckled web guy, and that That Guy We See at Those Conferences A Lot, Ethan Marcotte, coined the term. Its exact meaning is almost as difficult to pin down as the one for “Web 2.0” or, more accurately, like that dream you were having right before you woke up this morning. However, Ethan, who is still the provisional owner of the term, says it involves three core principles: a flexible grid-based layout, making images flexible that are not incorporated into the design, and an extra layer of self-correction in the form of media queries that has the design respond to the device it is being used in. Let’s break it down. First of all we’ve all heard of grids and most of us have used at least a simple grid in the past for our web design. Those can be more flexible using percentages for widths instead of pixels so that no matter what device you’re browsing on everything is relative. Images aren’t usually so flexible so what we have to do with images that are placed directly in the markup (as opposed to background images set in the CSS) is apply one simple line of CSS to them to make them relative, too: max-width: 100%. And then in a final layer of control and tweaking we can use media queries to make certain the page behaves exactly as we want them to depending upon what resolution it’s being viewed on. An example of a media query for portrait view on an iPhone: @media screen and (min-width: 320px). That and other media queries will make the webpage even more responsive to the device it’s on, whether it’s a PC, tablet, phone, or video game console. Yes, video game consoles. You didn’t forget about those did you?

Responsive web design is very closely associated with the discussion of the mobile revolution of the web, designing for the mobile experience, and the related and belying concept of “there is no mobile web!” This is because those of us in the web design world are scrambling to come to terms with the fact that users are moving from the laptop, desktop web to the mobile web faster than a mistakenly replied-to-all email spreads around the office and then the internet at large. In Q4 of 2010 shipments of smartphones exceeded that of PCs, a phenomenon we hadn’t expected to occur until 2012. This isn’t surprising given that there was a 600% growth in traffic to mobile websites in 2010.

Currently a common technique to wrestle this problem is having a separate mobile version of the site. This solution has proved to be untenable, as we now have at least three major mobile platforms to worry about as well as various tablets and those pesky WiFi-connected game consoles. We’d pull out so much hair trying to design a different site for each that we’d end up balder than Donald Trump without his toupée. So now web developers are pressured to deal with this problem more effectively, shouting out different ideas like doctors and nurses in an episode of ER when a new patient comes busting in on a gurney. “One version for all platforms… somehow!” “Use more platform-detecting javascript!” “There IS NO mobile web!” “How about responsive design?!”

Those latter two ideas – designing a site to be device-agnostic and designing a site to respond to different screen resolutions – almost sound like opposing notions but they’re sort of hitting on the same solution. And both are not without controversies. Actually the first time I heard “there is no mobile web” it almost sounded as if we were trying to sweep the problem under the rug and that it was being a bit Pollyanna about the dilemma. And the major criticism of responsive design is it seems like a hack, absolving us of finding the much harder, thoughtful solution.

But “there is no mobile web” is not about a practical approach per se but a paradigm shift, or a new way of thinking when we design a site, not just accommodating mobile, but accommodating everything – as much as possible – and that’s where responsive design comes in. And even if that’s a hack, it’s a necessary one, because we need a solution right now, even though it’s imperfect, because things are moving so fast. And, as always, compounding the problem is Moore’s Law: the faster this mobile revolution moves, the faster it will move. The growth is exponential as each new innovation builds upon previous ones. The numbers keep smashing predictions and expectations – nobody can keep up – like with the underestimation of how long it would take for mobile shipments to outpace desktop and laptop shipments.

We need to try to catch up to the trend with responsive web design, and while we’re doing that, work on a more thoughtful solution. It may not even be “responsive web design” at all. But that solution may even get us ahead of the game eventually. How long will it be before more people are accessing your site, or your clients’ site, on the phone than on their PCs? Will it be next year? Next month?