What is Responsive Design?

Responsive design is all the rage as of lately and just like I explained to you What is inbound marketing, I want to answer another question for you today: What is responive design? So let's get to it.

First, an intro to the problem

Ever since the beginning of the Internet, websites have been displayed in a variety of screens. Mostly different sizes, but eventually we'll have other display mechanisms, like a 3d system or a virtual display, we'll get into that later.

Almost everyone that visits a website now does so on a tablet, a phone, or a traditional monitor like your desktop monitor or even a tv. Back in the day, the sizes for screens were more or less uniform. You had a uniform ratio of maybe 4:3 (like old-school televisions). Then wide-aspect became popular and over time, we've added so many different sizes and ratios to our display systems that it has become nearly impossible to keep track.

As a designer, this can be a nightmare because something that you built and looks awesoem on your screen may not look so good on someone eles's screen. Put aside color variances, and pixel sizes and resolution, the size of the screen makes a huge difference. I've experienced this first hand. I have a big 27" monitor with a high-resolution. So when I make graphics, they look awesome, but if I then go to a smaller screen or one with less pixels then it may not look so good.

Previous attempts at solving this problem

Designers, programmers and web geeks have known about this problem for a while and several solutions have been put in place to address it. For example, you could have your webserver detect if someone is coming from a mobile device, and instead of showing them your normal website at http://www.example.com you could show them or . Functionally this is an acceptable solution and many current website do this; Facebook, Twitter, and others. But this approach requires a lot of technical ability and resources to maintain.

Another approach is to have your website serve an entirely different website but on the same domain. You can accomplish this easily with a plugin if you are using WordPress and the plugin pretty much takes care of all the technical details for you. You just need to configure the plugin, adjust the settings to your liking and you're done. It's also a good approach but the downside is that you require some expert level knowledge if you want to customize the experience for mobile as much as you have for your desktop.

There are also other less popular approaches to fixing the problem, like having javascript re-write the page on the fly when a mobile device is detected, or having a totally different application serve as the website in certain scenarios. But these aren't very popular and they're so laser focused on a specific issue that I won't talk about them much.

Both the first two  solutions I mentioned are still in use today and I don't think there's anything wrong with them. I use them from time to time depending on the application. But responsive design offers another layer of customization.

So finally, what is responsive design?

So the newest solution to the problem I mentioned earlier is to make your web applications or websites be responsive. This in short, as the title implies means that the design isn't static but instead it "responds" to its context. Primarily and today, the context is really just the size of the screen. One day when we have a different system for viewing or interacting with websites and applications, the experience may be totally different but the idea will be the same. The application and or website will adjust to the location where it is being accessed from.

[pullquote position="right"]One website, multiple versions. - Copyblogger[/pullquote]

To explain a little bit more in detail, when you find a website that is responsive, you'll notice that the overall look and feel of the site is similar across your big screen browser, your iPad or tablet, and your iphone. Notice I didn't say that it's the same. But your colors, your text, the layout and the content is easily accessible in a way that makes sense for that device. This website is responsive, although I've not adjusted it to be perfect, the theme I'm using is responsive out of the box. (side note, don't use this theme, I don't recommend it but I'm stuck with it until I have time to rebuild)

The main thing being done with responsive design is adjusting the elements of a website to fit the screen, or morph entirely so that the visitor can find the information they need. It's easy to test and see what I'm talking about. One of the cool things about responsive design is that it reacts in real time, there is no need to reload a page to see the differences.

For example. Right now, on this blogpost that you're reading, take the bottom right hand corner of  your browser and make the window smaller, make it narrower and do it slowly and you'll see how things get moved around for you as you reduce the window size. After you get to certain width, things start changing completely, for exmaple, you'll notice that the Menu at the top changes to just "navigation" and you can then click on it to have the menu items drop down. You'll also notice at this point that the sidebar is no longer visible and has been moved to the very bottom of the page instead (scroll down).

So how do you get responsive design on your website or blog?

Currently, this is still a new technology that has only been adopted by cutting edge designers and agencies so you'll pay a pretty penny to have this applied to your website. But you can also find some really great themes that are responsive out of the box and do a really good job at this. Newer Studiopress designs have responsive built in, and in the free side of themes, a theme called Responsive shot up to the top of the charts recently, it does a really good job of helping you implement a responsive design. So  you can pay someone to do it, see if your theme has an update that implements responsive, or you could move to a new theme that is responsive out of the box.

So What's the Big Deal?

When you have a responsive design, your website is more accessible. We live in the age of mobile and people are accessing websites on mobile devices more often than they are from their desktops. Many times people will leave the site or close their browser if the website doesn't load and fit their screen. If you don't use responsive design, your website will not load or it will load in a way that is so small on your screen and you have to pinch and zoom a lot and scroll all over the screen to see what you're looking for. The website experience without responsive design is pretty bad in most cases and bad experiences will make your visitors leave and probably not come back for a while, and by a while I mean ever.

When you get a chance, invest some time in learning and hopefully applying a responsive web design to your website. I think you and your readers will appreciate the efforts. I have to make a few adjustments myself, but I'm 3/4 of the way there.

Here are other resources you may find useful:

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display. Responsive Web Design (Thanks Steve!)

Wikipedia says this about Responsive Web Design: Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Responsive Design on Twitter

Responsive Design Newsletter: A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.

Mobile Responsive Design 101, an essay by Copyblogger.

Designing for a Responsive Web, by webdesign tuts+

On a side note, this is day #3 for the 31DBBB that some of us are running on my blogging group. Today's task is to promote a previous blogpost so I'm promoting my previous post, the list of 10 reasons nobody ever told you of why you need a website.