What Exactly is Responsive Design?

by Jason Unger, Founder

Insights / Website Design / What Exactly is Responsive Design?

Designing websites used to be relatively simple, at least when it came to who you designed for. You designed for the most common browsers and screen sizes and, if you were really nice, you’d make sure the site was at least usable in the less popular options (Opera, I’m looking at you).

As standards changed, like monitors growing in resolution from 800×600 pixels to 1024×768 pixels, so did your design. But at least one thing was consistent: your users were connecting to your website from a desktop or laptop computer, so you generally knew what your site would look like to them.

Today, that’s far from the truth. There’s so many ways to connect to the Internet and view a website that we’d spend all day counting devices. In my house, we have:

• A desktop
• A laptop
• An iPhone
• An iPad
• An iPad Mini
• A Kindle Fire

… and probably some more I’m not thinking of right now.

Each of these devices has a different screen size, a different resolution and a different user experience. You don’t interact with a website on a desktop the same way you do on your tablet or on your smartphone.

Mobile apps and mobile sites used to be the answer for this, but they’ve always been dumbed-down versions of the desktop experience that do a poor job of replicating what users expect (and what’s useful to them).

Enter responsive design.

Responsive Design: The Right Design for Any Device

Rather than creating separate designs for different devices, the approach of responsive design is to create a dynamic site that responds to the size and experience of the user’s device.

In a great article from A List Apart that introduced the idea of responsive design, Ethan Marcotte explains the theory as so:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

Here’s an incredibly simple example from YouTube, showing a responsive site’s design changing in response to the size of the window its being viewed.

https://www.youtube.com/watch?v=9EqAVrpVxNw

You can check out a responsive site in action by opening up our site on your tablet or smartphone, or simply re-sizing the browser window.

Why Should I Care About Responsive Design?

There’s a clear cut explanation about why responsive design matters to you.

More folks than ever are using devices besides their desktops or laptops to connect to the web, a responsive design allows you to give them the optimal experience without creating unnecessary mobile apps or mobile websites totally unlike your desktop site.

If you want to ensure that your audience is getting the best view of your site no matter what device they are on, a responsive design is the way to give it to them.

While it’s usually easiest to implement a responsive design when you’re doing a complete design of your site, it is possible to make your site responsive after-the-fact (it just may be a little time consuming). When we did the WordPress migration for the Daly Computers, Inc. website, we also made it responsive, making the navigation easier-to-use on mobile devices and ensuring the content displayed its best at different screen sizes.

Interested in finding out more about a responsive design for your website? Give us a shout and we’ll help you determine what makes sense.