What is Responsive Design?

Posted by Unknown at 10:49 AM Read our previous post

Have you asked yourself, “What is responsive Web design?” Responsive Web design is an approach whereby a designer creates a Web page that “responds to” or resizes itself depending on the type of device it is being seen through.  That could be an oversized desktop computer monitor, a laptop, a 10-inch tablet, a 7-inch tablet, or a 4-inch smartphone screen.
Responsive Web design has become one of the hottest trends in 2013.  This is due in part to the  growth of smartphones and other mobile devices. More people are using smaller-screen devices to view Web pages

What is Responsive Design?

Wikipedia describes responsive design as follows:

Responsive Web Design essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries...with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.

What Does Responsive Web Design Look Like?

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

Let’s take a traditional “fixed” website.  When viewed on a desktop computer, for instance, the website might show  three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted.  The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation, or turned sideways for landscape view.

On a tiny smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on smartphones if they are graphics heavy.

However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically.  Or possibly the  user would have the ability to swipe over to view other columns.  Images will resize instead of distorting the layout or getting cut off.

The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.

How Does Responsive Web Design Work?

Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.


If you’re like our clients, you want your website to be mobile-friendly. You may even have heard the term “responsive design” tossed around in tech-savvy business circles.

Smartphones, tablets, and other mobile devices are rapidly becoming a primary web content platform for many people. Web developers are responding to these changes by designing content that can be easily viewed on any device, an approach known as “responsive design.”

Websites that are built to be viewed on mobile devices and widescreen monitors as well as traditional PCs are referred to as having “responsive design,” because the site design “responds” to the size of the browser display in which it is being viewed.

Why Small Businesses Need to Switch to Responsive Web Design

Many sites are seeing larger portions of their web traffic coming from mobile devices; in December 2012, Mashable.com reported that 30% of its web traffic came from mobile devices, and they anticipate reaching 50% by the end of 2013.

If you’re deciding whether to upgrade your business website to a responsive design, it’s important to consider the expectations of your customers or clients. In certain industries and among certain demographics, cutting-edge web design is expected and use of mobile devices is high. Another powerful tool in making that decision is Google Analytics, which provides data on what portion of your web traffic comes from mobile devices and other details.

If you want to know more about responsive design or are looking for some basic technical information (e.g. about fluid grids, flexible images, and media queries), there are some great resources out there. As usual, the Wikipedia entry is a good place to start, but here are a few useful blog posts on the topic as well:


Why 2013 is the Year of Responsive Design (Mashable)

Beginners Guide to Responsive Web Design (Treehouse)

Responsive Web Design: What It Is and How to Use It (Smashing)

Credit: smallbiztrends - Videodesign