John Lindal’s Blog

User Interface Layout Resizing

November 22, 2008 on 9:08 pm | In Deep Thoughts, Programming | No Comments

After taking a walk this evening, I’m beginning to doubt the simplicity of proportional sizing. This example is what it should achieve. But how is it possible? To make the numbers simple, assume horizontal sizing:

| 10 | 35 | 10 | 35 | 10 |

Assuming the configuration shown in the example, if each list is 35% of the resulting width, then the gutters will grow, too. If you ignore the fixed margin for each list, then the size is 35/90 = 38.8% of the width, but this doesn’t help. The only way to keep the margins the same is to place each list inside its own container, with each container taking 50% of the available width and enforcing fixed padding inside. Perhaps the example works because each list enforces its own margins, so the two items do actually take 50% each? Normally, widgets don’t do this. The example is from a specialized report builder.

So proportional sizing isn’t simple. It requires introducing layers of nested containers which serve no purpose other than anchoring enclosed objects. I shouldn’t be surprised. This happens all the time within the web browser.

Proportional clearly isn’t useless, either, but I do wonder if it’s worth the extra trouble.