Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. For example, when a user accesses a site on their desktop, they are getting the full view of the site. But when that same user goes to visit the site from their smartphone or tablet, the site will retract to fit on the smaller screen. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

Mobile Usage is Increasing.

Take a step into the outside world and you’ll definitely notice a lot of people on their mobile phones. In fact, it seems that just about everyone is attached at the hip with their smartphone. For some reason, however, there are many businesses who have not yet picked up on this trend. Maybe they could use the following stats from Smart Insights to convince them how much mobile usage has skyrocketed.

• 58% of all US consumers already own a smartphone.
• Over 1.2 billion people access the web from their mobile devices.
• No one screen size has more than 20% of the market share.
• 60% of mobile shoppers use their smartphones while in a store, and another 50% while on their way to a store.
• Almost half a billion tablets will ship in 2013 and 2014 alone.
• Tablet users spend 50% more than PC users.
• 95% of smartphone users have searched for local info.

The Language of Responsive Design

Marcotte’s article mentions a few basic terms of which we should be aware.
Fluid Grids. As a fluid alters its shape to accommodate its container, the design will continue to adapt to its environment regardless of the screen size on which it is being viewed. With a fluid grid, you have no orphaned text or awkward re-wraps, no ungainly image placement or unwanted stacking.
Layout agnostic. A layout agnostic design can function without knowing in advance on what device, resolution, or screen size it will be viewed.

Media Queries. A media query allows not only identification device classes on which a design is to be rendered but to make specific inquiries of the device’s physical characteristics. When a query detects that the user request is coming, for example, from an iPhone (480×480 pixel res), it will be able to adapt to the appropriate screen size and resolution, or, if unable to do so, ignore the link. Media queries, as Marcotte points out, are not limited to links but can be incorporated into cascading style sheets (CSS).