So, how was this done?
Typography
Very few people will have got the joke: the visual design of the new version of this site bears a striking similarity to the newspaper design I did for the newspaper London Student in the summer of 1996.
That design, in turn, contained a deliberate joke itself - rooted in the horrors we used to see coming in by post from other universities every week. DTP was only then fully in the process of taking over from photoset type and you'd usually only ever see one of two things: Times and Helvetica only, or an explosion in the font factory.
Eventually an entire newspaper design was born out of my rhetorical question in the pub. "Can we actually do a shit-hot layout using only Times and Helvetica?"
Ultimately I fudged the issue and went for Helvetica Condensed, and added a bit of Eagle Bold in the page headers, and in tiny flags above some of the headlines. The sharp-witted among you will notice that this site uses Franklin Compressed instead (it's close and I actually have it to hand). I've now reinstated Helvetica Compressed but I'm not quite done yet with fixing the letter spacing.
The Eagle Bold comes over intact. I'm using it here for category tags, which is sort of how it was used in-page on the paper. Occasionally we'd use that extremely-small space to drop a gag into the otherwise-professional news pages. Above a NIB titled "Student swims channel wearing Mr Wimpy suit" we might slip "Eejit" in tiny red Eagle above. I doubt most people noticed but it used to keep us amused during overnight layout marathons.
Really geeky typography nuts will know that we stole the Eagle thing wholesale from the "Neville Brody is God" era of the French daily Liberation. Je ne regrette rien.
Layout and Geometry
You may by now have heard of opinionated software. In choosing to ape a newspaper layout I did before, I'm not (only) taking a shortcut to getting a pretty site quickly. I'm offering you my contribution to the subject of Opinionated Web Design.
You learn things about visual geometry doing a newspaper design from scratch which you will never learn by making magazines and flyers.
The short version is this: There's a reason that all newspapers have a vertical grid and never deviate from it ever, ever, ever: absolutely all the other options look wrong. And every newspaper designer had to find it out for her/himself along the way.
The miraculous thing about that? Sometimes it looks alright. But when you as a reader get your mitts on it, there's something wrong. It's proportional enough, there's nothing overtly wrong with the graphics and pictures and type. It just doesn't look like a newspaper. Hopefully in the end someone comes along with a ruler and some graph paper and hammers it into a rigid, Stalinist, conformist seven-columns-of-equal-width and it looks like a newspaper again.
My point? After endless years I have now firmly decided that the same thing applies to web page layouts. Variable width sites can look OK. Fixed-width sites with multiple columns, ditto. But the holy grail, my friend, is the subtle karmic alignment of a rigid, immutable, vertical grid. For two reasons - one ephemeral and one practical.
The ephemeral you just heard about. You (yes, you). You personally prefer fixed-width grids. Accept it, and move on.
The practical benefits, meanwhile, are huge. The designer can merge, split, and indent items within the grid , always using the two magic multiples - column width, and column width plus gutter. For more spectacular vindication of that point of view than you will see on this site for the time being, I refer you to Khoi Vinh - referring to the reworking of The Onion here and here (demonstrating Subtraction's use of a complex grid while doing so). The canonical explanation of what I'm on about can also be found at the same site where its own design is explained in detail. A work of utter beauty, it is.
Tools
For this one I did something I've never done before for a web site - I drew it in some detail using Fireworks (running under WINE on my Ubuntu machine at home). As you've probably gathered, I had the grid vew switched on (at 25x25px) with several vertical guides laid over the top. Every element here is laid onto that grid. Everything is a multiple of 25 pixels wide, and horizontal spacing between elements is locked at 25 pixels.
Because it uses layers heavily, I was then able to isolate and export certain things which actually needed to be graphics (like the image which appears in the header above) while really only using the rest for reference.
In the unlikely event that you give a toss, I use jEdit to code my CSS and template files because it a) operates exactly the same way on Linux and Windows machines (and Macs too, but I don't own one), b) can edit files directly on a remote server using SSH, which is nice because I don't run FTP servers for religious reasons and c) does syntax colouring for a bewildering array of languages and file formats. I recommend it highly.
The swanky type on the headlines is was done using sIFR, for which a person needs access to Macromedia Flash for about 45 seconds, and an awfully long time to screw around with letter spacing if (like me) you use a narrow type face with it. I recently replaced it with a variant of this PHP-based image replacement tool for two reasons: first, I don't like the way sIFR is prone to rendering everything at a slightly different size depending on how much space this week's rendering engine leaves for it; and second, I want background transparency for headlines for future use and Flash doesn't provide it under Linux. And since I use Linux myself, and it's my site, Mr Inman's otherwise-fine tool gets the push.
Again, since I can't really afford to spend weeks doing my own site from scratch, I took a shortcut with the theme. I ended up using a previously-made theme which was reasonably close to where I was headed, and modified that. In this case the theme was the version of Sebastian Schmieg's Blix I'd already modified for ABCtales.com. Standing on the shoulders of giants, indeed.
The back end
I'm done with reinventing wheels. Plus, the majority of the web work I get could not be accomplished by so-called 'CMS' apps which really only do blogs. Or at least, not without reinventing those wheels I'm done with in the process.
Recently I've started using Drupal for everything, and this site continues that new trend. The only thing about that which surprises me is that I can use it for everything. It has a plugin architecture to die for. So if a client wants it to do something it can't do today, like attach links to articles or enable allcomers to create CVs at a training and education site, I can write modules for that. And then, of course, release them back so that other people can use them too.
I ported the data from my old Wordpress 1.1site using expert bitching MySQL-fu, and not a canned script. So my apologies if you were hoping to get a premade porting script from me.
I moved all my photos from a Gallery install by copying the Gallery tree back to my own machine, deleting its generated thumbnails and whatnot. Then, making use of the entirely excellent Gallery Remote module for Drupal, I uploaded them directly into the Drupal image module via XML-RPC with the Gallery Remote app from Menalto.
The end bit
Well, that's all I have. All questions and/or comments are welcome. You can send them to me using my contact form.
Thank you for watching.