Responsive Web Design for Dummies

Responsive Web Design for Dummies

In this article we’ll cover the concept and what it can mean to you, while skipping over most of the code speak. Let's take a look at the advantages of cleaning the slate and putting in place a responsive design.

Why does your company have both a desktop website and a separate mobile site?

If I had to guess, your answer will be, "because we needed to reach people on mobile devices and our regular (desktop) site is too complex."

That's what most people would say, I’d imagine. But perhaps what you really mean to say is, "Because we don't want to overhaul our long-running desktop site to make it work on mobile devices."

While that's perfectly understandable, you're probably up to your neck in managing two (or more) sites, making sure that separate content is properly formatted for each type of device, that the content itself speaks directly to the mobile user or desktop user as applicable, etcetera. In other words, you're using two stones to kill one bird. It's supposed to be the other way around.

Your clear alternative, if you've had enough of dealing with two separate websites, is to consolidate both your desktop and mobile sites into one responsive solution. In doing so, you'll admittedly give up some degree of personalisation of your websites, but you'll get a lot more mileage out of your content.

A call for response…

Responsive web design is a big deal because, according to most sources, there will be more mobile internet traffic than desktop traffic in the coming years. Since responsive web design - built on HTML5 and CSS3 - will allow one website "product" to reach every possible device, from the iMac to the iPhone, the Chromebook to the Nexus 7, and everything in between, responsive web design streamlines your processes and focuses your digital solution budget in a single direction.

The great technical advantage is that responsive designs "read" the incoming visitors' devices and scale the website to fit their screen. This differs from the way you may have been using browser feedback to redirect the user to a separate mobile site. In a responsive design, the content remains the same across all devices, but the appearance changes to play nice with all devices.

What makes responsive web design helpful?

Responsive web design helps you overcome many of the problems that have historically plagued websites, in the following ways:

  • Images (and other visual elements) automatically resize to fit on all devices
  • The user experience has greater consistency ("parity")
  • Less complex on the backend - reduced databases, for example
  • Improved load times (that's a biggie!)
  • Improved appearance in search results
  • Touchscreen implementation

The bottom line is that responsive web design is more flexible than the alternative. With a market flooding with new and more powerful devices all the time, it's only going to get harder trying to format web designs to fit each individual platform. Responsive web design is tailor-made to address that concern.

Is responsive web design right for you?

The bottom line?

You may be holding off on switching to a responsive solution because you've had your existing desktop site for so long, and have invested so much into it. You've probably even more recently implemented a separate mobile site, which is an expense that is fresh in your memory. But a responsive website will propel your brand forward, allowing it to change with the times. With the increasing demand for flexibility on the web, spurred on by the rise in mobile traffic, now is the time to bite the bullet and make the switch to a responsive web design.

How do you feel about responsive web design? Have you made the switch? If so, what has been the result?

Let's Start a project. Get in touch!