Designing for larger displays in Webflow — Web design tutorial

Designing for larger displays in Webflow — Web design tutorial


Until today, testing your design
on a 27-inch iMac required a 27-inch iMac. Finding a large display for testing can mean a journey through the elements to the Apple Store, that is if you don’t have an iMac right
in front of you. What’s worse is forgetting to publish before leaving, meaning more time, more travel, and, of course, time travel. What if there was a better way? What if we could preview what things would
look like on larger displays from the Webflow Designer? From the top-left, not only can we preview
the width of the viewport, but we can click in and modify that view. Want to see what the design might look like
full-screen on a 27-inch iMac? Type in 2560, Enter, that’s it. Notice how each change we make essentially
affects the scale. Setting the value to 50% will show what things
would look like on a viewport twice its size. Now. How is this different from just adjusting
your browser zoom or publishing your site and doing the same? Well, there’s nothing wrong with doing that
on a published site, but scaling your visual controls in Webflow can make them really tiny. So this ensures everything is clean and consistent. And when you’re testing in Preview mode? Regardless of your canvas size? You can drag across all breakpoints from desktop,
to tablet, to mobile devices, all the way down to the TI-83 Plus. That’s resizing your canvas in the Webflow Designer.

About the author

Comments

Leave a Reply

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