Re-design Part II

I have completed my meager blog re-design. This post will expand on why I decided to employ certain visual elements and my successful/unsuccessful attempts at incorporating layout changes.

To start, I have to credit the tutorials at http://www.bloggerbuster.com/. The tutorials cover a wide variety of topics, some geared towards advanced HTML coders and some that cater to novice bloggers who do not have a thorough understanding of HTML.

I started with Blogger’s standard minima template. Using soothing shades of blue, I developed a personalized banner and placed it at the top of my blog. Perhaps I am partial to the nuances found in different shades of blue because the two companies I’ve worked for in my technical writing career have prominent blue logos. I’ve always enjoyed the blue/white contrast.

I used various bloggerbuster tutorials to edit the minima template’s CSS to import a patterned, blue background image. I downloaded the pattern from a personal pattern portfolio at http://www.squidfingers.com/ and think the blue and white pattern provides a nice ‘matting-like’ background to the text.

I modified the CSS to change the background color of the main posting space. Again, I chose a soft blue color. I had to search for the color’s hexadecimal equivalent and then add the hex number to the CSS, but I was able to do so easily.

I used a second bloggerbuster tutorial, along with Blogger help files, to modify the margins and padding of the side bar and the main posting area. I added some additional padding, extended the margins and placed a black border around each element. I think the black border helps to differentiate the sidebar from the main posting area.

During the re-design process, I also wrestled with layout changes, but didn’t have much luck. I was able to remove/add Widgest, but my attempt at converting the blog to a newspaper-like, 3 column layout was frustrating and unsuccessful. I eventually reverted back to the standard minima template layout.

I also tried to incorporate ‘read more’ links on each post, which would reduce the scrolling required to read all posts. Read more links would allow me to hide content in large posts and have readers simply click links to ‘unhide’ content. Granted, I didn’t start this process until the day the site re-design was scheduled to be finalized, but I had a difficult time making the CSS edits required to complete this task, so I deferred.

For typography, I used Web-friendly Verdana font for the body of blog posts and sidebar links. I chose Arial for all headings. I think this combination works well and have always thought Verdana was a pleasing sans-serif font for Web-writing.