Shortly after I put up the Jello article, I realised that the technique is really a wee bit silly. It’s great because it’s so tweakable, but it’s silly because the method of tweaking is mostly just trial and error.

Why didn’t I notice this before? Because as a programmer by nature, a lot of my design process is a sort-of haphazard try different things until it feels right approach.

But for all the other designers out there, Jello would be most useful if it came with a tool for creating the exact effect you want.

Well here you go.

The default is 540 + 60%. If you don’t want it quite so wide, 628 + 41% happens to be the values that make it 700px at 800×600 and 900px at 1280×960. (not counting browser chrome)

The Math Of It

It’s all wrapped up in the calculator, but for those interested, here it is:

As I mentioned in this comment, the width of the #container is governed as such:

w = (v - f) * p + f

• w - width of #container
• v - width of the screen
• f - fixed quantity
• p - percentage of the remander

If we plug two sets of values, we’ve got a system of two equations– two equations, two unknowns:

w₁ = (v₁ - f) * p + f

w₂ = (v₂ - f) * p + f

With a little bit of re-arranging, the f may be isolated:

f = (w - vp) / (1 - p)

With f isolated, the two may be set equal to each other, since f is constant in both cases:

(w₁ - vp) / (1 - p) = (w₂ - vp) / (1 - p)

The denominator disappears, and what’s left is this:

p = (w₁ - w₂) / (v₁ - v₂)

Once the p is solved for, all you need to do is plug it back in here, to get f:

f = (w₁ - v₁p) / (1 - p)

Mike

← Earlier Later → Posted at 1:38 pm to Web Tech.