Changing Breakpoints from the Popup Window?

Beta
#1

Hi!

image
image498Ă—599 15.8 KB

When we open a responsive window for a particular setting, I feel that the natural thing to do is to simultaneously change breakpoints to visualize the design. Right now it is a bit clunky:

  1. Set a breakpoint value

  2. Click to change breakpoint (window disappears, breakpoint not changed)

  3. Click to change breakpoint again

  4. Click the label to make a new change in the responsive window.

As this popup window already contains the same device icons like the ones for switching the breakpoints, it would be great if we could click those to instantly switch to the breakpoint view, right from the opened popup. (Except the one for the current view that resets the breakpoint. But that one isn’t conflicting because the other icons would be clicked to change the preview, and those are right now inactive).

Alternatively, we could use a tiny pin icon or control in the top corner, keeping the popup locked while we adjust the breakpoint, and/or setting preferences to define the default behaviour for this.

But clicking those device icons would be the best solution that would make the whole experience much smoother. :slight_smile:

1 Like
#2

Good point here - we’ll have to think on this one a bit. To be clear, you’re saying it would be helpful to allow clicking the device icons in the bar (to quickly resize) without the responsive inspector controls closing out?

The responsive query UI works similar to a native context menu in that it will deactivate everything else in the app. It positions based on the mouse position as well instead of the label. I can definitely see the added friction here, just not sure at the moment the best way to address it. I’ll mention it to Kory so we can chat through it.

EDIT: Was just chatting with Kory, and we’re going to keep the click behavior of preventing any UI elements from being effected when leaving the responsive controls. Jumping to the different screen sizes is one of the best candidates for some keyboard shortcuts once we can map them in. Unfortunately that won’t be with this release since. Meanwhile, I’ll add a similar cmd/ctrl click option so you can click the actual devices next to the Inspector controls to trigger the live preview sizing from there.

#3

Hi @alexander!

What I meant was that it would be great if we could click those device icons inside the popup. The ones below the title “Template” in my screenshot above.

Right now the only one taken is the one for resetting the values on the current view, but that’s the one we don’t click to jump to a different view.

The other device icons don’t do anything when clicked, and since they visually representat actual screen sizes, it would be much easier to work if they could change the preview.

Another reason is the cognitive load that happens right now, because we need to stop, think and compare the breakpoints inside the popup with the ones on the responsive toggles. That load happenens because we have to change the preview to see the effects of our changes.

After the brain resolves which icon to click to preview our last edit, then even that part isn’t smooth: clicking the responsive toggle hides the popup first, and then it needs to be clicked again.

If those popup device icons were clickable, there wouldn’t be additional load to identify the responsive icon to change the preview, plus the popup wouldn’t get hidden. An overall much better experience. :slight_smile:

#4

Ok thanks! I see what you mean now.

After the brain resolves which icon to click to preview our last edit, then even that part isn’t smooth: clicking the responsive toggle hides the popup first, and then it needs to be clicked again.

In addition to that, there’s another click because the nature of the pop up menu is to allow clicking outside to close it, but not actually trigger anything. This is similar to an OS native context menu. You don’t have to worry about accidentally navigating or changing something else when clicking out. I agree, it does make it harder to trigger a change to another breakpoint.

In its current form we can’t make those clickable because (like you mentioned) when a value is set, clicking the icon will reset the value back to the base or next closest overridden breakpoint. Even though that reset state isn’t always shown, I don’t think we should mix what the actual click action does, otherwise it could feel unpredictable.

I know it’s not the most ideal, but I think keyboard shortcuts and an alternate click action (cmd/ctrl) on those icons is the best place to start for now.

#5

Quick update: As a stopgap until we get keyboard shortcuts, we’ve added a cmd/ctrl click modifier to those device icons as a power user shortcut. That will trigger the preview to resize to the selected size just as if you clicked the icons in the bar.

3 Likes