In my copi­ous amounts of spare time, I’ve been con­tem­plat­ing redesign­ing this site. And dis­lik­ing the fact that screens are dif­fer­ent sizes.

Maybe it’s just that the sites I’ve spent the most time build­ing with CSS at Raw Ideas have been suf­fi­ciently indif­fer­ent to any­thing less than 1024x768. Or that the con­tent of these sites is so dis­pos­able that sus­tain­abil­ity isn’t really a great con­cern. Either way, I know what I should be doing in terms of design, then I’m aware of what is being done for var­i­ous rea­sons, and they’re not match­ing up.

For this site, I’ve got a design con­cept lined up… my only con­cern is exe­cu­tion of that.

Felix Miata is an absolute leg­end by whom I find myself con­stantly pur­suaded (though not always, for var­i­ous rea­sons – mostly professional/design inhibition/the cul­ture of superficiality-over-function so preva­lent in web design – , able to fol­low), and he’s built this really com­pelling exam­ple of why not to use fixed-width/px-based lay­outs. I don’t think he par­tic­u­larly cares about design, and comes across some­what like RMS does in his fanat­i­cal advo­cacy of a par­tic­u­lar approach to styling web pages.

Only, unlike Stall­man, his agenda is not some arbi­trary and often unrealistically-founded ide­ol­ogy (yeah, I’m trolling. Go on, rant. Stall­man can’t see past his own ver­sion of open-source, and his atti­tudes pro­vide no real­is­tic migra­tory path from closed– to open-source solu­tions; such zero-tolerance rejects the pat­tern that has become estab­lished in IT, so there’s no point in moronic reminscences of a time when there were only twenty peo­ple in the world using com­put­ers and they all shared, yada yada yada. No one cares.) but a prac­ti­cal NEED and inde­pen­dently cor­ro­lated evi­dence regard­ing people’s desires for larger text on websites.

So the text is stay­ing big here. But that’s a given (well, at least on this site… I’m try­ing to sway other places, and the best I’ve got thus far is text-resizing styleswitcher con­trols on a design I got handed last week. Usabil­ity will pre­vail! Gosh that sounded like the gov­ern­ment pro­pa­ganda guy from V for Vendetta. Ah well. This post is now offi­cially very digres­sive!), not my main concern.

No, my main con­cern is this site wind­ing up look­ing like the BBC’s does on enor­mous screens (see Felix’s page linked to above). I’m a fan of white­space as much as the next guy, but 800x600-wide on a 2000-pixel wide screen just doesn’t do it for me.

And, going the other direc­tion, I just bought a mobile/PDA which means I’m now going to be design­ing mobile stylesheets as well (at least I have that option!) for a 320-pixel wide screen. All new challenges.

Fluid lay­outs are all dandy until you intro­duce graphics.

Here, I’ve got a pol­icy of edi­to­r­ial graph­ics (i.e. pretty much every­thing except pho­tos that exist out­side of blog context/are linked to as files denoted as full res­o­lu­tion) not exceed­ing an invi­o­lable max­i­mum of 700 pix­els. This is, in my think­ing, not nego­tiable. I’m build­ing for an 800px wide min­i­mum, which means a main-content col­umn width of 760px tops.

Plus I can get away with lots more in terms of edit­ing pho­tos from my excellent-except-for-in-low-light-as-most-consumer-digital-cameras-are cam­era when the pub­li­ca­tion require­ment is kept low. I like to fill the col­umn with colour as much as pos­si­ble in a vain attempt to bal­ance out the (com­par­a­tively volu­mi­nous) amounts I write… I’ve started to use the “Read more” func­tion­al­ity again for pub­lish­ing essays and other not-originally-designed/written-for-web mate­r­ial (where PDF equiv­a­lents are avail­able), in order to hide full­text from the front page. You’ll note that on the sec­ond of today’s Cym­be­line posts.

So, I’m torn between keep­ing every­thing nar­row and keep­ing con­trol, or, well, not.

Cen­tred lay­outs, when done prop­erly, cater even for peo­ple with Stu­pid­ly­Large­Screens™. They’ll prob­a­bly be using 120dpi fonts to start with, which makes things rea­son­able even at “Nor­mal” font size. IE will go up two more steps… every other browser well beyond that. That’s prob­a­bly rea­son­able. The “chal­lenge” to me there is sim­ply to size the cen­tred lay­out in em’s, so that scales as well. My great­est con­cern is that I can­not style images to fill a set per­cent­age of their par­ent ele­ment (scal­ing appear­ances don’t, for the most part, con­cern me… this is mostly pulled off with­out too much dam­age if the dif­fer­ence is slight), because of vast amounts of legacy con­tent. I think specif­i­cally of instances where I’ve floated images that exist purely to sup­port the arti­cle, not pro­vid­ing any great amount of con­tent in their own right… these images are usu­ally from 200 to 400 pix­els in width, and often sit adja­cent to text. Refer to Cym­be­line exam­ple again for an instance in which images are help­ful and effec­tive, but it would be fool­ish to style them globally.

Legacy con­tent is the rea­son this can’t be achieved… I could con­ceiv­ably go through­out every one of the just-shy-of-1000 posts on this blog (in other mile­stones, we had a sec­ond birth­day three days ago) and add classes as appro­pri­ate. But I won’t.

My (final, because I need sleep) con­cern with scal­ing lay­outs is using back­ground images in CSS, which don’t scale, and can’t be sized in per­cent­ages unless you do stu­pid things with redun­dant markup (non-semantic IMG tags) and abuse z-indexes to the more worn edges of sanity.

It all comes down to loss of artis­tic con­trol. I embraced that with the present design, which I’m well aware peo­ple say looks like crap. You know, I don’t mind hear­ing that. The fact remains, it’s prob­a­bly the most func­tional design I’ve ever built.

That said, I’m off to get my hands dirty with some ink.