June 23rd, 2014

Responsive Design: How Design Translates Seamlessly from Web to Mobile

by Ashley Bullin

Responsive design. One of the biggest buzzwords in web design right now—and if you’ve been living under a rock recently, it’s time you’re brought up to speed. What is it and why is it important? Basically, responsive designs ensure that websites look good and work well on every device: desktop, tablet and mobile. And let’s face it—the number of consumers using tablets or mobile devices to view information on the web is growing as we speak.

A responsive design determines the device’s resolution and how the data is being displayed by using media queries, and then adapts to that device. Flexible images can grow larger on desktop as you widen your browser window, and smaller as you view them on your iPhone screen. Some sites also alter navigation behaviors after detecting what device is being used. For example, swiping to view multiple images or articles may work for a site on your smartphone, but you would most likely use arrows to navigate on your desktop.

So why is it important? Other than the obvious benefits listed above, responsive design has a huge impact on bounce rates. Let’s say you’re a big-time media company and you tweet a link to a recent article you’ve published. On any given day, approximately 70% of users are viewing social media on a mobile device. So, accordingly, 7 out of 10 of your followers clicked on your tweet from their smartphone and it went directly to your site NOT optimized for mobile. They’re automatically irritated that they can’t read the print because it’s too small. You’ve probably lost half of them already. Maybe they try to zoom in, only to notice they can only read one quadrant of the article with your tiny, tiny print at a time. And then—this is even more of a nuisance—they realize your article spans multiple pages, and they can’t figure out how to scroll there. Now you’ve lost them for good. Those users are going back to their Twitter feed to click on the most recent tweet from your #1 competitor—the one with the responsive site design.

Aside from bounce rates, not having a responsive website is most likely affecting your bottom line. You not only risk losing traffic and visitors, but ultimately business. It’s quite cost effective to invest in a responsive website, due to the fact you will save significantly by having one site that works on all devices rather than multiple sites to work on each device separately.

Did you know that Google must crawl and index each version of your site? It’s true—if you have a site for desktop and a site for mobile, the URL and HTML are different for each. If the most popular search engine in the world prefers responsive design in order to be more efficient, it’s pretty clear that you should too.

In 2014 mobile is expected to outnumber desktop in terms of internet usage, so it’s more crucial than ever to ensure your site seamlessly transitions from one device to the next. Responsive design allows for a better user experience and keeps you ahead of the competition.