Responsive web design for beginners – Webflow tutorial (using the Old UI)


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.

6 comments

  • Scott Gaul

    Nice video – thanks. I've been looking for a video like this to give to my client – a video that explains to my client what Responsive Design is. I noticed that nearly all the videos out there are for website designers. I think someone could create a whole set of videos for the Clients. So a website designer doesn't have to explain to a Client what's what.

    Reply
  • --

    These videos are excellent for a refresher, thank you. I took a class on beginning web design and this is helping me remember a lot of what I learned. 👍👍

    Reply
  • Noah Glassman

    How do you implement resizing and breakpoints into already constructed rotational parallax in layered images?

    Reply
  • sadok tlija

    i'm new to webflow and i don"t know if i should use percentage or px to get responsive design

    Reply
  • SashaRichterova

    amazing pace, simple to understand, gets to the point and is beautifully made. thank you.

    Reply
  • Alex Furley

    yeah but when i change an element on one 'media query' it changes on the rest of them..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *