Gone are the days when Magento developers could safely assume that users would be accessing their sites from the comfort of their own homes on a PC with a keyboard, mouse and high resolution screen. Today, users are just as likely to be shopping online while walking around a physical store – spotting a product that catches their eye and then purchasing it online at a discount.
If you want to make sure that you capture those web savvy impulse buyers, you need to make sure that your site has proper programming and files structure and runs well on any device. This means designing a site that can handle different scree sizes, orientations and platforms gracefully.

The Responsive Paradigm

Responsive web design involves programming and designing and developing a website using CSS to create flexible grids and layouts, and serving different images to different platforms. A user on an iPad should see a different layout to a user on a Blackberry, and someone on a PC should see more rich media than someone on a small-screened, low power smartphone.
The idea behind responsive web design is that instead of having several different site designs targeting different devices, you create a single design that is flexible and, as the name suggests, responsive – it automatically serves up different content, and the CSS rearranges the elements on the screen to match what the viewer is using. When done right, this paradigm eliminated the need for multiple design and testing phases.

The Elements of Responsive Design

Creating a responsive design is simple. Use fluid grids and fluid images to create a layout that scales to match the screen size. Use smart markup to ensure that the layout flows correctly. In addition, define viewpoints to prevent mobile devices such as the iPhone from trying to over-ride your layout and use screen resizing when it is unnecessary.
If you incorporate these elements into your next theme design, you will have a responsive, attractive and easy to use site design.