Finally! I have updated my blog with a new layout. I’ve been working on this for the last couple of days, and it has been lots of fun. It’s a really long time since I’ve had the chance to challenge my esthetic senses and creativity.
I use DasBlog as blog engine. It runs on ASP.NET 1.1/2.0 and it’s developed in C#. DasBlog is an evolution of the BlogX blog engine originally written by Chris Anderson. The initial conversion from BlogX was created by Clemens Vasters when he was working at Newtelligence. It’s free BSD-licensed, easy to use and have support for the MetaWeblog API.
Design and implementation workflow
I started to design the new layout in Adobe Photoshop. When I had a design I was satisfied with I started to port the design to HTML.
I used Microsoft Expression Web to implement the layout in HTML. I had never used it before I started the work with the new layout and it really gave me a good first impression. Most of the work was in the CSS editor. The intellisense (code complete) in this editor was excellent. For instance when I had to specify the URL for a background image one of the choices for the value given by the instellisense was “Pick URL...”. When I selected this choice I got a File dialog to pick the image. Neat features like this gave me an impression that this is a piece of high quality software. Then I started the DasBlog implementation phase.
First I downloaded the latest DasBlog bits and set it up to run on my local computer. Then I started to port the HTML layout over to DasBlog “format”. This might sounds like a job for a monkey since I repeat the previous task, and it is. To use the DasBlog terminology I started to implement a theme.
The built-in themes are found in the “themes” folder in DasBlog. I just started to copy one of this and renamed it to “goeran”. Then I started to xcopy over the style sheets, javascripts and images from the implementation I did in Microsoft Expression Web.
DasBlog engine use templates to render the content. This templates have “.blogtemplate” as extension name. You should pay attention to homeTemplate.blogtemplate, itemTemplate.blogtemplate and dayTemplate.blogtemplate. The hometemplate renders the skeleton of the HTML page and the itemTemplate renders the post content. The relation between this templates are homeTemplate 1-1 dayTemplate 1-* itemTemplate.
The first job of creating a theme package was to copy the HTML from the previous implementation to the blogtemplates. This was a bit time consuming because of the cache options in the DasBlog engine. But after many hours of hacking I managed to create a DasBlog theme package from the HTML layout is designed with Microsoft Expression Blend.
This was a really nice workflow and I suggest the same for others that going to implement a new design for their DasBlog based blogs.
I’m wondering though if there is any packaging tool for DasBlog themes? I would be really neat if I could take the HTML implementation and convert it to a DasBlog theme. The tool could work like a code generator to generate DasBlog theme specific files based in the HTML implementation. The HTML implementation could consist of tokens to notify the packaging tool about it contents. For instance [BlogTitleLink] token in the HTML implementation notify the tool to create a <%SiteNameLink%> macro in the DasBlog template.
The new layout
This is the first version of the layout. During the summer I’m going to give it some few small upgrades.
I tried to design the layout using usability blog guidelines from Jacob Nielsen. One of the things I would like to point out is the photo of me in the upper right corner. This is the author photo. According to Nielsen this is suppose to give the readers a more personal impression of the author (me). This is illustrated in the picture below.
Blog header
I’ve chosen to remove the Calendar as a navigation tool. Personally I never use this, and I think the “months archive” and the Tag cloud are way better for navigation. And I doesn’t post that frequently anyway that there need to be a timeline browsing for my posts.
I’ve bought a new domain, goeran.no. And added my blog is published under the sub domain name blog.goeran.no. I have a very common sure name (Hansen). It was impossible to get this domain name.
I’m still working on the author biography. According to Nielsen this is a simple matter of trust. Anonymous writings have less credence that something that’s signed. I also think this give a more personal touch over the blog. As well as information about the author, credentials and experience. The first thing I do when I read a new blog that’s interesting is wondering who the author is. Do you?
Mashups
I also mashed up with some online services. You have probably noticed
(I hope) that there is a speech bubble over my author photo in the upper right corner. The text in the speech bubble is received from my Twitter account. Twitter is a social networking and micro-blogging service that allows users to send “updates” via SMS, instant messaging, twitter website or 3rd party applications. These updates are displayed on the user’s profile page and also instantly delivered to other users that have signed up to receive them. If you someday create a Twitter account my username is goeran (http://www.twitter.com/goeran). When I have short messages to my friends or some notice I would like on my blog I just post a new message on Twitter. I use a Windows Vista Sidebar Gadget to post new Twitter messages as well as monitoring my friends messages.
I’ve been a Flickr user for about a year now. Flickr is a photo sharing service that allows users to share photos. I have of course mashed up with Flickr as well. My blog renders my 8 last photos on Flickr.
I also created a Technorati account. Technorati is an internet search engine that search blogs. What’s cool about Technorati is that it enables me to check if there have been some reactions on some of my blog posts. Since is a “Web 2.0” application is also have some nice API’s that can be use to integrate with. This enable me to show “blog reactions stats” in the bottom of the posts on my page. This is illustrated in the picture below.
Technorati blog reaction in the footer of my blog posts
I use Google Reader as RSS aggregator. There is to reasons why I started to use it. It is accessible from mobile phones using WAP and it is easy to share blog posts items in feeds that I subscribe to. Other people can subscribe to these collated feed of shared items. I’ve inserted a snippet of JavaScript code into my blog that display my 5 last shared items. All my shared items are accessible from here.
The reason I think the sharing feature in Google Reader is neat is because it enable people with same interests to share subscribed blog items. I subscribe to Robert Scobles shared items, because we have lots of common interests and it seems like he spend a lot of time browsing feed items in the aggregator. He is kind of filtering out the good stuff and shares with other people. You can find his shared items here.