Feedback: 3 larger breakpoints

Please leave feedback on this thread:

below :point_down:thanks!

3 Likes

Great news! Thanks Webflow. It’s nice with an option for custom stuff for the larger screens. Would be wonderful with some options for the smaller ones, since traffic is moving more and more towards the smaller screens:

Any plans to expand the breakpoint interface even more, so we can create perhaps custom breakpoints? Specifically since the tablet mode (991px) only covers some tablets in portrait mode, a lot of websites that are intended for desktop (hover effects and different compositions) end up on landscape tablets as well (around 50% of tablet users browse in landscape), which is no bueno. No news here, obviously. Lots and lots of threads on the forum on this, dating back to 2013, I believe.

Alternatively a device setting, so there’s a “touch based” and “mouse based” “breakpoint” / setting, now with iPad Pros sporting megascreens?

2 Likes

You can just treat anything below the new breakpoint of 1280 as tablet as this is where nowadays desktop resolutions start and design your interface accordingly.

I am still disappointed that the largest breakpoint is at exactly 1920. To me personally this is a huge problem as we are once again cannot distinguish between any of these and these.

You can imagine the usecases for each types of screens are different.

I think you guys forgot that not everyone uses Macbooks with lower “real” pixel width (and even then the first thing I did on my Macbook Pro is to set it for maximum density, which is exactly 1920px wide) and omitted this issue.

1 Like

excellent point not to mention the issue with a tablet/mobile in a portrait vs landscape. And also iPad Pro, iPad mini vs large iPhones in landscape mode…still the same headache and now on top we have to start designing and building websites from the middle? That’s like asking an architect to design and build a 4 story house starting on the 2nd floor…??? I’m very grateful for Webflow team, but this solution seems to be quite a bit backward. Legacy websites should have legacy switch (like we had with IX2) so it doesn’t hinder the evolution into a new usable system, rather than this weird cascade in both directions…

:clap: Finally! This is great thanks!

Now if you can add breakpoints for iPad Pro and landscape tablets too I promise to stop moaning :stuck_out_tongue:

Great progress anyway, this will make a big difference! No more custom media queries for these guys now.

1 Like

Not sure how this is a problem since on existing sites this prompt gets thrown up?

image

This is a warning not a legacy switch. One of the problems Webflow team had to work around was how to make this update work will already existing sites. Their current solution is cascading in both direction. I’m saying that it would have been better if we could simply start at either end (smallest or largest) and have a switch like we had with IX2 to opt in.

That is not quite the way I see it :slight_smile: Nowadays desktop resolution may start at 1280, but if you look at browser viewport stats it’s all over the place, and many, many people view their website in browsers smaller than their max available resolution. Simply going tablet from 1279 and down would create some pretty clumsy designs in my opinion :slight_smile:
Flexibility should be key here, no?

Sure. How would you handle the issue though? I don’t think there is a reliable way of distinguishing tablet from just narrow browser window.

True. My additional suggestion was “touch based” vs “mouse based” input settings. That would be very helpful

Do you mean different set of breakpoints for mouse or touch? As in each breakpoint could be split into mouse and touch based essentially doubling their amount? Also what would happen on a touch enabled laptop?

still the same headache and now on top we have to start designing and building websites from the middle?

In an ideal world we would be able to choose whether we want mobile first design or biggest desktop first, or custom first (somewhere in the middle). There are many different use case scenarios, so you cannot say for sure that biggest desktop first, is the most natural way. It would vary from client to client.

I have no idea how difficult it is to make user selection of default breakpoint possible, but if that is fairly doable, then I’d definitely want it.

But in all cases “somewhere in the middle” is an ok default setting. It is appropriate for audiences who use mainly laptops or audiences viewing sites in office environment. Average size computer displays are quite the norm. Designers often make the mistake of thinking that just because they use the biggest displays available, regular users use the same. Plus, even with bigger displays, some users choose smaller resolutions so as to achieve at least some relief for their eyes.

1 Like

This is fantastic. My one suggestion would be to make 1280 the base breakpoint.

4 Likes
  1. This feature is awesome.

  2. This feature needs some adjusting. Please add a way to delete larger breakpoints, make the changes in larger breakpoints cascade down, or set your canvas in the designer to default to something other than 992px.

I have a 13" screen and added a 1440px breakpoint because I typically adjust the canvas and design from that view. The canvas adjustment resets every time you preview a project and return to the designer, so I figured having a button I can push to go to 1440px is more convenient.

That was a mistake.

The larger breakpoints don’t cascade down, so any changes at the 1440px breakpoint don’t affect the 992px default view. That wouldn’t be a problem if I could click on the 992px default view and then manually change the canvas viewport settings to 1440px while still having my changes apply to the 992px default breakpoint), but when you try to manually adjust the canvas view to 1440px Webflow detects it and forces you into the larger breakpoint. Changes then don’t cascade down and you’re screwed.

I have a janky workaround where I resize the canvas to 1439px and don’t get bumped into the larger breakpoint, but not needing to do that would be nice.

2 Likes

Yes, that was my suggestion. I don’t have ideas for how the UI should be built right off the bat. But seeing as there are very unique distinctions between touch and mouse based interfaces (the hover / tap being the most obvious one, the distance from which the user interacts with their device being another) it would make sense to at least allow us to create custom settings imo :slight_smile:

1 Like

I appreciate the update, it takes a lot of work off my shoulders and that’s great. It’s a difficult issue - some devices will always be problematic unless they become standardized in some way (also I really do not understand why companies keep making devices with wierd resolutions and aspect ratios - what’s the point of having a bigger resolution if nothing looks good on it?!).
Theoretically speaking custom breakpoints would be the most futureproof solution, but I can see that there would be a lot of headaches with the implementation of that so I’m happy with what we got.

1 Like

Your workaround just helped me a great deal. Thankyou

1 Like

change the breakpoints of the tablet version from 991 to 1024 !!! many people demand this change, because ipad pro tablets have a width of 1024.

2 Likes

Another vote. Why on Earth are 1024px width tablets being given the desktop view?

That has not changed and I don’t see exactly why not. I understand changing breakpoints is an absolutely “disruptive” change for users who really focused on that 991px to 1024px crowd, but for everyone else…

Have you all used Webflow sites at 1024px? It’s not pretty. Give them the tablet view, not the desktop view.

Try to find a 992px desktop user. Gosh, is that a dang puzzle or what? Even a 1280x720 viewport at 125% zoom doesn’t go that low (and sits neatly at 1024px: I cannot imagine anyone using a 720p display set at 125% is looking for a desktop view).

TL;DR Change the desktop breakpoint to start at 1024px, not 991px. Those extra 32+1 pixels are a major hindrance to tablet users and not at all how people approach the web.

1 Like