Responsive Design

About

Responsive Design, as it relates to web design, is a concept that explores the use of web pages on all devices without actually creating different websites. 

Mobile First

It is now a popular trend with many services now offering a "mobile-first" approach to web design; meaning that the developer would consider how the website would look and feel on a mobile device like a tablet or a phone before editing it for a pc layout. 

When one starts with the desktop platform, one tends to want to take advantage of everything that platform has to offer. An amazing product that leverages lots of great technology is built, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Hence, instead of working down from desktop to mobile, the idea is to work in the opposite direction.

Responsive + Mobile First

With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-needed basis to platforms that can handle them well.

Responsive design is built around the concept of media queries that target specific devices and viewport sizes. With this in mind, you can code up your initial CSS given a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases.

This is likely the opposite of the method that you typically take with responsive design: start big and then reduce. Given the arguments above though, there’s obviously a lot of logic behind structuring your media queries from small to large.