I’ve shared some of the writings on Responsive Design already.

Here’s an attempt to clarify some of the concepts.

Some Basic definitions:

HTML: Markup. Defining content as titles, paragraphs, images, links, etc…
CSS: Cascading Style Sheets. Works with the HTML Markup. Tells the HTNL how to look. Color, font family, font size, backgrounds, element layout on the page, etc…

I digress… If you don’t know these basics then you are probably not reading this are you? And who the heck and I talking to? Notice the use of word ‘heck’. First time in my life

Responsive and Adaptive designs are being used interchangeably these days. However, if you want to get ‘Technical’, Adaptive methods are methods that use a CSS @media query (or Javascript equivalent) to call a different stylesheet based on the resolution the HTML is being viewed on. On the other hand, Responsive layouts are CSS styles that are liquid and allow for gracious reordering of the HTML elements on window re-size, regardless of the device the site is being served on, in other words, this is device-agnostic design.

Personal experience: Responsive design breaks out of the Mock-up -> Coding model of building websites, because a lot of the design and coding are happening at the same time. Coding responsive layouts can be so complex that there is no point in trying to approach it with a linear methodology. Rather, the designer/front-end developer may start form a general idea or a rough mock-up, and work in a non-linear and fluid way in both coding and design when determining how elements, sizes and margins flow.