WordPress Responsive Design and Craft Beer

Hows that for a combination? Let’s dive right on in:

The Alchemist Cannery

heady_topper_webWhat a great client, and not for the obvious reason, as the owners and the Communications/Social Media Manager are all on their game, so this was a fun and easy project.

The brief was to take an existing WordPress installation and upgrade it. Easy-peasy, right? Slap a new theme in there and bob’s your uncle. Nope. The new site had to be responsively designed, flexible, and hold it’s vertical rhythm.  In one word, modern.

How To Do Modern Design

Short story: Compass. CSS pre-compiling and authoring gives you so so much flexibility and power it’s not even funny.  The main tool used within the Compass framework for this project: Susy. This little gem gives you a fully flexible layout without non-semantic classes and cruft! Add in variables, mixins, nesting and logic and you can’t fail. Compass has a Vertical Rhythm module that’s pretty amazing just by itself.

Combine beautiful CSS with the power of the @media CSS3 module, and you’ve got one website codebase to rule over all devices: phone, mini-tablet, tablet, netbook, laptop, desktop.  And so it was done.

Slightly longer story: on the WordPress side, the selection of HTML5 skeleton or bare themes is large and growing, so at the end of the day your site is clean, modern, and most importantly for the client, totally custom.

This is getting a bit too long: also, available to mobile visitors to the site is a nice little bonus: The IPA Highway web-app.  Powered by the Sencha Touch javascript framework, this will hopefully prove useful for Vermont’s growing craft beer tourism trade.  This mini-site provides the beer traveller with instant access to all the craft brewers in the state (including map locations, pretty handy in a car I should think), local dining and shopping options around The Alchemist’s hometown of Waterbury, VT, and some basic information pulled directly from the main site.

If you’ll excuse me, I’ve a cold Heady Topper that’s calling my name!


City Tower

Small video clip of an architectural flyaround, featuring a model inspired by Russell Thomas, and extended by myself.

Overall, I think it’s a pretty cool style for visualizing a proposed development or building project. Very effective for getting across any mass and scale issues, and could be extended for studying shadows issues as the arise……..or fall :).

Although you can’t really see it in this clip, I actually built a rather large city around this theoretical building project. Oh well, I honestly thought it would show up better.

Lighting, Surfacing, Rendering and post-production by me 🙂 .

FLW Floor Lamp

anything designed by a certain frank lloyd wright is worth being a fan of.

this is a floor lamp from his wisconson home and studio called taliesin. beautiful bit of furniture, hope the render gets that across somehow.

FLW Floor Lamp

FLW Floor Lamp

Toon and/or Clay Render

I think I’ve settled in on a good “toon” shader. Using the Node Editor in Lightwave, combined with the Final Gather radiosity engine, gives fantastic, very fast results.

I know, I know…this is as far from a classic cartoon sort of look as one can get, but I suppose that’s the point. It’s just a beginning, or a base to work from. Proof of concept I think is the right term here.

After all, this is a three dimensional software package, not a 2D painting sorta thing (which I’m NO good at anyway!).

shock toon

Clay Render

I’ll admit it, I’m a sucker for a good clay render. While quite simple to setup, they nonetheless demonstrate all the good qualities of a 3D render. There’s chatter in the CG world these days of “physical sky” rendering technology and companies that sell themselves specifically on this feature. Just wanted to demonstrate that Lightwave can play that game too!


(Full disclosure: I did not model the bike, but found it on a Blender site and just exported to Lightwave. It’s got issues, but not worth the amount of time it would require to clean it up)