Recently much has been said about responsive web design, as several big sites have implemented this type of design. This article is not intended to be comprehensive, but rather cover what it means to typical site owner.

What is it

Responsive web design can generally be described as one site that is able to look different on different devices. Your site can look one way for a normal desktop computers and full size laptops, but have another look for tablets, and yet another for phones. In short, it’s a way to have one site, that is both mobile friendly and looks great on a normal computer still. We have wrote about mobile before, do you need to do mobile and if so, should you do an app or not. Responsive web design can be added to that list as a mobile option.

How does it Work

Without getting to in depth, there is some new things in CSS that allow developers to do things that are device width specific. So you can make CSS rules for pages and images that will only apply to screens that are a certain size.

Where are the Screenshots

Yup, screenshots make this much easier to understand. For this example, we are going to use a property rental site that Sephone is developing. Below is what it looks like if you go to it with a desktop computer.

On a phone here is what this site will look like.

As you can see it’s the same content, same site, but the content is layout different for different screens. Rather having to zoom and scroll alot on the phone, it is rendered to be the width of the device, howbeit, it does make the page longer.