Blog

New Design, New WordPress, First Ajax, First Scriptaculous

New DesignPhewf! What a friggin overhaul! I was getting very bored with the old site and had been squatting on a new design idea for a while, so I finally gave in and wrote my own WordPress theme. A few months ago, I was very much inspired by Scott Schiller’s work (I even borrowed some of his code) and was determined to incorporate some DHTML animation in my new design. If you missed the DHTML animation when the front page loaded, you can close your browser windows (to kill the PHP session) and open a new one to http://bradt.ca/.

A minor release of WordPress (2.0.1) was recently released, so I upgraded it. A few of the annoyances I noticed in the 2.0 release are gone now, which is great! Next on the WordPress front for this site will be installing a tagging plugin. The Ultimate Tag Warrior plugin appears to be pretty good despite it’s old-school wrestling reference.

This site revamping has been by far the most Javascript intense project I’ve worked on so far. The live search implementation (above) is my first crack at AJAX and Scriptaculous. I am not a fan of using a large library like Scriptaculous for a few transition effects and a bit of AJAX, it seems like overkill. But on the other hand it is very easy and quick to develop with, so it saves quite a bit of time. Next thing to do with AJAX will be to implement comment loading and comment posting. It’s so nice when you don’t have to leave the page to reveal comments and post your own.

Please leave me your comments about the new design and the live search implementation. I am anxious to hear some feedback!

  • http://anisotropic.net JeffG

    very scriptacular! My only criticism is that the page performs like a dog on my iBook, mostly because of this:

    background: #cccc99 url(“images/bg.gif”) repeat-x fixed top left;

    fixed bg images are non-speedy on Macs ( except maybe bunny… )

  • http://brad.touesnard.com BT

    I’ve noticed the animation is a bit sluggish rendering in Firefox too. I’m going to try a few things to optomize it, maybe decreasing the background size will help, and turning off ‘repeat-x’.

  • http://www.fiveoneten.com/ Luke

    ha ha you went to town
    they are cool effects but i liked your old style better
    i think for a site like yours the ajax should be more subtle
    not the ajax.. but the animation aspect of it
    yeah, but it’s sort of there just because you put it in.. not because it adds anything
    sorry i dont wanna be dissing your work, just my comments
    the background is pretty distracting too
    i think some of the font sizes are a bit off too
    the menu is super large
    and there sa bit of a mismatch between your retro-futuristic background theme and the icons you use for the categories, which are kind of like OS icons

  • http://brad.touesnard.com BT

    Thanks for the input Lukester, my design training is next to nothing so it’s good to get a professional opinion.

    I was going for something very different with this one, something that clashes horribly. I think my design goals were huge menu, retro background, throw a car in the there somewhere, giant titles, and a bit of apple style. Wow, maybe I should have planned it out a little, hah!

    “Throw a car in there” is my favorite though.

  • http://blog.seanmcg.com Sean McGrath

    looks good brad! the animation is slick and ajax rules! i have been using it at work for the last little while, and i know the next site i overhaul or create will certainly have some in it.

    my only complaint is with the live search (using safari)…..but i’m not really sure how it is supoosed to work…

  • http://www.schillmania.com/ Scott Schiller

    Not bad! ;)

    If I may suggest a clarification, AJAX in the technical sense is when server requests are involved; all that other animation stuff and whatnot is just plain old javascript. In the words of amy hoy (http://www.slash7.com/articles/category/ajax/ – check it) – “no server requests? It ain’t AJAX.” (She’s got a great AJAX “fact sheet” which you can print and hang outside your desk/cube.)

    You might be interested in Yahoo’s YUI libraries and design patterns. http://yuiblog.com/

  • http://brad.touesnard.com BT

    Thanks for the encouraging words folks! Good to know people are having fun with it. I certainly had fun building it.

    Scott, when mentioning AJAX I am referring to the “Live Search” implementation in the header, which does make a server-side call to a PHP page to return search results in a DHTML animated dropdown. Well, at least it is supposed to, it is very new, so there could be bugs.

    Yea, I’ve taken a quick look at the documentation for the YUI libraries and the design patterns. The design patterns were not all that revolutionary, but the YUI looked pretty good. Again, not a fan of bulky libraries though. If someone would make a library that comes with a tool to compile a JS file with only the library elements used and the neccessary dependencies, now that would be cool!

    Thanks for the preloader code and the inspiration! :)

  • Pingback: brad.touesnard.com » Redesigned and refocused on usability

  • http://www.reallifelog.com/chasingcars chasing snow cars patrol lyrics

    cars chasing snow patrol lyrics cars patrol snow chasing lyrics