Responsive Websites: What They Are and Why You Want One

Business Owners

responsiveResponsive websites became all the rage during 2013 in the web development community. Not only was mobile traffic increasing exponentially, but the technology was finally available to create websites that were flexible enough to accommodate both desktops and mobile screens.

What are they?

A responsive website is a website that (within it’s coding) automatically adjusts its layout and images based on the screen size. This website is a good example of Responsive design. If you pull it up on your phone, you’ll see the website repositions itself to allow the user to easily access everything.

Example of Responsive Site

explanation responsive website

The image on the left is my site (as of writing) on a desktop computer. The image on the right is that same website on a mobile window. Want to see more examples? Check out the Responsinator, an online tool that shows your website within different screen sizes.

The positives of Responsive design

Responsive websites provide huge benefits to the business owner.

First, as mobile traffic continues to increase, the number of people viewing your site on their mobile device will increase. Websites that aren’t optimized for smaller screens can leave your customers frustrated or even unable to access the information they’re looking for. Responsive websites allow users to easily browse without zooming in and other hassles.

Second, Responsive websites provide the entire website to the user, not a smaller version of it. Before the technology was available to create Responsive websites, your only choice was to create a separate mobile-specific website. While this allowed mobile users to access your site, a mobile site often didn’t include all the information on the main site.

Third, a mobile-specific website would require that your IT team or web developer create and maintain two separate sites – double the work-load. Responsive sites remove the additional upkeep for a separate mobile site.

How do programmers create Responsive sites?

When the internet was first created, websites were organized by tables. We got a huge upgrade when Håkon Wium Lie and Bert Bos worked to create the standards for CSS, a far better way of coding a page’s layout.

But while CSS was awesome, it didn’t provide for the ability to adjust the layout based on screen size. In 2012, we added something called Media Queries to CSS3. Media queries allow programmers to target specific screen sizes (ie. larger than 600 pixels and smaller than 800 pixels) to adjust the width, heights, etc. of the layout.

Because much of the responsiveness of the website comes from the original HTML coding and layout of the site, “making” an already created website responsive isn’t always just about adding Media Queries. The effectiveness of the Media Queries will rest heavily on the initial layout and coding itself.

Why you should want a Responsive site

While I often caution business owners to avoid just “jumping on the bandwagon” because everybody else is doing it, this is not one of those times. If people aren’t currently looking at your site on their mobile phone or tablet, in the very near future they will be.

So provide your users with a great experience when they browse to your website on their mobile or tablet. Your website is often their first impression of you – make it a good one!

Want to get started? Contact me!