Page Layouts and Wasted White Space and Dynamic Resizing

[Jason and Clear House]

I am putting together specs for a site's page template, layout, etc. The one that's in place resizes dynamically based on the window size and screen resolution. The problem is the way it resizes the columns and the amount of wasted white space.

These are approximate:

Laptop Monitor: 1366x768 resolution

Three Column layout:

- left column: 20% = 273px (100 for content + 173 for white space)

- right column: 20% = 273px (100 for content + 173 for white space)

- center column: 60% = 820px (780ish for content + 40ish for white space between left/right)

External Monitor: 1680x1050 resolution (assuming window is maximized)

Three Column layout:

- left column: 20% = 336px (100px for content + 236px for white space)

- right column: 20% = 336px (100px for content + 236px for white space)

- center column: 60% = 1008px (950px for content + 50ish for white space between left/right)

To an extreme (for large external monitors):

Three Column layout (3000px wide)

- left column: 20% = 600px (100px for content + 500px for white space)

- right column: 20% = 600px (100px for content + 500px for white space)

- center column: 60% = 1800px (1700px for content + 100ish for white space between left/right)

As you can see from the extreme display, 1/3 of the screen is now wasted white space.

What I want is:
Left Col = 100px content + 50px white space to the left

Right Col = 100px content + 50px white space to the right

Padding between Center column and outside columns = 25px each side

Then, the remaining space = Center column content.

So:

1) 1366px wide = 150px each for left/right columns + 25px per side padding = 1016px for center column

2) 1650px wide = 150px each for left/right columns + 25px per side padding = 1300px for center column

3) 3000px wide = 150px each for left/right columns + 25px per side padding = 2650px for center column

Is this something that can be done?
Basically I'm anchoring the left/right columns to the edge of the window and the center column adjusting to the remaining width.

Is it a simple XML script?
Is it a SharePoint Designer setting?

Is it far more complicated than that?

Appreciate any feedback.

[#2]

Assuming you are using SharePoint 2016, are you using modern page layouts or classic?

If modern, you might able to work with Designer but I am guessing these page design layouts aren't really designed to accommodate such extreme resolution changes.

SharePoint Online you don't really have much options in these areas.

While you want everything to look beautiful, especially since I am guessing the extreme case may be executives you often have to pick and choose who is the most common user. Most people who have bigger screens understand that not everything scales correctly.

Good luck

[#3]

Hi Ryan - Thanks for the response. 

The standards are laptop resolution (1366x768) and External Monitors (1680x1050). 
The exceptions are usually department related (3347x1050) (or more). 

The issue is, we migrated their sites from Server1 to Server 2 (upgrading from 2013 to 2016) and the new Server / Site has a different template in place. The Site Owners/users have sites developed that were migrated that have fairly wide and informative middle column displays (their old site didn't utilize the right column). Now, with the new template, utilizing the right column, their main content display area is reduced from a possible:
 - External Monitor (1650px width): 1400+px to now a maximum of 650px (reduction of over 50%)

 - Laptop Monitor (1366px width): 1130+px to now a maximum of 650px  (nearly a 50% reduction)

I'm trying to find a way to maximum the main content column (understanding that this isn't going to be perfect for every page, every site, etc.) The standard template layout is shown to right. 

From my analysis, the template appears to have loads of wasted white space as you can see below:

I'm putting forth my recommendation for the layout (keeping the format in place). But as you can see...there's a LOT of wasted space. A LOT! And ideally, I'd be able to set a minimum width of the Centre Column (ie. 800px). 

Any recommendations, suggestions, ideas? And again, I appreciate, no single design will appease every use, every layout/design. But, if I can minimize the wasted white space, I can give them a little more flexibility and area for content on their pages.

Cheers.

[#4]

Impressive analysis, you've definitely done your homework. I'm afraid I have no value to add outside of design for the most common use case which I suspect may be External monitors.

Definitely no escaping it in modern design, here is one of many uservoice complaints about it:
https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/32858962-too-much...

Flat design is the latest design trend and your user base experiences this on a pretty common basis:
https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/

As for how to best explain that your use base, I've taken the approach of stating its a design limitation and focusing on the benefits of the newer platforms (especially how it is significantly better on mobile).