What Is Responsive Design?

At present, web design and responsive design are different things. But that line grows increasingly blurry as we look down the road. Ten years ago, websites were viewed almost exclusively from desktop monitors, which were generally the same size. Today, there’s a sea of web-capable devices on the market, each with its own specifications. In the very near future, it will be impossible to consider anything but “responsive design,” and eventually the word ‘responsive’ will be a foregone conclusion. All web design will be responsive

Responsive Design- What It Is, and Why It Matters 

Responsive design is not a technology in and of itself. Rather, it is a technique.

Responsive design is a combination of several technologies and Best Practices which are used together towards the same purpose – creating web pages that automatically adjust their content for optimal viewing on any size of screen.

Elements are not merely resized to better fit a small screen, the entire layout of a page is optimized.

Before responsive design, if websites supported mobile devices at all (which was seldom) the site designer had to upload multiple size variations for the same image, and for every image on the page. Then a new layout had to be created, designed specifically for smaller devices. This would, in effect, create an entirely separate website. The practice was a stop-gap, and a clumsy one at that. It required a lot of extra work and additional online storage space, just to support smaller devices.

Responsive design resolves this problem far more elegantly. Instead of using static pixel-based image sizes and layouts, responsive design makes use of percentages for each element on a web page, so a single image or text box will scale appropriately no matter which screen is displaying it. The page layout is dynamic as well, adjusting itself to make the optimal use of space without scaling down to minuscule and unreadable sizes.

Examples

There are many websites today that do a bang-up job of demonstrating responsive design. The Starbucks website is a great example. The image below is a screenshot of their current (July 2016) website, from a desktop browser. (Note: the slider on the right of the image shows that we’re only seeing the top of the page. Remember this for the final image, below).

The following image was taken from the same browser window, but I made it as narrow as possible to simulate how it would be seen from a smart phone in vertical orientation. Note how all of the elements have been rearranged, yet are sized correctly for optimal viewing.

Finally, here’s a mockup of how a non-responsive Starbucks website would look on a smart phone. It’s the same design you would see on a desktop browser, but when displayed on a screen this small it is completely unreadable.

To see responsive design in action for yourself, check out the Starbucks website from a nice, big screen (like the monitor of a desktop computer). Once you’re there, grab the bottom right corner of the browser window. Stretch the window as big as it will go on your screen. You’ll see each element on the web page adjust to make use of the copious space it is given (for high resolution screens, you may already be viewing the page at its largest configuration). Now drag the window down to its narrowest width. The design elements do not merely “squish” in size; instead, their layout is rearranged to make the most of limited screen real estate. This is an easy way to simulate how a page will be viewed on a smaller device, such as a cell phone.

Other good examples of responsive design can be found on the Grey Goose, Apple, and Costco websites. And this is a good collection as well – not only are there plenty of examples of responsive design, but this site itself is responsive.

Getting Technical

To say that images and content elements are scaled by percentages is true, though it’s not the whole story. If you’re interested in the more technical details, then you are probably already wondering about one important factor; style sheets.

And you’re right. That’s the key that makes a web page device-aware. Encoding the appropriate media queries into your CSS is the secret sauce of responsive design. Media queries will detect the screen size being used, and apply the optimal style sheet.

The propensity for businesses to spot trends is akin to magic. Yet, it seems most businesses haven’t yet noticed that up-and-coming generations are glued to their mobile devices. Or, if they’ve noticed the trend, they aren’t responsive to it (see what I did there?). That, however, will change over time. Here’s why.

Benefits

Not already convinced? No problem. Here are just a few perks that a business will enjoy, contingent upon a well-designed responsive website.

• Higher conversion rates. Making conversions is the ongoing goal of every business owner. Responsive design removes one of the biggest obstacles between web traffic and a completed sale; there are a ton of statistics here (and here, here, and here, etc…) that show the skyrocketing increase of mobile internet usage, from simple emailing to social media to online shopping. If your website is beautiful from a cell phone, tablet, and desktop monitor, you’ve paved every avenue from which a sale might come.
• Happy customers are loyal customers. Not only will you encourage the first sale, but a customer who enjoys visiting your site (ie., they did not find your web site to be a literal and figurative eyesore) is likely to come back again and again. Best case scenario? A little investment in a responsive website can turn satisfied customers into a sea of Brand Evangelists.
• Responsive design is far more efficient than keeping multiple versions of the same website. Websites that have desktop versions as well as mobile versions create a lot more work for the server hosting your site. Your web server will thank you, and your customer will access your site more quickly (and with less frustration).
• Good for SEO in general. SEO is served by many things, but one of those is a site’s bounce rate. When users arrive at a site (even one they were specifically looking for) on a mobile device, if that site is all but unreadable, they’ll leave almost immediately. Not only is this traffic not counted in terms of site visits, it detracts from a page’s SEO standing. Plus, keeping multiple versions of the same site makes it unnecessarily difficult for search engines to properly index them. With responsive design, there’s only one site to index, and its adaptability is rooted in style sheets, rather than “hard copies” which require their own URLs and their own HTML code. See this article, which talks about Google’s official stance on responsive design.

Drawbacks

Responsive design is like a magic lamp which can resolve your three greatest web design wishes. However, those solutions may come with unexpected consequences. The good news is that most of these consequences will ebb away as old tech dies out and web design continues evolving. But for now, some of the drawbacks of responsive design are:

• As with any emerging technology, the cost starts out high. Then, as demand increases, supply increases in response, and costs level out to affordable rates. At present, finding web developers who have mastered responsive design can be challenging, and you’ll pay a bit more than you would for a simpler website.
• Older browsers might not support the technology that makes responsive design work. Your site will likely still be accessible, but its “responsiveness” may not work at all. Keep in mind that older computers (and defunct web browsers) are continually being decommissioned, so this particular “down side” will resolve itself over time.
• Certain elements are notoriously difficult to manage in responsive design. Examples include spreadsheets, complex graphs, and interactive elements (such as java scripts.)
• There are number of reasons why a website might readjust itself in the middle of a user’s session. Though infrequent, this can be jarring and disorienting to the user when it happens.

These negatives are far eclipsed by the positives which well-crafted responsive design can bring, but I mention them here in the interest of being thorough.

Conclusion

Who is responsive design right for? Anyone. Everyone. From weekend bloggers to Fortune 500 companies, there is practically no arena which is not benefitted from versatile web design.

The aforementioned “extra cost” associated with making a website responsive is also rapidly on the decline. It may not be easy to convert an existant website into a responsive one, but any new website has a plethora of HTML templates, frameworks, boiler plates, and full-fledged design themes which can give it a jump start.

It may also be a good idea to peruse the above examples of excellent responsive sites to get the creative juices flowing.

Good luck, and happy selling!