Device previews in synced browser tab?

Question

Webstudio looks like a great choice for complex presentation or portfolio websites which aren't templated. One aspect, however, is quite a limitation: The canvas and also preview mode cannot represent what exactly will be visible on your initial screen.

Sites that use scroll snapping and have clearly defined “slides” are a great example – here you never see a realistic view of your work within Webstudio. Interestingly, you get that high-fidelity preview when coding and watching your site in the Browser.

I wonder if you have considered a synced Browser Tab (ideally shown on a second screen) that shows device previews – possibly even several of them, side by side. The screenshot shows a CSS Editor that is mainly thought as an inspection tool, which offers this.

Holger · Answer

Three device previews of the Webstudio website.

Alex · Answer

This is an interesting idea, I remember adobe XD did this back in the day.

Oleg Isonen · Answer

You mean because you don't see on canvas exactly the same size?

Oleg Isonen · Answer

I am not sure I understood what you mean

Oleg Isonen · Answer

by this: "what exactly will be visible on your initial screen."

Oleg Isonen · Answer

Like seeing how the website is being loaded in progress?

Jeremy · Answer

@Holger , I know this isn't really what you mean, but this browser application is amazing for devs. https://polypane.app/

Oleg Isonen · Answer

Generally having a staging preview that updates nearly real time and can run in a standalone window is something we are planing

Holger · Answer

You mean because you don't see on canvas exactly the same size?

Canvas aspect ratio, mainly.

I know graphic designers who have a great sense for composition and typography - and for this very reason, they stick to print design. They totally loathe that their composition after handoff would get scaled and pushed around, based on rules.

I know what they mean, but I'm more pragmatic. Webstudio could have great appeal to artsy pixel-pushers. Wysiwyg previews were very helpful, to make sure that the initial screens and important sections look great – at least on most screens.

Holger · Answer

Adobe XD in selected Artboards always shows a simple line that indicates "the fold". Quite helpful.

Oleg Isonen · Answer

yeah, device sizes, basically, this can be done by selecting the size from a list of devices

Oleg Isonen · Answer

its not practical for development, but when previewing, selecting a specific device model that has predefined size would be practical

Holger · Answer

Using separate screens to check modifications in realtime would be best. The tool I posted in my first screenshot lets you also select and edit in the preview and gives you all measurements.

Oleg Isonen · Answer

hmm, maybe there could be a tool that gives size and other information on hover that one can turn on/off optionally

Oleg Isonen · Answer

like figma has grid and such that you can turn on/off

Oleg Isonen · Answer

most of the time such tools exist for handoff, to measure things for develpment, but maybe one wants to verify sizes during design phase as well

Holger · Answer

Yeah, Alt key in Figma. I would always prefer hotkeys.

Oleg Isonen · Answer

yeah something like this, actually I have an additional idea, on alt it could also show paddings and margins and allow to manipulate them on canvas

Oleg Isonen · Answer

I was already thinking how we can provide padding/margin/resize on canvas, but by default it would be difficult, it would be too invasive

Oleg Isonen · Answer

with alt key and hovering we could show all that stuff and allow manipulating as well

Holger · Answer

There are several nice implementations. I just had a play in the new version of Penpot. The give you interactive handles for Grids and Flex after a doubleclick. Click outside to end mode.

Oleg Isonen · Answer

Need to check this out

Holger · Answer

https://early.penpot.dev Not yet official. Press this button.

Holger · Answer

Getting off topic – but also tools like Figma use very unintrusive handles. The margin handle (first screenshot) is a faint margenta line. And that line only appears in context: You need to have a "qualifying" preselection.

Oleg Isonen · Answer

still you don't want to see them there all the time as you are selecting instances

Holger · Answer

You don't see this all the time. These widgets only get visible when you multiselect adjacent items – something that makes the suggested intent extremely likely. A random multi-selection (image and second text block underneath) shows no widgets. This is quite cleverly made.

But we should continue discussing details, once you give us multiselect in Webstudio 🙂.

Oleg Isonen · Answer

Indeed paddings are cleverly only visible when 2+ elements are selected

Oleg Isonen · Answer

Figma has no margins though, so its not quite a complete model

Join the Webstudio community

Device previews in synced browser tab?