Why responsive design?

People visit websites on all kinds of devices — from wide desktop monitors to small mobile phones. A great site adapts to those different screens automatically. That’s what responsive design is all about.

Instead of creating separate versions of your site for each device, responsive design lets you build once, and adjust as needed, so your layout stays clean, readable, and easy to use no matter where someone views it.

It’s about accessibility, usability, and consistency.

Key terms to know

Before we dive in, here are a few terms you’ll see throughout this course:

• Responsiveness: How well a site adjusts to different screen sizes. A responsive site looks good and works well on any device without zooming, panning, or overflowing content.
• Responsive design: A design approach where layout, spacing, text, and other elements automatically adjust based on the size of the screen or device.
• Breakpoints: Specific screen widths where you can preview and fine-tune your design. In Webflow, breakpoints let you make targeted style changes for different device sizes like tablet or mobile while keeping your content and structure consistent.
• Viewport: The visible area of a webpage in the browser — essentially, the screen space available to display your site. Viewports vary by device (desktop, tablet, phone), and breakpoints help you adjust your design for different viewport sizes.

Responsive layout tools

As you learn to design responsively, layout tools like Flexbox and Grid will play a big role. These tools help you control how content is arranged — side by side, stacked, evenly spaced — and make it easier to adjust that layout across screen sizes.

We won’t go deep into layout in this course, but just know: your layout choices help your site respond more smoothly as screen sizes change.

Ready to dive in?

Click Complete & continue in the Course progress box on the right to keep learning.

Need help finding your way around? Learn how to navigate Webflow University lessons, courses, and learning paths, including how to mark items complete.