We hear the term “responsive design” tossed around a lot these days. Mashable even declared 2013 as the year of responsive web design. So you may have heard of it a lot, and perhaps even read a little bit about it, but it can still be a concept you are unsure of how it affects you or your business.

Wikipedia defines it as web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).”

I asked my CEO Lisa Calkins about RWD and why our clients might care about the trend. She mentions that is important to understand that RWD is both a tool and a design technique. Unfortunately, there is no magic button inside a CMS platform that automatically resizes your website to whatever landscape the user is in. But there are many ways to build a site using RWD; some are more affordable than others.

Simple Design

One way to keep the costs down on building your website using responsive web design is to keep the design really simple. This can work for a lot of sites where they just have simple text, and some simple images. Take a look at the below site. It just resizes the text block based on the window size, making it a much more affordable way to ensure your site is easy to use at all sizes.

Simple Responsive Design Example

Enhanced Design

Some sites have more images or text, so they have to take a little more difficult approach (i.e. more expensive) to responsive design. Take the Time Magazine site – it looks really nice in all devices, but doesn’t do any crazy things with the content and move it around a lot.

Enhanced Responsive Design Example

Custom Design

Then there are the sites that really look slick no matter what. These sites have a lot of functionality and they spent a good deal of time on development and design. Take a look atErinWeed.com. I tried to capture the cool factor that happens while resizing – the blocks actually move around. The Google Nexus site is also really well done – and it just removes the section that does not display well on the smallest device.

Custom Responsive Design Example

Custom Responsive Design Example Nexus


What are the other Options?

RWD is not the only technique available to companies wanting to ensure their site is viewable on many devices. You can code your site to simply know what device the user is viewing the site in, and serve up a different, parallel page that has the same or similar content but sized by device. This is an easier, more affordable way to achieve close to the same thing because you don’t have to re-architect the whole site like you do with RWD. Yes – you may have 100 pages on your site so having to create a parallel page for each seems like a big task. However – you don’t have to recreate every page. You can take a look at Google Analytics and see what pages get the most traffic, and start with those. These are pages like your home page, your contact us page, and maybe your company bios or about us page.

Still confused as to what option is best? Contact us and we can walk you through it!