Responsive Design Mode: New designs in the works - input wanted

How many devices do you tend to test for? How many do you think would be useful to see side-by-side? (Assume edits via the Inspector would change all views concurrently - fingers crossed that we can make it happen :))

Usually just for the breakpoints I have a layout for. Normally, this is Mobile Portrait, Tablet Landscape (768px) and Desktop (>1024px). So ideally, I’d like to see all these 3 visible at once.

Less common it is Mobile Portrait and Desktop (>1024px), so only two.

Sometimes it is Mobile Portrait, Tablet Landscape (768px), Desktop (>1024px) and Desktop Large (>1260px). So four viewports.

For these use cases we a “device lab” table for with real devices: https://www.vanamco.com/devicelab/ But since it’s extremely expensive we only have one in our company (for 12 developers or so). Ideally, the multiviewport mode would faciliate the same like this.

How often do you resize the viewport in RDM mode?

You mean by hand: Very often. Not sure, I do it this often because the RDM is so bad :wink: Maybe if there was a multi-viewport mode, I’d do it less often. Normally, I do it for finding edge cases, so just changing 1-10 px.

Do you prefer a UI where all controls are visible and within easy reach, or would it be better to hide some of the uncommon ones like DPR and touch simulation in a menu?

Depends :slight_smile: Usually, I find it better to have them all visible for discoverability but for multi-viewport I see the need for more space.

Last thing, I noticed just yesterday that in the Device dropdown only the “Laptops” have their pixels next to their name. Well, I like most do not know all the devices’ dimension out of memory :wink: So when I have a breakpoint of 720px or so and what to pick a device I usually do not know which one to pick first. It would be big help (and probably not much implementation work) if all devices had their dimension next to them like for Laptops:

Just like this for all devices:

Also, in a existing project I was drawn in, I do not know the breakpoints, so I tend to grep through the code to find out… What be great (but probably not easy to implement) if there’s was a RDM button like “Open in all breakpoints” and then, say if there were 3 breakpoints / viewports, then the RDM mode would open these 3 viewports at once. This would be a great time saver… Also for investigating other people websites…

Thanks for working on this!