What is Responsive Design?

2011 Internet Marketing Advent Calendar This is an entry in our daily Internet Marketing Advent Calendar series. Each day your favorite marketing elves will focus on a new topic to get your internet marketing in order before the start of the new year.

christmas presentsIs your site ready to handle the next wave of smartphones and tablets in Santa’s sleigh this season? It used to be easy to design a website…you figured out how you wanted the site to look, sketched it out, and build the site to size. Then came the smartphone… That’s okay, we’ll add a mobile site (which is super important, by the way). That’s when things started to get a little hairy. You had the 9.5” iPad, then the 7” Android tablet, then the 5” Android phone, and that was just the beginning. Obviously a website built for a 17” screen won’t look nearly as good on a 9.5” iPad or a 5” Android phone, so what’s a web designer to do?

Then came Responsive Design. Responsive design says that you can build one website that looks good everywhere – phones, tablets, computers, even on your nephew’s Wii console. Before you get too excited, remember that mobile sites are still important. There’s a big difference between making a specialized experience tailored for conversion on mobile devices and having a mobile version of your site display on a phone. But mobile site or not – if you’re looking for a way to ensure your business website doesn’t look like you designed it on a bar napkin when it gets inside a phone or a tablet, Responsive Design is your ticket home.

So how does it work? Pretty simply actually…and kind of not. It all starts with the design of the site. Think of your website like a newspaper. Newspapers are designed in columns, with some elements spanning a couple columns, while others are broken out into individual smaller sections. When you design your site in columns (a.k.a. a “grid” layout) with Responsive Design, tablets and smartphones will automatically reorient the site content to fit the device. For example, if you have a main content section and a sidebar on your site, the sidebar may move below the content in the center column to make more room for your content. It’s a simple change, but it makes a big difference when your screen is 4” big.

Want to see some responsive grid layouts in action? Try checking out http://960.gs/, scroll down to the examples and click “Show Grid.” Whether you get your shiny new smartphone this holiday season or not you should be thinking about how mobile is shaping the way consumers research products and services on line. Is your website ready?

Flickr Photo Credit: Alice Harold

Read more from our Internet Marketing Advent Calendar series!