Design Bug: demos which are viewport specific don't work on the demos page

[JakeChampion]

I have seen first-hand users of Origami scroll past a demo because it looks like it does not solve the problem/issue they are trying to solve, when in fact it does but the demo is at the wrong viewport size to show that.

What

Viewport specific demos are not shown at their correct viewport size when on the demos page, and so the demo can easily be mistaken as not working or not showing the customer that it is the solution.

Details

Viewing this in your browser should likely show the demo in a viewport size which doesn't show-off the feature the demo is meant to show-off -- https://registry.origami.ft.com/components/o-table@8.0.0#demo-responsive-overflow

This is the correct viewport size to show the feature --

[notlee]

Yeah we should solve this. Off the top of my head: perhaps we specify breakpoints in origami.json for demos. This way the registry could do something like display an overlay that says "to preview this feature open in a new tab". We could maybe even present a scaled screenshot at the correct viewport dimension

[JakeChampion]

Yeah we should solve this. Off the top of my head: perhaps we specify breakpoints in origami.json for demos. This way the registry could do something like display an overlay that says "to preview this feature open in a new tab".

☝️ that is exactly what I was about to suggest :-D

[JakeChampion]

We could maybe even present a scaled screenshot at the correct viewport dimension

I think this is a really good idea but may not work as well for components which have interactive elements such as the table scroll demo linked in the original post.

[JakeChampion]

Screenshot of the component at the correct viewport size may only work with demos where the viewport is meant to be smaller, I don't know if it will work if the demo requires a big viewport.

[JakeChampion]

Yeah we should solve this. Off the top of my head: perhaps we specify breakpoints in origami.json for demos. This way the registry could do something like display an overlay that says "to preview this feature open in a new tab".

☝️ that is exactly what I was about to suggest :-D

Opening in a new tab does not really help because it would likely have been opened in the wrong viewport size also. Should we have a container for the demo component which forces the correct size somehow? Is that possible?

[notlee]

Opening in a new tab does not really help because it would likely have been opened in the wrong viewport size also. Should we have a container for the demo component which forces the correct size somehow? Is that possible?

With an iframe in an iframe? The demo page could have buttons to select the recommend viewport sizes. If the demo was in an iframe on the demo page, it could be resized -- and overflow if necessary with a notice

[notlee]

Screenshot of the component at the correct viewport size may only work with demos where the viewport is meant to be smaller, I don't know if it will work if the demo requires a big viewport.

Rowan's 10% time screenshot service lets you set the viewport size,

If interaction is required that's a problem still

[JakeChampion]

Opening in a new tab does not really help because it would likely have been opened in the wrong viewport size also. Should we have a container for the demo component which forces the correct size somehow? Is that possible?

With an iframe in an iframe? The demo page could have buttons to select the recommend viewport sizes. If the demo was in an iframe on the demo page, it could be resized -- and overflow if necessary with a notice

I'm liking this idea of surfacing the recommended viewport sizes onto the page for the user to see and switch between

[notlee]

Why not both! A related issue with viewing the registry is that the page jumps around as the iframes load in, as they resize according to the demo.

We have "demo" and "html" tabs currently. What if we added some kind of "screenshot" tab as the default tab. Component pages would load much faster if we presented a screenshot immediately and lazy load demo iframes behind a tab. It would also maintain a core experience; prevent the page jumping around (this is a problem when trying to link someone to a specific demo, as often you are left looking at a random demo rather than the one linked to); users can still get a quick view of what's available with the images; and can access a demo without a page reload under the "demo" tab to view interactions. The demo tab would be a good place to communicate recommended viewport sizes and suggest opening a new tab if needed.

Big change though -- we'd need to do some user research.