Intro to Responsive Design

 

Lesson info

When you visit a site on your mobile device, you may see a desktop version of the site crammed into a smaller screen, forcing you to zoom and pan to see any content. Or you might land on a watered-down "mobile version" that lacks the content and experience that makes the desktop version superior. Hopefully, though, you see a responsive website — a design that reflows and repositions content based on the width of the browser. 

There are 4 different aspects to responsive design we’ll be covering here:1. Reflowing content2. Fixed sizing3. Relative sizing4. Breakpoints (media queries)

  1. ‍Reflowing content
  2. ‍Fixed sizing
  3. ‍Relative sizing
  4. ‍Breakpoints (media queries)

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

When you pull out a mobile phone and load up content on the web, chances are, you'll run into one of three different experiences: (1) you get the desktop version of a website, usually scrunched down so you have to zoom in and pan around, (2) you see a separate mobile site — sometimes this is good — but a lot of times, it's a watered-down, mobile version that lacks a lot of the content that makes the desktop version superior, or (3) a Responsive Design: a design that reflows and repositions content based on the width of the browser.

We're going to touch upon three different things here: Reflowing Content, Relative Sizing, and Breakpoints (or media queries).

Let's start with Reflowing Content. This is a fairly simple layout with a heading and a paragraph dropped in here. The image, though, has a width of 500 pixels. If we adjust our viewport width, we can see that the text reflows. But our image width, which is stuck at 500 pixels, doesn't adapt.

That leads us into Relative Sizing. (Setting size relative to other things) Here are two images. The first one's width is set using pixels. PX. And the second one is set to a percentage. Its width is based on the size of its parent element. So if we adjust our viewport here, we can see that the image set in pixels stays as is, while the image set using a percentage adapts accordingly.

Now we often check how elements appear on different types of devices. And there’s no exact width for every type of device, so we click and drag to test fluidity. But here we can see that the image set in pixels is actually cut off at this width.

Layouts can get more complex than this. And that's okay. Because Breakpoints (or media queries) are a great solution — something that lets us not only reflow, but modify the design and the layout based on the width of our viewport.

First thing: Media queries are based on the viewport width. When we hit a certain width, we can adjust styling on these elements to make the layout more appropriate for that particular device width. In other words, media queries are checkpoints. These checkpoints give us spots to adjust the styling of these elements.

And the second thing: We're not creating new elements. These are the same ones. But we can adjust styling on them as we move through these media queries — these Breakpoints.

So. Responsive Design is all about Reflowing Content. Using Relative Sizing in some cases, and using Breakpoints (or media queries) to adjust the styling and layout of our designs on different devices.