What’s the Difference Between a Responsive Website and a Regular Website?

When we speak with clients about their website's support for mobile devices, the solution we recommend is a "responsive website." The easiest way to describe a responsive website is "a website that can dynamically reflow its layout based on the users' device or screen size." In this way, you can have one website to manage and maintain and that site will be optimized for the widest range of devices possible - including smartphones, tablets, netbooks, laptops, desktops, etc.

So what is a "responsive website" and how does it differ from a normal website? Take a look at the comparison shots below to see for yourself.

Responsive Design vs. The "Do Nothing" Approach

Oftentimes, when I speak with clients about their website's lack of support for mobile devices, that client proceeds to fire up their phone's browser, visit their site, and show me that the website does, indeed, appear on the phone. In these cases, what I almost always see is their normal website, which was designed for desktop computers and not the much smaller screen of their phone, being squeezed down to fit on that smaller screen. The site is there, but it is barely usable. If you've ever visited a website like this on your phone, and I am sure that you have, you know that you have to do the "pinch and zoom" trick to try to read text or access content. It is not an enjoyable user experience and your site's visitors are expecting more these days. I call this the "do nothing" approach to mobile device support since you have, essentially, done nothing to change your normal website and you are hoping your audience will use it anyway. That's a lot to ask.

In contrast, a responsive website and a dynamic layout that can reflow based on different screen sizes ensures that no matter the size of the screen, the site will do its best to present a layout and a user experience optimized for that device.

In the image below, you can see a side by side comparison of the "do nothing" approach and a responsive website (you can click the image to see an even larger view). For this example, we are using the Envision website (which is fully responsive). On the left, we show what the site would look like if we had not optimized our site for multiple devices by using responsive design. You can see that the text is tiny and unreadable at this size. Links that were meant to be clicked with a mouse are impossible to touch with your finger and the overall experience is very poor.

On the right side of the image below, we show how our site really does work on mobile devices. Content is presented in a single column at an appropriate size for this smaller screen device. Links are also presented at a size where they can be touched, and the content behind those links accessed, easily and effectively.

Which experience would you rather use on your small screen device?

Regarding Navigation

Navigation is one of the most important pieces of your website. It allows your audience to access your site's content and accomplish what they have come there to do - place an order, find a service or location, make a donation, fill out a form, etc. No matter what the "win" for your website is, quality navigation helps your users complete these tasks.

In the example above, you saw how hard it was to use links on the "do nothing" approach versus the mobile optimized responsive version of the site. This holds true for our sitewide navigation as well.

If you look at that above example again, you will see that our navigation collapses into a large "Menu" button for our responsive design. If a user touches that button, they are brought to the navigation menu (shown below) and it is presented in a large, touch-friendly manner to make navigating the site's sections and content easy to do. This focus on optimizing the user experience will ensure that no matter which device our audience chooses to access our website with, the experience we offer them will work well and help them complete their task.

More Than Just Mobile Phones

Smartphones are important, but they are just one of the devices being used to access our website content today. The device landscape is getting more diverse each day and if we want our websites to keep up, we need to make sure they respond well to this growing range of new devices and screen sizes. One of the most powerful benefits of a responsive website approach is that since it adjusts to different screen sizes, it is the best way to optimize your site and online user experience for the widest range of devices possible - both those that are out today and those that we haven't even seen yet.

Below you will see the responsive Envision site presented on a variety of devices. In each case, the layout is optimized for that individual device - yet we still only have one website to maintain and manage.

Contact us if you'd like to know more about responsive web design and how it can help your business' website.