What is Responsive Mobile Design, and why do I need it?

Is your website responsive? In other words, does it respond to the shape of the screen on which it is being displayed?

With the use of mobile devices – tablets and hand-held phones – for website viewing now exceeding the use of desktop computers, it is critical to consider how your website looks and functions on all platforms.

A couple of years ago, it was OK to just have a “mobile version” of your website to cover the iPhone and Android phones that would display full web pages. Now, practically all devices display websites, and display them accurately, and look at the number of screen sizes and shapes that are out there! Big tablets, small tablets, phones that look like you’re holding a TV up to your head….  It’s a daunting prospect for web developers to match our sites up to all of those options.

Enter the responsive design… and the best way to describe it is to show you.

This blog is a responsive site, and depending on where you’re reading this you’ll see a couple of hallmarks:

  • Layout: This is a two-column site, with a content area and sidebar. You’re reading the content area right now, and the sidebar is over on the right on a computer. In a small device, the sidebar jumps to the bottom, so you can scroll to read it.  This is the most important feature of responsive design – the text scales to be comfortably read in all devices.
  • Menu: If you are on a computer, the menu is on the top right, and shows a few items and drop-down sub menus. This is often hard to navigate in a mobile device. When viewing on a smaller device, the menu converts to a single button that opens out into easy to touch menu items.

If you are reading on your computer, you can see these changes actually happen by grabbing the right side of the browser window and slowly dragging it to the left, essentially squeezing your site into a column. It’s pretty cool to watch it adjust itself!

Check out some images below, a Connecticut custom responsive WordPress site that we built and maintain. And… are you ready to make the jump to responsive, and want to learn more? Contact us for details – advice is on the house!

Click to enlarge: