5.9.12

Responsive Web Design

BY JEFF ROBERTSON

Today's website layout doesn't do much.

As a freshman in high school, I remember doing an experiment which was designed to reinforce the basic scientific method. We had some sort of fly as our experiment subject, and the control group was a jar of pea gravel. Long story short, my friend Cody and I did something completely wrong in the setup and ended up having to write part of our report explaining why our gravel had "responded to stimuli" and therefore, we concluded, was alive.

Current web layout is about as adaptive as gravel. Responsive web design holds much more promise, but it may end up being more like our botched science experiment than a brand new animal.

There are so many articles about responsive web design that I won't reiterate all the key points. (Good reading here: http://www.alistapart.com/articles/responsive-web-design/)

As the ultra-short version, responsive web design is where websites know how big your screen is (among other things), and it adapts itself to look good. You can see an example here -- try resizing your browser window from very small to very big and watch what happens to the size of the images and the positioning of the boxes. The intent is to serve everything from an iPhone to a tablet to a 30-inch computer monitor all with the same set of code. Or, depending on how far the developers want to go, it might just be used to make things look good on an old 1024 pixel screen versus a nice big 1920 pixel screen (leaving the mobile devices to fend for themselves).

Why bother? Well, the simplest answer is that there are lots of different screen sizes out there. The idea has long been to design for the lowest common denominator -- currently about 1000 pixels wide. If you have a bigger screen (as most people do), you'll just see the background image or background color extending to the edges of your screen. If you have a smaller screen, which few people will, you have to scroll horizontally in hopes it will convince you to get a better monitor.

But this leads to a lot of wasted real estate. Look at what I see on my 1920 pixel wide monitor when I go to CNN.com, which is designed with the lowest common denominator in mind:

cnn

All those extra dollars for a bigger monitor and I don't get to see any more content than I would viewing this on my phone.

So is responsive web design a passing fad? No and maybe. Speaking for the no's: this is just an evolution on an existing concept. Before, if a special mobile layout was important, we designed two versions of a website to meet the different needs of desktop browsers and mobile browser. This really isn't that much different -- the two versions of the site use the same code, but you still have to plan for both versions.

On the maybe side, however -- I really don't like when websites reformat themselves for my phone by eliminating options. I really detest mobile websites because they are often poorly conceived, and they try to simplify things by eliminating all but the most important choices. If I'm trying to find the company's phone number quickly, that's a nice feature. More often, however, I'm browsing on my phone just because that happens to be the device available at the time -- I want the full website. My Droid can handle any website with ease (it's more powerful than my computers from not that long ago). Don't limit me just because of the size of my screen. With the responsive web, there may not be a way to escape the reformatting. On most mobile websites (at least the decent ones), I can click to go to the full version of the website. If it's just detecting my screen size, I'd have to have some sort of browser hack that pretends like I have a bigger screen.

One big caveat -- a responsive web design will take more work (both planning and coding) than a traditional fixed-layout design. It's essentially like designing a regular website and a mobile website at the same time. If companies don't want or need to spend the time and money developing a mobile site today, why will they need to do it in the future? Certainly mobile use will continue to grow, but I feel it's more likely the few phone and tablet manufacturers will get better at displaying "regular-sized" web content long before the millions and millions of websites get better at shrinking their content based on device size.

As a final note, the Carbon8 website is not an example of responsive web design. The only downside to staying busy is that internal projects always fall to the bottom of the to-do list. You can expect a new Carbon8 website sometime in current year + 2.

Jeff Robertson
written by JEFF ROBERTSON

Jeff Robertson is a digital marketer and an online development expert with experience stretching back to dial-up. He is partner and Chief Technology Officer at Carbon8, where he helps bridge the gap between the technical and marketing worlds, as well as oversees technical infrastructure.

share this
iamges