Intro to responsive design

Learn how reflowing content, fixed sizing, relative sizing, and breakpoints (media queries) help to create responsive designs.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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. You may also 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 three different aspects to responsive design we’ll be covering here:

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

Reflowing Content

Reflowing content refers to content that adjusts its width based on the browser’s viewport width. For example, a paragraph with default settings will automatically wrap it’s content as a browser’s width gets smaller. This behavior can be emulated by dragging the edge of the Designer canvas.  

On the left, the blue drag element on the edge of the canvas is being dragged to the left. On the right, the breakpoint sizes and the respective device is detailed on the bottom of the canvas with a ruler set at 1024 px.

Fixed sizing

It’s important to be mindful when using fixed pixel widths. For example, if you give an image a width of 500px it may look great on a desktop or a tablet. However, when viewing the image on a smaller mobile device, the image width will be stuck at 500px and not adapt to the smaller viewport (usually less than 500px).

On the left, the desktop breakpoint is selected and showing the website layout. On the right, the mobile portrait displays how the website elements would adjust.

Relative sizing

This refers to setting an element’s size relative to other things such as the browser width or a parent element. For example, instead of using a pixel-based size for an image, consider using different units such as %, VW (viewport width), or VH (viewport height). If you use % on an image and adjust the browser width, you can see that it will adapt accordingly while a px based image will not.

The width settings are set to 40 percent. The percentage option has been chosen opposed to the pixels setting. The width settings are highlighted on the Size panel.

Learn more about applying different units to control element width and height.  

Breakpoints

The breakpoints toolbar includes a three dot icon button to add large breakpoints, four different options and canvas dimension details.

Layouts are usually much more complex than managing one image’s width. Using breakpoints (also known as media queries) allows you to not only test reflowing content, but also to modify the design and layout based on different device width ranges.

Three different breakpoints are displayed next to each other with the breakpoint button highlighted for each on the top bar.

Learn more:

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top