Inbound - The Blog: The Secrets Behind Click To Close

The Beginner's Guide to Responsive Web Design

-

It's the latest thing.

So far, it's the greatest thing.

But what is responsive web design? How does a site become responsive?

If you've been scratching your head and wondering questions like these, read on for an introduction to responsive design!

The Beginner\'s Guide to Responsive Web Design

"What is Responsive Design?"

To understand responsive design, it's important to first consider how use of the internet is changing.

Since the dawn of smartphones, and later tablets, internet users have been gradually trickling off their computers and onto mobile devices. What we used to do on our desktop (perform searches, update our Facebook status, check our email) we're now doing more and more of on the go.

Pew Research reports that 60% of American cell phone owners are currently accessing the internet on their phone:


On top of that, tablets are making a major splash. According to SmartInsights, tablets exceeded traditional desktop devices for online purchase conversion rates in Q1 2013. 

Knowing that phones and tablets are accounting for a major percentage of web traffic, it's logical to determine that we should be optimizing our websites for users on those devices.

The first response to this phenomenon was the introduction of mobile optimized sites.

Mobile sites are designed for - you guessed it - the mobile experience. A mobile site is a related, but unique version of your website.

For example, consider the two images below. One is the Papa Johns website, and one is the mobile site.

 

The mobile iteration is all about the conversion, with quick clicks to order options (conveniently sized to be easily tapped by finger). The desktop site is, well, the desktop site. It has more information, bigger visuals, and Papa himself.

Having two different versions of the site is great - I don't have to zoom and pinch and squint every time I want to order a pizza online via my iPhone. This is the beauty and simplicity of mobile design.

But remember, people are using a lot more than iPhones to access the internet. We've also got tablets (of varying screen sizes), tons of desktop screen resolutions, and a multitude of different cell phones being used.

Enter Responsive Design.

Rather than creating a new site to suit each mobile device, responsive design optimizes your current site to display appropriately on various screen sizes. It's the same site, just in different formats.

Think of it like the chameleon of the web (all of the adaptability, less of the scales):


Here's an example of responsive design by HubSpot. Notice the site has the same content, just displayed differently for desktop, tablet, and phone screen dimensions (the smaller the screen, the longer the page gets):



"How Do I Know if I Need a Responsive Site?"

I know what you're thinking. That HubSpot site is pretty snazzy, I guess everyone should have an equally nifty site! Bring on the responsive design!

Before we get ahead of ourselves, consider that not every site should be designed in a responsive format. There's a reason that Papa Johns, Domino's, and Pizza Hut all have mobile sites. 

When your conversion lies at the end of a pretty short consideration funnel (like deciding which pizza to order) and the vast majority of your visitors come to the site 98% sure they're making a purchase, it's not a bad idea to optimize the experience for that conversion. This is especially true if your website houses a lot of important information that may not be relevant to mobile conversions, but is important to present online.

So, take a step back and consider your offering and the purpose of your website. Is this meant to be a quick purchase channel, or a big picture branding tool? 

Understanding what your site does, and why people come to it, plays a huge role in whether responsive design is "right" for you.

"How Can I Make My Site Responsive?"

If you've done your research, assessed your site's potetial, and determined responsive design is for you, it's time to find a pro developer.

Tweaking a site to make it responsive can be anywhere from an afternoon task to a month long monster, depending on the content and code on your site. If you're thinking of going with a bargain freelancer, this is not the time or place to cut corners. Trust me, it's a lot less painful to hire a great developer the first time around then it is to ask them to fix the work of a novice.

(For the record, I'm not hating on entry level developers. You guys know worlds more than I do about code. But when it comes to big site implementations, it's important to go into the process with knowlege and experience to avoid costly mistakes).

Developers can adjust the content on your current site to fit appropriately on different devices, or they can advise you on elements you might consider removing to make your site responsive-friendly. Keep in mind, it's unlikely that your current site will be able to remain 100% the same when transitioning to responsive.

If you're interested in learning a little about the technical aspects of creating or switching to a responsive format, check out this infographic from readwrite.

If you have any questions about whether responsive design is right for you, feel free to drop us a line in the comments below! Savvy Panda's expert team of developers and designers have been working on desktop, mobile and responsive sites for over a decade and love to share our experience.

Oh, and one more thing.

I don't think we can talk about chameleons without mentioning this:



4.5 Ways To Drive Leads With Social Media

 

Show Comments