Using Masonry to create the Tilez theme for TalkingPointz

One of my first big clients was in the IT industry. He came on board in 2006, and aside from trying out a cheaper option for a few months a couple of years back (before returning for the quality, I would like to think), he’s been with me ever since. Due to this, I find myself working for a variety of clients in the IT field.

Dave Michels is one such fellow. A self-proclaimed “Telecommunications Contemplator”, Dave blogs about all things modern communication. Smartphones, Apple, Skype, router switches, privacy, all types of fun stuff.

Dave’s problem was simple, but finding a solution turned out to be more difficult than he was hoping for. After blogging for a good long while over at Blogger, he had hired someone to switch him over to WordPress. Immediately afterward, he lost a massive amount of traffic due to a poorly transferred website (incorrectly configured .htaccess redirects). To make things worse, he was using the All in One SEO Plugin for WordPress, which instead of helping his site, was faffing up his canonical links and sending other pages around in circles.

And that is specifically what he hired me for. After the original developer and then a second couldn’t figure out the problem (ie, because they were WordPress Theme Installers, not true developers at all), he’d spoken to that other client I’d mentioned, who sent me his way.

That’s the long backstory of it anyway. After we sorted everything out with his existing site using custom coding instead of a bulky, one size fits no one in particular plugin solution, he decided he’d like to move forward with a complete redesign.

Given his high tech topic, I wanted to do something a little cooler with his site than your average two column blog. So I turned to Masonry.

mobile and desktop screenshots of the website
The 2012 Talking Pointz website redesign, shown at full-size and itty bitty mobile.

I won’t go into all of the technical details about how Masonry works, that’s explained fully on its own website, but suffice to say, it removes the linear, scroll forever down the page and search through archives nature of most blogs and replaces that with a series of tiles that make it easier for a user to see all types of content right off the bat. Color and the shapes of certain tiles are used to direct the user to more or less important information.

TalkingPointz mixes podcasts, interviews and blog posts with external RSS feed imports of Dave’s content from around the web. We’d later integrate some additional tools like Easy Digital Downloads and MailChimp, but in the end it’s just a fun site to be on given how everything just sort of clicks together. Head over to the site, give it a look, and if you’re feeling playful, resize your browser window and watch how the pieces all rearrange to fit the new screen size.

← Back to My Portfolio

Up Next: Designing the Three Rivers Arts Festival Website