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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s