As the name suggests, Responsive Web Design responds to the user’s viewport, device, or platform. Essentially, it’s a design that can attractively fit inside any screen resolution. Responsive web design is currently already going beyond this definition, but it is still traditionally recognized by three primary concepts described in Responsive Design Best Practices:

Fluid grids – An arrangement or organisation of content lacking a fixed width, which is composed of intersecting vertical and horizontal lines. This grid is used to structure content in a predictable and consistent manner by adjusting the size and positioning of the elements contained within.

 

Flexible images – Any visual content or media that adjusts to fit a user’s screen size. Usually these are images placed within a flexible grid that has the max-width CSS rule applied at 100 percent. In layman’s terms, this prevents images from being larger than the grids in which they’re placed while also allowing images to resize without sacrificing any of their aspect ratio. To avoid slow loading times, designers can compress the  images’ resolutions when displayed on smaller devices. Another method is to set the width as a percentage of the width of the page as a whole.

 

Media queries – A CSS3 module that controls how the styles within the media attribute are applied. Different styles are applied according to a number of device specific qualities such as screen width, height, orientation, etc.

 

These cornerstones form the foundation of what we understand as Responsive Web Design. There are, however, other associated ideas which have become more or less synonymous with RWD. Mobile-first approach, progressive enhancement, and unobtrusive JavaScript are current principles that will certainly carry over into the new year.

It will be interesting to see how much the term comes to symbolize in the future. Right now, people are already confusing the term with the more breakpoints centered, Adaptive Design.

Recently, there has even been talk of expanding the definition to include taking advantage of unique device capabilities (such as specific commands on a touch screen).

The definition, perhaps not ironically, is quickly becoming as fluid as the concepts it describes.

 

Why continue with responsive web design?

The diversity in devices used to browse websites is only growing larger, and it has become an expectation that users take for granted when exploring their preferred destinations on the web. Your design must respond to the user’s viewport if you want to deliver even a baseline acceptable experience.

More to the point, RWD is the preferred method of making a website more accessible by virtually everyone:

Users don’t like dealing with a redirect, and downloading a dedicated app is a hard sell when they’re dealing with limited mobile disk space.

Multiple websites for a single domain become costly to maintain, and difficult to update as well. When you add an extra code base, you also add more maintenance cost in the long-run. You’ll either need to deal with twice the work or use a server-side solution, both of which are more expensive than a responsive or adaptive site.

A well implemented responsive design, on the other hand, addresses all of those concerns. If a single set of images, grids, and the like are automatically resized to fit the user’s viewport, then the UX is by definition more consistent than switching between two separate sites. And if you only have a single code base to maintain and update, it’s not going to cost as much money nor take as much time.

The advantages of RWD are immediate, and well documented:

• Increases your audience, sales and conversion rates. According to a study by the Aberdeen Group, RWD sites achieve 11 percent more conversions than non-responsive sites on average.
• Forces you to prioritize content for each viewport (especially smaller screens), which inevitably makes for a stronger site.
• Truly future-proof since you don’t need to obsess over every new device screen size
• Improves your SEO: Google officially recommends responsive sites.
• Gives users uniform quality — no one wants to be a second-class citizen.
• Enables you to be detail oriented, which is great because (if you’re a good designer) you care about details.