Board Thread:Darwin - Fluid layout help requests/@comment-5556688-20131208143643/@comment-188432-20131210065044

Ohhhhh, thanks for reminding me of that great article. It has some really useful math — and scalability can't really be controlled without some math. That article tells you how to work out picture width as a percentage of overall page width, so that you'll always have the same relative width of picture, regardless of browser width. It's a solid approach, and it's worth doing the math. But the approach will work best on Wikia if you can get a bot to ensure that every single picture on the wiki is at the default thumbnail. In other words, you have to get a bot to make this transition on every page of your wiki:

-->

It's a pretty easy bot run, though it may take a while to run completely, depending on the size of your wiki.

Once you've got all your pictures at standard thumbnail size, you can calculate the ratio. Note that when I say "standard thumbnail size", this doesn't mean you have to accept the Wikia standard of 180px. You can use CSS to instantly push every thumb up to 300px. But whatever your local standard, you'll need that px width.

Let's assume for the moment that you aregoing with 180px. So you now need to divide that by whatever you consider to be the standard browser width. Since Darwin stretches from about 700 to about 1200, I'd personally split the difference and call the "standard" browser width 1050px. So the width of your pics needs to be 180px/1050px X 100 = 17.14%. That means that the width of the pics needs to be a constant 17.14% of page widths. The article goes on to show the very simple CSS needed to enforce that rule.

[The article also gives examples which suggest that the ratio should be much higher, like 41%. But I don't know of any wiki that, by default, is running anythign close to pics that run 41% of total browser width. That would be gi-normous in the Wikia layout. I wouldn't recommend anything much over 33% for most wikis on Wikia. Remember: how wide you can go depends on the raw width of your images. If you've got a lot of 100px pictures, it'll be mathematically impossible for you to set a ratio of 33%. You've got to play the hand your file library deals you — unless you're prepared to delete all your tiny images and start repopulating yoru library with images that will all allow the ratio you want.]