Mediacheck

A Tyee Series

Idea #8: The Web Revolution That Started in Your Pants

It's not porn. It's called 'responsive design,' the new wave of web development.

By Phillip Smith, 28 Dec 2011, TheTyee.ca

Big ideas for 2012

New ideas for 2012.

Related

There is a web revolution underway. And it all started in your pants.

Specifically, in your pants' pocket.

If you're anything like the 80 per cent of Canadians who use the Internet, you own at least one mobile device: a so-called "smart phone," a tablet computer, an e-reader, an Internet-connected video game console or a netbook. If you do, you're part of a growing technology evolution that's impacting the future of the web.

Where the makers of the web once asked, "Should we concern ourselves with the small number of people that visit our sites on mobile devices?" they now ponder the question "Who isn't using a mobile device?" For many, the time spent in front of large-screen devices is decreasing dramatically, as portable computing devices become more affordable and convenient.

The idea of buying Granny a desktop computer to communicate with the grandchildren almost seems quaint today, as this year's latest tablet models fly off the shelves and into the hands of Canadian seniors keen to join the mobile computing revolution, as much for its simplicity as for its portability. The grandchildren, of course, are already mobile-empowered, if not mobile-addicted, web users.

And herein lies the challenge: Today's web is increasingly consumed on a dizzying array of mobile devices, but -- until recently -- much of the web was almost exclusively designed for large desktop computer screens.

All I wanted for Christmas 2001...

Not so long ago, web makers were endlessly debating the best screen size and display resolution to plan for designing a website like The Tyee. Each year, the question gets re-hashed with the most current information gleaned from global surveys of web users, and each year, the consensus on the lowest common denominator for screen resolution gets a little bit bigger, as technology and screen sizes advance and become more affordable. It was a dynamic that fed into itself; as screen resolutions increased, there was more and more room to add that secret ingredient that makes any website pretty: white space.

(Just look at The Tyee site and all that whitespace at the top of the site. Pure luxury.)

All this changed on Jan. 9, 2007, the day Steve Jobs announced the iPhone. It was the innovation that put more computing power in your pocket than we had on our desks just 10 years ago. Suddenly, mobile web surfing got fun again.

There was just one problem: How was a web developer supposed to design for screens that are at once growing larger (with cheaper and larger monitors) and smaller (with mobile computing) without building two completely separate sites -- often a maintenance headache and quite costly to build, especially for small publishers?

Welcome to the era of mobile-first design

Sometime in 2009 or thereabouts, a small handful of forward-thinking web makers started trying to figure out how to design for both. (Let's call this the Unified Theory of web design.)

In the era of the pre-iPhone web, many of the world's largest web publishers invested in building scaled-down version of their sites for users on mobile phones. These "mobile friendly" sites were reminiscent of a circa 1996 web: minimalist and boring. Nobody was happy with these sites, not the people using them, nor the publishers who had to manage them.

So, how might you experience this?

Ever tried to find a story on your local newspaper's website after reading it first on your phone or iPad? Sometimes it can be annoyingly difficult. That's because, behind the scenes, there are different people managing different workflows for different platforms at the same publication. And that's because people and organizations have built new websites off the backs of existing websites, like a house with too many additions, with stairs that go nowhere and rooms without doors.

In answer to this challenge, the web makers said "Let's rethink the mobile web," let's put "Mobile First." The invitation was to make the mobile experience the first consideration (or lowest common denominator) when building a website or web application, not the last as is common practice.

The bright future being proposed was a simpler way for web property owners to meet the needs of mobile users, and a more usable and useful experience for people using mobile devices, without sacrificing the beautiful experience for those with larger screens.

Enter responsive web design

Then came Ethan Marcotte. Marcotte introduced this simple idea:

"Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design."

The essence of responsive web design is that the website presented to mobile users and desktop users is structurally and functionally the same, but that presentation and capabilities of that site adapt to the various devices that the site is being viewed on. In other words, the underlying code is intelligent enough to "respond" to the platform you're using and presents the same content in a way that is easiest to consume and navigate on that platform.

These ideas exploded like a mind-bomb into the consciousness of web makers everywhere.

Without wasting any time, the maker and hacker culture of the web went about exploring every possible possibility of these ideas, figuring out how to route around any of the challenges to making this vision a reality. Soon enough, the tools to make responsible responsive design were available to everyone, and -- if you needed a bit more help -- there's even a book.

Putting ideas into practice

Earlier this year, the Boston Globe threw down a gauntlet to other online publishers everywhere by embracing responsive web design principles when building their new website bostonglobe.com -- a single site that efficiently delivers content to every possible mobile device, as well as serving readers using desktop computers.

Try it out. Visit BostonGlobe.com on your mobile phone. Now on your tablet. Now turn it sideways. Now on your desktop computer. Did the content reposition itself for optimal viewing? Did the images re-size accordingly? Hopefully you're getting the idea. (If you're interested in learning more about the features of the new BostonGlobe.com site, there's a good video here.)

This isn't just a fad being embraced by large publishers either. The principles of responsive web design are being employed on websites and web applications of all shapes and sizes. Chances are that you're starting to experience these changes right now, as you surf the web every day. It's an idea that will continue to reshape the way we experience the web right through 2012 and, quite possibly, beyond.

Like all new technologies and revolutions, you won't see responsive web design coming to The Tyee anytime soon. But we think it's a pretty big idea, and just as soon as we've figured out all of the pressing questions of running a successful online journalism enterprise, we'll get right on it.  [Tyee]