Multi-window workspace - how to handle resizing the parent window

Question

I'm working on improving the UX of one of our web applications. This is an application that runs as an intranet app.

The old style basically was a simple menu on the left and the current page on the right. I'm currently redesigning it so that the right space is a workspace that allows multiple windows to be open at the same time.

My issue with this is as follows. Say a user is using the app in fullscreen mode (which is our recommended way of using it, and is how it is used most of the time). We noticed that some of our clients have to use some external tools, or simply reference an e-mail, at the same time, on one screen. They exit fullscreen and drag the browser (with our app) to one side. Normally, this works fine - however, since we're now going to allow multiple small windows that are resizable and draggable, this creates a problem with resizing the available workspace.

What is an acceptable way of handling this?

Below you can see the original workspace, and two possible solutions that came to mind. I'm torn between the two - example one seems useful if the user needs to a quick check and then return to their fullscreen workspace, while example two seems a lot more user friendly if the switch to a smaller screen is permanent or for a longer period (it saves the user having to reposition everything).

Here you can see a fullscreen workspace with multiple windows opened:

Ex. 1: Now the window has resized, and we've kept all windows in place and at their original sizes. The browser's scrollbars allow the user to view all content.

Ex. 2: Here the window is resized, and all windows that were out of bounds or too large were repositioned and shrunk as necessary.

Disclaimer: I would like to note that having more than 2 windows open is usually unlikely, but the same basic principal applies, I think. The example shows 6 purely for demonstrational purposes.

Answer 1

I prefer the second option post resizing as it is more functional than having to scroll across the viewport to sift through the palette windows to find the one I'm looking for. Plus horizontal scrolling is a pain on windows unless you decide to override Ctrl+scroll for your web-application and allow the user to scroll horizontally with it instead (still unconventional though).

Following is my suggestion with respect to the above detailed problem:

1. Since you would be anyway repositioning the palette windows within your viewport in option 2, I'd suggest you stick the large palette window to the bottom of your viewport. That way, you would have the maximum space remaining in your viewport to reorient the rest of the palette windows.

2. While repositioning the rest of the palette windows, evaluate their priority based on their utility, and also the remaining space in the viewport after positioning the large palette window. Now position the rest of the palette windows based on their priority in the available viewport space. In case you run short of space, you could minimize a few palette windows starting with the least prior window. If the user maximizes one of the minimized palette windows, let it overlap any of the other windows in the remaining context.