What is responsive web design?

Responsive Web Design is making a web site's design adaptable in order to be both aesthetically pleasing and easy to use regardless of whether the device being used is a desktop, tablet, or phone. Most commonly the width of a device's screen will trigger a change to the overall layout of the page in order to create the best possible experience for the user given the screen size.

For example, if you are viewing this website on a desktop, try reducing the width of the viewport to 740 pixels. You will notice that the navigation bar on top will dissapear and be replaced with a "hamburger" icon on the upper right corner of the screen. This decision was made in order to reduce clutter on smaller screens and improve the user experience for those interacting on a smaller viewport!

Mobile First Design Philosophy

It is generally best practice to first design the web application with the smallest screen size in mind. Coming from a background in manufacturing, I have had the luxury of lean six sigma methodologies being forcefully ingrained into the very fiber of my being. What does this have to do with mobile first design? Well lean six sigma's leading principle teaches us to eliminate waste above all else; designing our web application on the smallest of screen sizes encourages us to think about what content is most important the user due to the limited space -- in other words eliminate waste.

Once we have prioritized the importance of our web applications content, scaling the design to the largest of desktops becomes easy. Generally, this approach will require less time overall to build the site and result in a much better experience as a programmer.