Intro to Responsive Design

 

INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator

Navigator

New

2:45

Element Basics

Element Basics

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Navbar

Navbar

New

9:38

Slider

Slider

New

4:56

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

States

States

New

2:47

Layout

Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Padding & Margin

Padding & Margin

New

2:48

Display Settings

Display Settings

New

2:54

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Positioning Overview

Positioning Overview

New

1:48

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

Intro to Breakpoints

Intro to Breakpoints

New

INTERACTIONS CORE CONCEPTS

INTERACTIONS CORE CONCEPTS

New

Triggers & animations

Triggers & animations

New

4:31

CMS & Dynamic Content

CMS & Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

Intro to Webflow CMS

Intro to Webflow CMS

New

2:02

CMS Collections

CMS Collections

New

2:05

Collection List

Collection List

New

3:33

Filtering Collection Lists

Filtering Collection Lists

New

2:47

Collection Page

Collection Page

New

3:01

Using the Editor

Using the Editor

New

2:22

CMS Collection Fields

CMS Collection Fields

New

Plain Text Field

Plain Text Field

New

0:51

Rich Text Field

Rich Text Field

New

1:16

Image Field

Image Field

New

1:24

Switch Field

Switch Field

New

0:58

Reference Field

Reference Field

New

1:11

Multi-reference Field

Multi-reference Field

New

2:31

new course
CSS grid landing page tutorial (36min)

Lesson info

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)

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

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.