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 🙂
Originally published on ReadWriteWeb (archived copy)