Yesterday I explained why I moved my blog from Radio Userland and
today I’m going to explain how I did it. I’ll also talk a bit about my
new CSS layout.
The Move
I have to give a big shout-out to Bill
Kearney, whose Radio
Exporter tool made it relatively easy to export all my content from Radio to
MT. There were a couple of gotchas for me though – one was I had to convert the
date format Radio uses (DD-MM-YYYY) to the format MT wanted (MM-DD-YYYY). The
second additional thing I had to do was get rid of all the line breaks I had in
my content – I used MS Word (of all things) to do that. There was some other
faffing about, but eventually I got all the content imported into MT.
The next task was to maintain the same URL structure in my new MT blog, so
that permalinks to past articles wouldn’t break. Again Bill
Kearney had solved this – it was a matter of adjusting the date-based
archive template in MT to use the same date format as Radio.
My comments system proved to be the biggest challenge (apart from the CSS
that is, which I’ll get to in a minute). I debated with myself whether to use
MT’s in-built comments system, or whether to stick with Phil
Pearson’s excellent Python Community Server.
I decided it would be easiest to keep going with PYCS, rather than try and
migrate all the comments across. Plus I like the pop-up box method of comments,
rather than sticking comments on the same page as my posts. Although having said
that, I do admit that having comments on the same page as the post encourages community-centred
conversations. But for now I’m very happy with PYCS. A big shout-out here to
Phil Pearson, who has been helping
me migrate my comments.
NB: some of the old comments haven’t yet made it across, so if you’re
wondering why a comment you made on my blog in the past is no longer present –
it’s not because I deleted it, unfortunately it’s stuck in transit. It’ll be
back soon.
So that was basically how I moved my content across to MT. There were a few
other gotchas along the way, but that’s par for the course whenever you move
weblogs – and every person’s gotchas will be different, so there’s little point
in me describing them here.
The CSS Re-design
Now before I start talking about the CSS, I have to say that I don’t think my
new design is – visually speaking – anything to write home about. I’m no Zeldman
or Asterisk or Simplebits.
Those guys are artistes, whereas I’m not worthy to shine their shoes (in
a web design sense). But even though I have the esthetic sensibilities of a bull
in a paint supplies shop, nevertheless I wanted to design my very own style for
my MT weblog. My goal was to design a fairly unique, CSS-positioned, table-less
layout that had semantically meaningful <div> tags dripping from its very
pores.
Last time I
did a CSS design, I borrowed one from the fab CSS
Zen Garden (with the designer’s permission of course). But this time I
specifically wanted to create my own CSS design from the ground up. So firstly I
studied lots of existing designs, to see how others did it, and I consulted
various books such as Eric Meyer on CSS
(thanks to Code is Mandatory for
lending me that, plus the Zeldman book).
I noticed that most of the good designs out there are centred and fixed width,
but eventually I decided on a left-aligned fixed width design – to be slightly
different, but also I think the main menu is best positioned on the left
of a page rather than horizontally below the header (where most trendy websites
place it). I also opted for 3 columns, as I wanted to highlight my Quicklinks in
a place that was separate from the main navigation. The right-hand column is
where most bloggers put their quicklinks, and in this case I opted to go with
the common wisdom (Jakob Nielsen would be
proud of me).
The CSS design I created uses ‘float: left’ and ‘float: right’ to position
the left and right columns, and the main content area fits in between. All 3
columns are placed within a container div. The effect of the two vertical grey
lines that separate each column is attained via a vertically tiled background
image – see Dan
Cederholm’s excellent article on Faux Columns. There is one little gotcha
here that I didn’t discover until the morning after I published my new CSS – in
the HTML file, the code for the left and right columns must be placed before the
code for the centre column. This means the left and right columns will render
before the centre column, which will prevent jerky scrolling in Mozilla and
overlaying divs in all browsers.
There are a few other things I need to tidy up in my CSS – e.g. there is an
annoying bug in IE’s rendering of pages that include an <em> tag. So if
you notice the right grey line missing on a page which has italics, that’s the
reason. This and a few other minor things still need patching up. I also suspect
I haven’t covered all bases for backwards compatibility (IE 5 browsers and the
like). Sigh, the joys of CSS design. I will try and fix these things up over the
next few weeks.
One more thing, I will try and jazz up the design some more – e.g. with a
graphical header and some more stuff in the right column…maybe music-logging
(a la Lucas and Seb)??
Hmmm, have to think about that. Any suggestions?
Summary
Well that about brings to a close my latest project – moving to MT and
designing a new CSS layout. I can now get back into writing and other
explorations. I have an interesting RSS article coming up, regarding
E-Government. Stay tuned 🙂
