Design

Credit where credit is due…

With Firedog’s recent relaunch we really wanted to give the site enhanced usability by introducing new bleeding edge technology. In other words, we wanted to take the existing site, and Pimp It.

This blog post (the first of two) is to give some insight into the technical advances on the site. Post one (this little beauty) is in relation to our new portfolio page, its filtering system and the legend that is David DeSandro.

I always give credit where credit’s due, and my-oh-my is credit due! The brief for the portfolio page was to create a living and breathing portfolio, that could fit any screen dimension, it had to be cross-browser compatible and be filtered by any attribute. Last but no least, it had to blow potential and existing clients away!

Sounds easy? Well there are a lot of tools on the web that could achieve a few of these goals, but only really one is the master of them all. That resource was Isotope. I initially came across Isotope’s creator David DeSandro via his excellent layout plug-in called Masonry a while back, if you are technically proficient this may make sense to you:

“Masonry is a dynamic grid layout plug-in for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.“

Masonry is pretty much what we wanted, but we wanted it pimped! Luckily, DeSandro was thinking the same thing, he released this video back in January and got the Firedog’s mouth slobbering…here is what wetted our appetite.

So isotope was to be the resource for us, and it has been tremendously successful, with isotope, we could achieve the masonry layout but with the added magic we needed, elements can be filtered by any attribute we applied, be in any order we required and importantly be able to fit nicely together once a user decided to filter the results. I cant recommend it highly enough.

Actually, without getting too carried away, I cant recommend DeSandro’s work highly enough. On top of all this, it turns out he is also a gentleman and a scholar (or as we say in South London – a top fella). He has been very helpful and supportive in our development process and I for one will be tracking his future projects and those of nclud (his employers) with a keen eye.