Lesson Weekend

According to Statista, mobile internet traffic made up 52.64% of global online traffic in 2017. They also report 3.8 billion active global mobile users in 2018. It's overwhelmingly clear that web users will continue to view content on a variety of screen sizes. As such, websites need to ensure their content is presentable on all screen sizes more than ever. This is generally the responsibility of a front end developer.

In this lesson we'll discuss responsive web design, what it means, and observe what it looks like in a variety of example sites. Then, in the next lesson we'll review how to construct the media queries necessary to make our own sites responsive.

Responsive Web Design

The term responsive web design, often shortened to responsive design was originally defined Ethan Marcotte in his 2010 piece A List Apart. He stated:

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them...In their book Interactive Architecture, Michael Fox and Miles Kemp described this more adaptive approach as “a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.” Emphasis mine, as I think that’s a subtle yet powerful distinction: rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.

This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?

While Marcotte's original statement is rather dense, the idea behind it is simple: Users should have the same cohesive experience on a site regardless of their viewport. To best do this, the site layouts should flexibly adjust to best display content depending on viewport size. Hence, responsive design was born.

Viewports

That brings us to another vocabulary word: The viewport refers to the user's visible area of a web page. It varies depending on device. For example, tablets usually have a smaller viewport than desktop or laptop computers. Mobile phones have a smaller viewport than tablets. And smartwatch devices have an even smaller screen to view content on.

Responsive Web Design In Action

Since Marcotte's coining of the phrase in 2010, nearly every major site has become responsive. Check out the following quick examples of a few in action. Notice how their layout and design transforms as viewport sizes change:


Check out some responsive designs in your own browser too. Try visiting a few of the following and manually adjusting your browser window size to observe how their layouts change:

Pretty cool, right? In the next lesson we'll review how we can use media queries to create similar responsiveness in our own sites.

Lesson 17 of 36
Last updated more than 3 months ago.