The New Fort George Brewery site
April 10th, 2017 by Gage Pacifera
It’s kind of hard to believe that it has been over five years since Harmonic Northwest put together Fort George Brewery’s first “real” website. That website housed lots of great information about the brewery, a rundown of the beer selection, engaging animations, a WordPress-based online store and a button that played a very catchy theme song.
Since then, things have changed a bit. Web design has gone fully responsive and cleaner aesthetics prevail. Elegant, easy-to-use storefronts like Shopify and BigCommerce have made creating and managing online stores a breeze. Instagram solidified itself as a leader in the photo-blogging world and also came into its own as a marketing tool. And all of a sudden, a brisk wind blowing through the mouth of the Columbia seemed to whisper that it was time to retire that old theme song.
So we proceeded with putting together a brand new site. The design effort was once again led by Josh Berger of Plazm. Ryan Niswonger headed up development. I supported Ryan and focused mostly on project management. Photos and copy were sourced internally. You can see the results of our efforts here:
Fully Responsive
One of our primary goals was to make the site fully responsive, meaning it needed to look great across a range of devices from mobile phones to large high-pixel-density retina displays. And that we did. Full width images and backgrounds abound in a largely single-column layout that gracefully translates from desktop screens to handheld devices. The grid of blog posts becomes a simple vertical list on the phone. And carousels are not longer just clickable, but also swipable.
Social Media Integration
The site features some nice integrations with Instagram. The home page sports a swipe-enabled full-width band of curated Instagram photos that turn into a slideshow when clicked. The beer pages allow the content editor to pick a hashtag to display a dynamic collection of user-submitted Instagram photos. Users can easily share posts to Facebook, Twitter and Google+ from the blog teasers and posts themselves.
Beer Finder
We were able to put together a really awesome beer finder tool that allows users to find what nearby establishments have Fort George beer on hand. The user can pick a location, search radius, beer and business type to view a map filled with pins of participating locations. The data comes from a distribution database and is accessed via a JavaScript API.
Online Store
We decided to use an external service for the store to give shoppers and administrators the best possible experience. We went with BigCommerce, which has some really great templating and development features. The store allows users to view categories, buy merchandise and apply shipping and tax charges on a per product and per customer basis. On the back end, administrators can edit the store’s theme and easily manage orders through a really lovely content management system.
Fun
While I was a little disappointed that our old not-so-responsive beer animations had to go, I was happy that we were able to inject some bits of fun into other parts of the site. When a user places their cursor over a beer, the glass drains, and then it refills again when the user moves the cursor out. It’s a nice bit of fun and something that helps endear the site to users.
The navigation is a striking feature of the site. The menu icon, rotated 90 degrees from the normal “hamburger” icon, gives a clue that something is different with this navigation scheme. When the user clicks on the menu icon, an overlay appears fading back the main site while glaringly large, rotated page options fly in, leaving no doubt what the navigation options are.