Most of the redesign was done last week, this week I went through and fixed up all the old posts and a few minor issues that revealed themselves with the styles.

Goals

There were a few goals I wanted to accomplish from the redesign/overhaul.

1. Make it modern, clean and attractive.
2. Familiarise myself with how the Blogger templates worked.
3. Fix the way I was including files into posts, just include them globally.
4. Tidy up old posts; layouts (code blocks, inline styles), links (pointing at old domain) and add jump breaks.
5. Make the top menu less of a random mash up of pages.

I think it turned out pretty well and feel that I accomplished all the goals.

Key new features

1. The top menu is no longer the blog “pages”, instead it now links to C#, CSS, HTML and JavaScript label searches and an about page.

1. An “experiments” section is now located underneath the Social / RSS section and includes what used to be in the random mess at the top.

1. The labels section now visualises the amount of posts with bars underneath.

1. Instead of the icky style="background-color:yellow" from the WYSIWIG editor I’ve started using <mark>.

2. I modified the code styles to match the layout and found the unofficial JavaScript logo which looks a hell of a lot nicer than the VS2010 JScript icon I was using before.

Outcome

Before

Design mockup

After

More posts tagged Design