Revising Playground Design

Over the past few days, I have been playing with the MovableType and trying to make this blog site more stylish. Up to this point, I can pretty much call it "finished" - at least I am pretty satisfied with the templates and CSS style sheets I have having at the moment, until the next time I feel like tweaking again. I won't call it a complete re-design, but rather, it is more like a face-lift from the standard templates. I am hoping to write up this entry to document the things that I have changed, and the reason behind these changes.


First of all, I am not a web designer. I am a software engineer who code more in C++, Java, PHP and Python than in HTML and CSS. So put that in mind before flaming your criticism to me. And secondly, I much prefer a clean and simple design. I like websites that works, and I really don't appreciate sites with hundreds of kilobytes of images that need to be downloaded before making any sense. While I like the idea of CSS and DHTML and use quite a lot of them, I don't appreciate sites with IFRAME's or overflow DIV's everywhere, and usually they come with multiple DIV layers and background images, etc. And when you look at the code and overall design, you know that it is not going to work on anything but Internet Explorer 6 at 800x600 24bit colour. It is usually distressful to read these sites because of the distraction of fancy graphics (which sometimes renders the main text unreadable on Mozilla). I am telling myself that if I am setting out to revamp the site, I will use as few image as possible, and at the same time making the text as the centre of the blogsite - as it was what the web pages were about in the first place anyway. I want something simple that works well and puts the text to the foreground.

At the same time, I'll call myself an amateur Search Engine Optimisationist. I would like to tune a site not just for another human being sitting on the other side of wire, but also for the bots that spider through the links indexing the webpages. What is the point to let your pages easily understandable by the search engine bots anyway? So that they can be easily indexed in the search engine you are targeting for (Google most likely), and it usually generates more visitors to your site. And it is more than the layout of your HTML, but also how they link with each other as we all know that link matters. Not just external links, but strategically planned internal links can also help certain pages achieve better rating from the search engine.

With all these in mind, I am setting up for some tuning.

2 Columns Design

First thing I did was fixing up the 2 column design. The old design was based on "Georgia Blue" of the default MovableType styles, and it achieved the 2 columns by making the first DIV to float to the left, so that the second DIV will "appear as" second column on the page. I find this CSS trick a bit "ugly" so I changed to use absolute position on the second column to have a fixed width, and always sit at the same position relative to the right hand side of the page.

Moreover, I am also making the individual entry archive to have 2 column design as well, so that I can place the comments plus trackback there. More about it later.

Colour/Fonts

Nothing much has changed. It is still using the blue theme from the original Georgia Blue. Not much change to the fonts either, as it still tries to use "georgia" as the base font for the blog entries. However, I am shooting myself in the foot by using fixed font size! Yes. I know that I will probably be scorned by all the purist web artists, but it is just so hard to make the site looking consistent across the browsers.

Comments and Trackbacks

I am now putting the comments and trackbacks on the right hand side of the blog body, so that you can clearly see who has commented and who has issued a trackback. It also helps to reduce the width of the blog body, as it no longer takes over 100% the width.

However, this layout does not look nice if there is not much content inside blog body, as the right hand side feels too much weight. Maybe I should just write more in each entry so there is enough text to make the individual archived pages look more balanced. 250px for the left column can also be too narrow sometimes as people include URL in their comments and trackback, and those URL will usually overflow. It does not look too bad, but just a bit inconsistent. Never mind.

Javascript

Default MovableType templates have quite a bit of Javascript in the HTML HEAD. I've managed to put them into a separate static file. Even through it might require a separate HTTP request to fetch the file, but it should be cached afterwards if the visitors are reading more than 1 pages.

Search Engine Optimisation

I think keeping the whole site XHTML verified will be a good idea. It is a good thing if your site can be parsed easily by the bots. The original MovableType template is also pretty good, as using DIV tags and CSS makes the raw HTML very pleasant. Meaty parts of the page are pushed to the beginning of the BODY tag, and each page has a feedback link back to index page - good stuff.

In the original templates, MovableType will use "Site Name - Blog Subject" as the title of the individual archive. It is probably not a good idea if you have a long site name like mine (23 characters). TITLE tag in the heading is probably the most important tag in the whole HTML document, as it usually weights the most by search engines. Search engine bots usually only index a fixed number of characters from that tag, and the result pages usually only show a fixed number of words anyway. Even W3C suggests that there should be less than 64 characters. So the final verdict is - get rid off the "Site Name" but make sure I always have meaningful "Subject" for my blog entries.

And I set up the HTML header to have only the index page and individual archive pages indexed by the search engine. There is no point to index the category archive and date-based archive, as the content is probably duplicated. So I just add some META tag to the HTML HEAD to tell the bots to follow the links but not indexing.

Finally, I also add links from the individual archive pages to their associated category archive pages. It helps the user to jump to pages in the same category, but also provides an internal feedback link to form a hierarchical link structure:

index page >-< category archive pages >-< individual archive pages.

Browser Compatibility

I am trying to get the site to work with most current web browsers. These are the browsers that I have tested.

Browser Platform Compatibility
Mozila 1.3.1 Windows Ok
Internet Explorer 6 SP1 Windows Ok
Camino 0.7 Mac OS X Ok
Internet Explorer 5.2 Mac OS X Search form not positioned correctly
Safari 1.0 Mac OS X Ok

I still need to test Internet Explorer 5 on Windows, Opera 6/7 on Windows and Konqueror 3 on KDE, as they are also used frequently.

Conclusion

Well, my site now looks refreshing - for now at least. At least it does not look like another "georgia blue" mutants. It's also good to actually put the reasons behind some of the changes. Let's see how long this style will last.


Updated at 6 July 2003 11:19pm: After one week with the new style, I decided to move the comments back to the end of the article on the left column again, because it really does not look nice on the right column, especially if there are a lot of comments for that entry...