Sanjeev Goel – New Showcase Site

Sanjeev Goel - Showcase

I recently finished putting together a site for my client and friend, Dr. Sanjeev Goel.  Sanjeev’s involved in a lot of assorted initiatives, both humanitarian and technologically innovative programs in the health care industry – what he needed was a place where we could send people that would give them access to all of his assorted projects and endeavours.  So the idea of SanjeevGoel.ca as a showcase site was formed. 

RSS Display Boxes script by DynamicDrive.comThere were a couple of key things that we needed to accomplish.  The first being that, since Sanjeev is so prolific in his blogging, we had to find an unobtrusive way to link to his newest postings on a series of different sites.  Obviously we turned to RSS and decided then that displaying the titles of his most recent articles/posts from a number of sites was the best way to pack as much information and access into a small portion of the page.

To get it to work just right I used a fantastic little script from DynamicDrive.com called RSS Display Boxes.  It’s a solid script that functions REALLY well and that I find performs better than Google’s RSS scripts – even if Google does have a lot of AJAX built into theirs.  (I find that the Google RSS scripts often take forever to load and cause some pages to hang a few seconds too long.)

If you’re in need of an RSS display, I sincerely recommend you give this one a try – it works great and is easy to implement.

As an additional touch of class, we wanted a way to add a network of sites using their logos. The idea was to have an inline, unordered list across the bottom of the screen as part of the footer and as I started wire framing the page, something occurred to me;  I remembered having read a posting about a CSS3 dock that was designed to look a lot like Apple’s dock in OS X.

As it turns out, a few month earlier, I had seen a posting about the work of a developer named Micheal Hue.  He had used emerging CSS3 capabilities to essentially replicate the look, behaviour and overall feel of the dock in OS X.  When I re-visited his site, which I’d bookmarked in my ever growing archive, I saw that he’d improved on what I felt was already a fantastic set-up.  A quick review of the code and what he’d done and I determined that this was probably the best possible solution.  Of course, I figured I’d need to change it up a bit, migrate it away from the OS X replica realm, but keep the same feel to it.

I’ve placed a screen capture of both the Michael Hue CSS3 Dock and the Mac OS X Dock below, for a side by side comparison.  Despite the limited space, due to  the way that the animation works in a few browsers, I felt it was necessary to make the SanjeevGoel.ca icons bigger than the icons on my OS.  Mind you, that’s a personal preference, you could size either dock’s icons to whatever size you’d like.  I also went for a wood panel effect instead of glass as I felt it suited Dr. Goel a bit better.

CSS3 Dock by Michael Hue, modified for SanjeevGoel.ca

CSS3 Dock by Michael Hue, modified for SanjeevGoel.ca

My personal OS X Dock

My OS X Dock, kept pretty small and out of the way.

A note about the icons.  Instead of just placing flat logos into the dock, we determined that it would look substantially better if custom icons were created for each of the sites – some are more true to the site’s logo than others, but, should there be any confusion, they have the same hover state labels that the OS X Dock does.

If you get a chance, I highly recommend you visit Michael Hue’s site and take a look at some of the other work he’s done.  It’s good to pause for a moment and appreciate some creativity and technical expertise every now and again.

This entry was posted in Blog, Projects, Web Layouts. Bookmark the permalink. Trackbacks are closed, but you can post a comment.
    • |
    • |