I Am Alert (but not alarmed)

The Redesign

18 August 2005
Filed under Code, Design, Folio, I Am Alert, Text, The Interweb

Finally, after a solid two-and-a-half weeks away from computers (typing the odd email on a nine-year-old PC running Windows '95 doesn't count), I was inspired to start work on the long-promised redesign of I Am Alert. Over the previous few months, I'd sort of scratched out a brief for myself, which I worked to for the most part. I coded the site while on holiday, mostly while sitting on various beds in various guesthouses around Sri Lanka (more on that another time).

The Brief

More emphasis on the photos, since I'm taking more these days. In particular, the photos should be larger, and the layout should handle the different orientations more gracefully.
This meant ditching the old 350px, single-column layout. I did this with some regret, because I liked the simplicity of it, but one of the old version's most glaring deficiencies was how inflexible it was when it came to images. It was too narrow to comfortably 'float' most pictures to one side or the other, but portrait-oriented photos took up way too much space.

For a while I considered having a separate photo-blog, but I don't take enough pictures or write regularly enough for that to really work, and it wouldn't have solved the problem of what to do with illustrative images (screengrabs and the like) within text-entries anyway.

My solution has been to make a kind of two-in-one layout, where the user can switch the focus between the two types of entry. I've given the photos their own column and allow them to dictate the colour-scheme for that part of the design (this was totally my own concept - nobody else is doing it). Then, using a combination of stylesheets and the marvellous phpThumb I switch the colour and contrast of the text or photos, depending on the context they're being viewed in. Wander around and you'll see what I mean.

Should retain some design elements from the original, for continuity. Keep the basic red, white and black colour-scheme, but add some variations to the palette.
I've hung onto the highlighting link-lists, but refined them a little. I'm still using dotted lines (mmm, dotted lines) to separate the items, but I've finally created my own dot in Photoshop so that this detail isn't ever left to the dastardly Internet Explorer. The colour scheme stays, but as outlined above, the palette will be augmented by a sample from the current photograph.

I actually also intended to re-tool, but keep, the original navigation, but in the end I've steered away from having any overarching navigation at all. I'm not sure if this is a good idea or not; the theory behind it is that a blog (is this a blog? I'm increasingly unsure) probably encourages tangential navigation - by category, for instance - and to that end, I've started making better use of those bits of Movable Type that allow this, like categories, subcategories and date archives.

Typographically speaking, not much has changed, although I've cracked down on my unruly heading order, changed to ems rather than pixels for sizing the fonts, and made some general refinements that are very long overdue.

Make more use of Movable Type options like categories and properly-organised archives.
As above: I'm using proper archives, categories and subcategories now, and I'm using MT tags in more complex ways. I might do a bit of a write-up on this some time in the future.

Get the name of the blog on there somewhere...
Done. Actually, for a long time I didn't know if the site was called 'I Am Alert', or 'Alert, But Not Alarmed' (I also flirted for a while with Alert_log, but that obviously blows). I'm sure you'll all agree that I've very successfully and elegantly hedged my bets on this score. For awards nominations, grants of money etc, I'm happy for the site to be known as I Am Alert.

Start moving towards a widescreen-friendly layout, since monitor manufacture seems to be heading in this direction, but keep looking after the brothers and sisters still on older, low-res screens.
I'll admit that the impetus for this was my own irritation at having a 23" monitor of which approximately 6" was occupied by my own website. At the same time, it drives me completely insane when websites want to use all of that screen real estate, which I horde jealously. (I'm looking at you, National Bank of Australia).

Enter the pseudo-flexi layout. My site is now optimised for viewing on screens with 1024 x 768 pixels or more (the site itself is about 940px wide), but flows semi-gracefully into a 470px wide layout for those using smaller monitors. If I were a better person, I'd give humans using little / low-res screens a choice (saved in a cookie) as to whether they'd prefer the photo or the text to come first when the site is in a single column, but if I spent all my time following such flights of fancy I'd never get any REAL work done.

For people who've never visited my site before, I've archived the front page and a sample entry page for comparison purposes.

In my next post, I'll elaborate a little on some of the finer points of the redesign.

Edit Entry

Categories

• Art (5)
• Books (7)
• Business (19)
• Code (7)
• Design (30)
• Film and Television (9)
• Folio (12)
• Food (2)
• Football (11)
• I Am Alert (13)
• Language (20)
• Life (58)
• Mac (22)
• Melbourne (13)
• Music (14)
• Photography (4)
• Politics (32)
• Technology (41)
• The Interweb (47)
• The Media (10)
• Travel (9)
• Weather (7)