banner-1.jpg

Vision Blog

Thought Leadership, Best Practices, Insights and Examples

  

Let’s Get Real About Responsive Design - An Introduction to Responsive Web Design

by Tom Humbarger
Post Date:09/16/2015

By now, you’re probably familiar with concept of Responsive Web Design (RWD), but it can be challenging when you have to explain it to others or justify why it’s necessary.

A Simple Definition — And Justification

RWD means that a single website self-adjusts to look good whether it’s being viewed on a smartphone, tablet, notebook or desktop. Today’s mobile users expect all websites to work on any device – without a mobile site or app that limits functionality. In addition, search engines like Google penalize websites that are not mobile friendly – so if you want to be found, you need to be responsive.

Desktop-Tablet-Mobile_View.png

Mobile Usage Numbers Keep Increasing

According to Pew Research, “nearly two-thirds of Americans are now smartphone owners, and for many these devices are a key entry point to the online world.” While the mobile usage is still skewed to those under the age of 50, the gap is closing and large numbers of users across all age groups are using their phones to follow breaking news, share information and learn about community events. So if your site is not mobile-friendly, it is not meeting the needs of a large number of your community. 

Smartphone-Dependent_Population_-_Via_Pew.png

  

Pew_Research_-_Table_with_Survey_Results_on_Government_Sharing_of_Data.png

How to Test for Responsive Design

One way to demonstrate to your team how visitors interact with your website, is to show them how it looks on different devices. If you use Google’s Chrome Browser, there is a great add-in called Mobile/Response Web Design Tester that allows you to test your site out in different shapes and sizes, without having to use an actual device.  

Responsive_Design_Tester_Plugin_for_Chrome.png 

Another alternative technique is to manually resize your browser window to simulate a smaller screen size.  While this technique is not as powerful as the Chrome add-in, this is a trick you can use across all browser platforms.  

Organizations with Great Responsive Sites

All Vision Internet customers on visionCMS automatically have responsive websites. Here are a few examples where communities are doing extra good job serving, representing and delighting their community: 

City of Victoria, Texas

Victoria_Texas_Web_and_Mobile.png

 

Monterey County, California

Monterey_County_CA_Web_and_Mobile.png

Lethbridge County, Alberta, Canada

Lethbridge_County_Alberta_Canada.png

Coming up in a future post, we will cover advanced techniques to maximize your mobile effectiveness.

Additional Resources

 To learn more about responsive design, check out these additional resources:

Return to full list >>

Subscribe to Vision Blog

Recent Posts