Join the Webstudio community

Updated 2 months ago

Preview Mode Button should be separate from Design and [new] Content Buttons

At a glance

The community member who created the post suggests having a separate preview button instead of a dropdown menu, as the preview mode is used more frequently when designing/developing. The comments discuss the pros and cons of using keyboard shortcuts versus mouse clicks to access the preview mode. Some community members suggest using cmd+shift+d as a shortcut to toggle between preview and design mode, while others prefer the direct click on a preview button. The discussion also touches on the potential release of a new feature and the need to remove access to it before the public release.

Useful resources
While it might seem nice to have them in a single dropdown menu at first glance, the preview mode button is used much more frequently when designing/developing. It's a bit annoying to have an extra click every time we need to preview something. My suggestion would be to have a separate preview button for better UX, even if it takes up an extra ~32px of UI space.
Attachment
Frame_43.png
O
v
28 comments
why not use a keyboard shortcut?
when youuse something so freqently, isn't using mouse also tedious?
it's good that it has a shortcut, but two things come to mind in this case:

  • Too many shortcuts add up. Most of them might be useful, but people tend to stick with their favorites for their workflow.
  • If you are styling/adding elements/etc. and you already with the hand in the mouse, the most natural flow to preview these will be just to drag and click the cursor to the preview button. It's the most non-friction path, compared to taking your hands off the mouse and clicking two keys
"the hand on mouse" problem is interesting, that would mean people only use shorthands available under the left hand?
to preview one has to remember only one shortcut, its a toggle, cmd+shift+p to get in to preview and back
wait a second, you can actually press cmd+shift+d to toggle design mode instead
that is your left hand that's already on the keyboard
I hear what you mean

but for me, It's not about how easy is to toggle to preview mode with a shortcut, but how "difficult" is to go to preview mode the way I was accustomed to.

I might being picky and I can only say from my perspective, but having an extra click just to preview is something I've found out to be slightly annoying
And look Oleg,

I'm just saying this because I know you guys care about UX and feedback. I really like Webstudio and it's my favorite website builder by far so if I have the slightest chance to contribute, I will say it even if something we might not agree on
just to make sure, did you get it that the shortcut with +d gets you into preview and back to design mode in one press with left hand?
ctrl + shift + d. this is what happens:
how did you get access to content mode?
i dont know. i just create a pnew projec tot show you
where? in production? on webstudio.is ?
i create a new blank project in my dashboard. heres the link of it in the designer mode: https://p-adadc58a-64af-46d4-a292-3b7f7f191c5a.apps.webstudio.is
that shouldn't be public yet, but in any case when you also have a build mode you would need to switch to preview mode then press cmd+shift+d and now you can toggle between preview and design mode
do i need to do something on my end to remove this access to content mode until public release?
I guess you are having a feature flag set in localStorage.features
please let me know if I need to take any action
it doesn't matter, we will release this soon anyways
I assume you set the feature flag yoursef, we are not doing it on our side
so if you did you would need to run in console localStorage.removeItem('features') and then reload
but didn't do anything intentionally
I accessed this, so something may have happened
Attachment
image.png
we are going to revert this menu now back to how it was, we got some other ideas on how to solve this
How do you find it now?
Add a reply
Sign up and join the conversation on Discord