Responsive web design is all the rage these days. Everyone seems to be talking about it.

Google is saying it’s the way to go. Most new designs tout some sort of responsive feature.

What is it, and should you be using it?

What is Responsive Design

Responsive Design is nothing more than creating a web page that scales with the size of the device that is viewing it. Instead of having a mobile site, a tablet site, and a desktop site, you can now have one website that adjusts its proportions, image sizes, menus, etc… based on what screen size is viewing the page.

With modern web browsers allowing for more advanced design features, it enables a web page to now shrink or expand to meet the viewing style of the device a person is using. Whether it’s a 30 inch monitor, an iPad, or a smartphone, there is only one web page that is delivered. It just adjusts its proportions so that the content fits on the screen without the need for horizontal scrolling.

Here is a simple responsive tutorial that explains how you would make such a page.

Advantages of Responsive Design

• Only one website to maintain – No need to update a regular website and mobile website

• Visitors see the same content, regardless of device – No more missing out on content when viewing a mobile website. All the content is there, just presented more efficiently.

• One size does fit all – As new devices come out, different screen sizes, etc… you can rest well knowing your website will auto fit to whatever the device happens to be.

Disadvantages of Responsive Design

• Complicated design – It’s not easy to have one web page that auto fits to any screen size. It takes some more advanced coding and planning

• Your site may not lend itself to being an accordion – Your desired look for the desktop may not translate well into being squished

• Mobile viewers may have to download too much – Your site for mobile viewers may require too much downloading to be viewed. A separate mobile site may be more lightweight

Any website can be responsive

We’ve received a number of questions asking us if their ecommerce application like ShopSite supports responsive design. Or if their blog needs a special plugin or upgrade to be responsive.

The beauty of responsive design is that it is completely self-contained in the html code. CSS and/or JavaScript code is all that is needed to make any page responsive. Your ecommerce platform, blog platform, etc… does not matter.

As long as you can edit the html code of the pages being displayed (either directly or via a custom template / theme), then your site can use responsive design. ShopSite, WordPress, etc… all can display responsive web pages.

Additional Links

Here are a few links that I found helpful for Responsive Design…

Responsive Design Tutorial

Smashing Magazine’s Responsive Articles

Common Techniques in Responsive Web Design

 photo credit