New Feature: Canvas Resizing

Hey guys, we have another new feature for you that I think you’ll find really useful when creating responsive designs that work on a wide range of devices. We call it the “canvas resize handle”, and it’s available now in the main Webflow Designer interface:

You can drag this handle (or any part of the edge of the canvas, actually) to preview the way that your website will look at various resolutions in that “device range”. For example, when I’m in “Phone Portrait” mode, I can now resize the canvas to preview what the iPhone 6 Plus (which has a 414px horizontal resolution) would display:

Previously, our design for the http://interactions.webflow.com/ page was optimized for the previously-standard 320px iPhone resolution, but we can see now that at other resolutions the design is not ideal. The word “Interactions” gets cut off in certain lower resolutions, and it would be great if we could fix it.

For this particular case, I’m going to take advantage of CSS support for setting font size (and line height) relative to the viewport width. You can read more about the vw unit and this general technique here, but please keep in mind that it’s not supported in IE9 and below :confused:

Using the canvas resize handle, I can make sure that my new 12vw value for Font Size and Line Height looks great across all resolutions in that media query:

Voila! Now the “Interactions” word isn’t cut off on really small devices, and the design looks better on larger devices like the new iPhone 6 Plus.

We’re still tweaking this feature, so please send us any feedback and suggestions that come up as you start using it.

45 Likes

The feature is great! It’s time consuming to test on Nexus and S5 and it takes room on my desk (:

The very useful detail is the built-in list of devices and their pins in the ruler.

10 Likes

very convenient. Great job WF Team! =D

7 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
Please create a new linked topic if you have further questions.