My 2016 Site Makeover
After all these years, my website design is making forward progress.
Finally 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.