My 2016 Site Makeover


After ten years, Iíve finally released a modern redesign for my website. Itís clean, responsive, and looks great.

Cleanblog Theme for reids4fun.com, 2016Finally making the leap, I released a new template for my primary website this weekend. As noted in the past, Iíve been fed up with my 2006 based theme and have been testing out new designs for a few months now. Transferring most, but not all, of the design ideas from my test site, I just couldnít wait any longer. Tweaking continues, but you can enjoy the new look now.

A Good Starting Place

The theme is a clean and flat design based on the Clean Blog theme over at Start Bootstrap. As is often the case, I had to customize it to make it work for my CMS. Before even trying, I spent time with my old Perl based blogging script to learn and get everything working like I ultimately want it to. With ultimately being the key word here. It will take a lot of custom code to get all the features in my custom script coded into my CMS.

In fact, I was struggled few the last couple of weeks with which direction I wanted to go. One option was to replace my CMS with my custom script. The problem with that that script is bare bones. There is no editor or accounts for example. To create posts, I have to manually create the files and upload images. Although not hard, it feels like a step back. And besides, it doesnít scale well to my other sites that need that extra functionality.

The other option is to customize my CMS. Based on an old version of WebAPP and hacked and slashed over the last ten years, I struggled with having to do more hacking and slashing. It needs a complete overhaul to get it where I want it to be. Yet, it works. Generally bug free and fast, I wasnít relishing the task of completely redesigning it.

Progress won out, and I decided I needed to push forward and make some incremental changes. No longer encumbered by what was ahead, I did just that. The results are now running through the internet and Iím happy with the results.

Headers, Footers, and Other Such Things

To start, I created a new theme. Iíve done this a few times over the year. In fact, Iíd already created some responsive themes for my site. Yet, Iíve never been happy with them and, as a result, they remained unreleased. This time, however, I had the theme already tested and running. This made converting it straight forward.

I should say that Iíve mostly converted the theme over. For example, on my test site Iíve been experimenting with banner titles for posts. Yet those changes, as nice as they are, will need some more customizations that I'm not ready to do. For now, I commented out or coded around those sections for now.

The next big hurdle was getting the navigation to work. The CMS supports menu blocks and I used one of those to create the top navigation. The nice thing is that it is dynamic and I can customize what shows based on whoís logged in. Moving a few things up to that bar allowed me to turn off or push other items into the footer.

Speaking of the footer, that was the next thing to clean up. I didnít want a sidebar, like I used to have, so I moved all the blocks to the bottom. Unfortunately that caused a bunch of stuff to get jammed into the bottom section. To combat that, I broke it into three columns that stack depending on the device size. In the future, I will look to hide some of those sections on smaller screens.

To finish out the bottom, I cleaned up the menus and updated the tag cloud. I removed the default breaks from the items, allowing them to fill the space. It looks okay, but I have some work still to do. I thought about breaking things into panels or using a different color background to help things stand out. Not quite what I was going for, though.

Cleaning Up Those Articles

Once I had the headers, footers and menus done, I began working on the front page. To my surprise, the look of the front topics controlled in the theme itself. For some reason I thought it was hard coded, much like the article view. For the most part, it wasnít, making it easier to get the look I wanted.

Armed with this new knowledge, I moved stuff around to better match the test design. This meant nicer titles, better looking metadata, and cleaned up footers that separated each article. Unfortunately, not everything could be done in the theme.

The biggest problem was that some of the CSS didnít quite fit. More annoying, I had to update the perl code to fix it. Yes, I need to separate out any and all HTML and CSS into templates. That isnít how the CMS currently works, so it isn't something I'm going to fix today.

It didnít take too long to code in the classes I needed. I also fixed a few bugs along the way. Some were long standing issues that I solved fixing other things. For example, my test blog uses pure HTML to display the articles. While converting the theme to my CMS, I had to deal with the mix of UBBC and HTML it used. In fixing that, I also cleaned up some oddities I had editing articles.

One more thing I had to do was use windows-1252 instead of the default utf-8 encoding. Designed to use that encoding, converting the CMS to use utf-8 will be a lot of work. Besides updating the perl code itself, I will need to edit and convert all 253+ articles. I want to make the change, but that is more work than I wanted to put in this weekend.

More Changes Await

I really like the way the site looks now. Clean, modern, and passing Googleís mobile test, my site now has good a good base and a skin I can work with. The skeleton needs attention now. In fact, Iíve already begun shaping up some up some of those bones. Iíll talk some more on that in a future post.



Comments on this article:

No comments so far.

Write a comment:

Type The Letters You See.
[captcha image][captcha image][captcha image][captcha image][captcha image][captcha image]
not case sensitive