What is Responsive Web Design?

There’s nothing worse than finding a great site on your desktop, trying to open it on your phone, and all of a sudden it’s gone haywire. You want to read a compelling article, but need to scroll after every 6 words. Try to browse the menu, but it’s completely out of order (and you still have to scroll!!!) And the pictures that were placed so perfectly are in a crazy collage. Now that article has become unreadable, and you’re never going to that site again.

Luckily, there’s a fix for that.

Responsive Web Design (RWD) is a design approach that creates one site to adapt to any sized and shaped device. It’s programmed to morph, meaning users always see roughly the same thing. Above all, it’s organized, consistent and comprehensive.

Some common features of RWD include:

• Minimal Scrolling and Resizing/ Zooming
• Fluid/ Adjustable Layout
• Optimal Font Size
• Pertinent & Streamlined Content
• Flexible Grid & Images
• Media Queries

Questions & Concerns. 

RWD is new, so it has its challenges. And there are still a lot of questions surrounding it, like:

Do I even need it? Not necessarily. Review your metrics, as well as short- and long-term goals, before deciding. Some questions to consider include: 

• Who is my target audience? Does this audience rely on mobile and tablet devices?
• Why are customers visiting? Will fitting it to meet mobile needs benefit them and myself?
• Is my current design suited to different browsers? Mobile phones? Tablets?
• Have I received complaints based on mobile experience? Could RWD solve this?
• Does my current/future marketing strategy revolve around the Internet or mobile devices?
• What do my analytics say? Do I have a lot of mobile traffic? What are they doing? And does my current site support that?

How much is this going to cost? Again, it depends. On one hand, not every developer knows how to create it. For this reason, it could be expensive, time-consuming and confusing for developers and end-users.

On the other hand, responsive design means you only need one site, which could eventually offset the startup cost. And if you have a skilled developer who isn’t charging an arm and a leg, it’s safe to say they won’t be wasting time figuring out out how to do it. Lastly, one site as opposed to three means you pay someone to update only one, which saves them time, and makes your brand more cohesive overall. 

Do I need to go “all-in?” Designers construct RWD in various degrees, whether adopting some components and integrating them with existing web design, or completely overhauling sites to be fully-adapted to any browser or device. It depends on their skills and your needs.

The same page on a desktop vs a smartphone.

Are You Willing to Change?

Consumer habits and interaction have changed rapidly in the past five years. And it’s clear that mobile and multi-browser interaction isn’t going away any time soon. Pew Research found 78% of teens own a mobile phone, and 47% own a smart phone. This audience can’t be ignored, as they represent the future of consumerization.

RWD requires both an attitude and a procedural adjustment. Because RWD has to meet tablet/ smartphone needs, site admins need to focus on what’s really important. Using less pictures and text might seem counterintuitive, but a “Quality v Quantity” philosophy is what makes RWD successful.

Procedurally-speaking, taking a look back and editing old content to fit smaller screens could help. You will need to think of things collectively—what could benefit one device won’t work for them all. And you might need to hire a developer, if you already haven’t, to implement the process.

The Proof is in the Pudding.

Tablet sales are expected to exceed 100 million in 2013. Statistics point to the growth of mobile and tablet devices:

• PC sales are down for the first time since 2001
• No one screen size has more than 20% of the market share
• Mobile-based searches account for ~25% of all searches.
• Tablet users spend 50% more than PC users.
• 61% have a better opinion of brands when they provide a positive mobile experience.

The numbers should speak for the need to incorporate mobile into the future.

Since RWD is still emerging, there are limited statistics regarding its effectiveness. ElectricPulp conducted an independent test using a web-based clothing store, O’Neill Clothing. They took existing sales data for a comparable time period, reconfigured the site to meet RWD standards, and monitored revenue over the next three weeks. The results were highly promising, and mostly tied to mobile devices:

IPHONE/IPOD:

Conversions: +65.71%

Transactions: +112.50%

Revenue: +101.25%

ANDROID DEVICES:

Conversions: +407.32%

Transactions: +333.33%

Revenue: +591.42%

NON-MOBILE DEVICES:

Conversions: +20.30%

Transactions: +71.11%

Revenue: +41.13% 

Sometimes, less is truly more. RWD provides the opportunity for businesses to market themselves seamlessly over multiple interfaces, increasing the likelihood for success in a hyper-competitive world.