Website and Blog redesign

If you've looked at my blog or website recently you may have noticed a few changes...because yes I've refreshed the design on both again (I think the last time I did this was about two years ago).  And just as a way to share and document my thought process, I thought I'd write out why I did what I did.

Blog redesign:

When I redesigned the blog two years ago Blogger templates were...shall we say lacking?  You couldn't really do much with the basic template designer they had, it was a bit of a pain to try to customize it, and you had to play with a whole heck of a lot of code to get it to do what you wanted to do.  So I went outside Blogger and found a third party template that looked and worked like I wanted it too. 

But over the last two years Blogger has really improved their template designer to the point where they have a lot of different options, including many that I was looking for--pages, multiple columns, columns in the footer, etc.  Even better they've made it so that you don't have to mess about with the CSS to get everything that you were looking for (you can though if you need to and even better they have an option where you can add CSS without having to go in and mess up the template.)  It's also a whole heck of a lot easier to change colors, backgrounds, and so many other options.  So that's one reason why I switched templates and went back to the Blogger template designer. 

Another reason for the switch is that as Blogger made these improvements it was becoming really complicated to use the third party template with these new options and getting them to work right.  So in an effort to preserve my sanity I switched back...it will also make updating and being able to take advantage of new features easier in the future.

And a final reason for switching back, Blogger recently introduced mobile designs of the blog.  Not all templates have customized ones (this one doesn't) but every template has a basic one that it will default to, which is a really nice thing to have without having to do a bunch of extra code or plugins.

I'm still tweaking it a bit, but I'm mostly happy with it.

Webpage redesign:

When I redesigned my webpage a couple of years ago it was to take advantage of creating one page and using JavaScript to switch out the divs (also because my first webpage was pretty horrible on the eyes.)  And while I liked what the JavaScript could do...it was just a bit messy compared to some of the stuff that jQuery can do now.  So I took advantage of some of what I've learned in the past year to use jQuery and to also spend some time cleaning up the code (it was just a wee bit messy and was hard to follow in some cases.)

One of the things that I wanted to use jQuery for was to clean up the tabs at the top and how they transitioned.  I also wanted to do something about the presentation page because it was getting really long and a bit messy looking.  So instead of reinventing the wheel I found some guides and tutorials online for people that had already created some tab structures with CSS that I liked.  While I could have written out the code (and will in future projects) what I wanted to with the presentation page was beyond anything I've done in the past so it was important to me to look at options that were out there.

With the tabs at the top I knew the basics of what I wanted which was something similar to what I had before, but with a cleaner transition.  And after looking at a few different ones I found this tutorial and code that was exactly what I was looking for, at least as far as the transitions and feel went.  I had to adapt the CSS structure to do what I wanted and work within the website template that I have and I had the help of a colleague to write and if/else statement for the jQuery code so that I could have the last tab on the page and go directly to my blog (the way the code is written it just wanted to switch divs and I really wanted it to be a direct link.)  It works pretty well although I still need to do some tweaking to it, but overall I'm happy.

Even more important to me though was doing something about the presentation page because that was getting nasty looking and hard to find the presentations.  So I figured there had to be a way to use jQuery to have one box and a slider that would transition from one section to the next and I found this nice little tutorial that was exactly what I was looking for.  Now it may not work in a couple year's time (especially if I keep adding to the number of presentations that I've done), but it works well for what I need now and I didn't really have to adapt it too much...although I may tweak it a little bit here and there.

With this redesign I also really wanted to clean up the code, especially the CSS, because I didn't do that well the last time I updated the page.  I had outdated CSS from the first webpage, things that I had tried and decided not to do, I had trouble following my own divs...in short it was just messy.  So I cleaned it up line by line and added some comments into the code just to make sure that I closed all of the divs and later on I can look back and see what goes where.  I know there are other ways to do this, but that's the one that worked the best for me.

It was a fun project to work on and a chance to practice some new skills that I had learned..and hopefully in another couple of years I'll have even more skills to show off.