Responsive websites are websites that change their formatting based on the size of the browser they are being viewed on.  They change in response to the size of the window, essentially transforming your normal website into one that is mobile ready.

The website you are reading is built using responsive techniques.  If viewing this on a desktop computer, you can resize your browser window by dragging from the bottom right corner.  As you make the width of the site smaller, you will see the site reformat.  This is all done without the need for a another mobile website that would need to be built and maintained separately.

There are normally three different formats that the website will conform to to optimize the viewing experience:

 

Desktop

The website will look and function as a standard desktop site, optimized for browser widths of ~900 pixels and larger.  The website will look something like this:

 

Tablet

Images will resize to fit the screen size more appropriately.  Menus and website elements may change their placement to better fit the viewing experience on a tablet device.

 

Mobile/Phone

All content on the website is reduced to one column to eliminate the need to “pinch and zoom” to read small text on a mobile device.  The main navigation is also changed to a dropdown, that makes navigation easier on a mobile device.

 

Why should you care?

Because you can future proof your website for all future mobile devices, regardless of what operating system or brand of phone your visitors are using.  Responsive websites respond to the width of the browser, not the make or operating system of the device it is being viewed on. When the next new device hits the market, whether it be a new tablet or smart phone, your site will be ready to conform to its screen size.

The other huge advantage that responsive websites have is that you only have to maintain the content on one website.  Your content can be made in one place, but be optimized for viewing in three different formats.  This is contrary  to a separate mobile website where you would have to update content on your main website and then go and update again on the mobile version.  Responsive sites reduce the extra time and cost out of maintaining a cross platform web presence.