Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia]

You’ve probably heard the word “responsive” thrown around a lot. It’s quite the buzz word in the web design world these days. But, I’m going to show you why responsive design isn’t just a buzz word. It’s a trend that’s here to stay.

Why do we need this?

It’s no secret that having a mobile website is a necessity in today’s digitally savvy world. But, responsiveness isn’t just about connecting the mobile to desktop experience. We’ve seen smartphones, tablets, and even phablets (part phone, part tablet) make an incredible impact on the marketplace. These devices have also changed technology usage and ownership patterns. According to Pew Research Study, as of July 2015, 68% of American adults have a smart phone, 45% of adults own a tablet computer, and 73% of adults own either a desktop or laptop computer. People are spending more and more time on these devices. As a result, they are also consuming more content through these avenues than ever before. The diversity of devices has led to a consumer expectation for cross-platform responsiveness. Your site should perform as well and easily on any device, right?

According to this post from the Google AdWords blog, “More Google searches take place on mobile devices than on computers in 10 countries including the US and Japan.” That means that all of those searches are returning websites to users on their mobile devices. You can bet that some are mobile friendly and some, well, not so much. And you can be sure if your site is in the “not so much” category, you run the risk of increased bounce rates in favor of a website that has a better user experience. So it goes without saying that if you want to compete in the digital marketplace, your website better appeal to users on a wide array of devices and resolutions.

But how has mobile technology affected website design?

Simple and Direct – There are a lot of factors when thinking about viewing content on your phone or any other device. The most obvious is that you have far less real estate to work with. Although phones vary widely in resolution, by no means do they compare to the desktop or even laptop monitor. Because of this, one must be mindful of how the content is arranged and presented on a website. We are seeing a trend of more direct presentation that is simple to understand as opposed to overly complex and flashy designs. This is a direct result of the user expectation of a user friendly mobile experience.

Sharable – As we can see in this article from Business Insider “In 2014, social media eclipsed search engines as the biggest driver of referral traffic for publishers.” Because apps like Facebook, Twitter, Instagram, Pinterest, etc. are perfectly formatted to work on mobile devices, it makes sharing content easier than ever before. Whether it is a news article, blog post, or some other form of content, websites need to be mindful to provide ways for users to spread your information; thus, the emergence of social share.

How to design for mobile 

Many people aren’t aware of the difference between a mobile site and a responsive site. The easiest way to understand the difference is to view a mobile site as a secondary site to your main website. On the contrary a responsive website is your exact website that adjusts depending on the device it’s being viewed upon.

Let’s start with mobile sites. There are many companies that provide a service that can help you obtain a mobile version of your website. Companies like GoMobi allow users to pull colors, logos and imagery from your existing website and use their site builder to put together a user experience that works well with phones, tablets, etc.

The good part about utilizing these services is that it is fairly easy to get a mobile site put together in a short amount of time and updating requires little to no knowledge of code.

Some other companies are Duda Mobile, MoFuse and Wirenode. Now as convenient as these sites are, they do have their limitations.

Often times these companies are limited in their functionality and how far you can customize your site. Typically they will have a selected list of templates and options to use. You can usually find the standard click-to-call, map location, calendars and other options but if your website is fairly complex, you might find yourself wanting more. This also leads to your website looking very similar to another website that might be using the same service.

That’s where a responsive websites come in. A responsive website is still your own website. When someone pulls up your site on a mobile device your domain name remains the same, unlike a mobile website which typically starts with http://m.domainname.com. In addition, you are not limited to a selected list of options to choose from. Further, responsive sites give you the opportunity to design with many screen resolutions in mind- meaning you can target tablets, phones or “phablets” or all sizes.

With a responsive design the elements on the page are reorganized depending on the screen resolution of which it is being viewed. As you can see from the following example, the website is the same website throughout. However, the elements on the page are arranged in an easy to digest fashion that looks great on any device.

Although responsiveness is more entailed because it requires additional coding and rules that govern the display on different devices, the outcome is much more professional and provides an exceptional user experience. And don’t worry; there are still user friendly systems such as the HubSpot COS that allow you to create a great looking site that inherently responds to all devices past, present and future.

As you can see, mobile is not going away. With the advent of new devices, resolutions and technologies, my prediction is that mobile responsiveness will only be more relevant as time goes on. Taking time at the onset of any web design project to consider the consequences of mobile rendering, you can lay out the format of your site in a way that will appeal to the greatest majority of users. This will not only increase your conversions, but will delight your users and encourage them to come back again and again.