What is Responsive Web Design. History and Why You Should Use It

Responsive design is a practice that allows a website’s pages to reformat themselves depending on which device they are being displayed on. This ensures that whether the content is viewed on a phone, tablet, or desktop computer, the website will remain user-friendly. With more people using their smartphones and tablets to browse the internet, it has become increasingly important to create a website that works across multiple platforms.

History of Responsive Web Design

Responsive web design was a term coined by Ethan Marcotte in a paper on “A List Apart” issued on May 25 2010. In his article he describes how rapid change in the landscape of designs due to the growing number of mobile users and how designers should cope with this change. He proposed that the only way forward with these changes is to have flexible images, fluid grids and media queries.

Ethan Marcotte is a talented web designer who was inspired by John Allsopp’s article, “A Dao of Web Design”, where Allsopp encouraged designers to embrace the flexibility of the web, play with its strength and should go beyond the controlled pixel perfect print. Allsopp’s article showed Marcotte that the web can be a place where designers can do amazing things.

Marcotte then described the theory and practice in his 2011 book entitled “Responsive Web Design”. Even before Marcotte coined this term, a lot of designers felt the need of a more flexible platform for their designs. Jeffrey Zeldman in his book “Designing with Web Standards” encouraged web designers and front-end developers to drop their table layouts and create more CSS based web designs.

The need for more flexibility is felt by the web design community and Marcotte’s book is just one of those formative sets. Marcotte’s idea of adapting to change calls for a different approach in designing a website and that is to increase user’s experience by creating a design that can suite the endless number of devices and modern browsers.

Soon enough, the concept of responsive web design became so popular that it was labelled as one of the top web design trends of 2012 by various magazines.

The Technical Aspect of a Responsive Web Design

Media queries are used to apply a set of conditional formats to the design. The min-width feature sets a particular style format if the browser falls under a certain break point. A break point is the part of your media query that specifies the screen size which the style declaration will be applied upon.

Most beginner designers define their break points with the exact width of the devices that they are targeting. However, to optimize the break point feature, one should start with the smallest view of the site and slowly expand the site view until it comes to a point where the design fails to give the optimum layout for that particular screen size. That size should be your break point.