Creating memorable, user-friendly experiences that look stunning and feel seamless across any device is the name of the game — which means designing “Responsively”.

But how do we design “responsively”?

To put it simply:

• We make elements scale and position themselves fluidly…

• And we make our layouts adapt to drastically different viewport sizes — like Desktop, Tablet, and Mobile.

Imagine creating one design that automatically adjusts to any screen size, shape, and orientation— so no matter what device, visitors have the same great experience.

And since over half of all web traffic now comes from mobile — search engines like Google prioritize responsive sites, so if you wanna maximize the chances of your site being discovered organically — designing responsively is a no brainer.

For the rest of this chapter, we’re going talk about to use Framer to design responsively — using the fluid layout properties we talked about earlier in this course — combined with something called “breakpoints” to adapt our layouts so they never break — no matter how big or small a visitor’s viewport is.