Portlandbeer.org Mobile

Beer and technology are two passions of mine. During the day, I'm a programmer. At night, most weekends, holidays, and some mornings, I run portlandbeer.org. If you're one of the 10,000 people that have visited the site in the past two weeks, you probably noticed a drastic change to the way portlandbeer.org looks. I relaunched the site without publicly saying too much in order to quietly fix any lingering issues before calling out to the masses.

The overall goal at portlandbeer.org is to connect people with beer in Portland—and there is a lot beer in this city! Our focus is news on beer releases, beer events, brewery profiles, beer ratings, and anything else that might bring you a little closer to your favorite Portland beer. The mobile stats on our site show that 36% of our traffic reaches us through a mobile device. It would be a great disservice to those users if our site had any technological walls up that would hinder those users from accessing what they need on the site. Mobile users also use websites a bit differently than desktop users, often as a casual browse in a spare moment. For that reason, it's less important to wow the mobile users and capture their attention. It's more important to make sure that they can find the information they want, quickly.

Our stats also show what our users have been most interested in: 1) Newly released beers, 2) Beer events, 3) Beer articles and event coverage. In our new site, everything is subordinate to these three content areas. A quick look at the home page will quickly display those three categories, with direct links to the most recent content in each. At the bottom of each category are the most viewed subcategories. For example, after the recently released beers section, there are links to beer related items: Top 40 Beers, Taprooms, Bottleshops, and if you want to really geek out, some Portland beer statistics.

The pages also respond to the type of device you're on by only serving up the necessary content. Desktop users will have access to the same information, but will also be presented with complementary images and a more expansive layout for larger monitors. Mobile and tablet users will be grabbing "lighter pages" so that the information is fast and unburdened by bandwidth hogging images.

But it's not just a new design and layout, we've also added new features. For mobile users, you'll also see a new menu item under Breweries called "Find Closest Brewery (Note: This feature has been replaced or updated since this posting)". The page will ask you to to allow it to grab your current location, then will display directions on a map on how to get from your current location to the nearest Portland brewery. As of a couple of days ago, we've also added the ability to find the nearest Portland taproom (Note: This feature has been replaced or updated since this posting) and bottleshop (Note: This feature has been replaced or updated since this posting) as well! But that doesn't mean that laptop and desktop users will be left out of the loop on new features. In fact, if you're on a larger device, you'll see new slide filters (Note: This feature has been replaced or updated since this posting) on every beer page. These sliders allow you to pinpoint abv and ibu ranges for the beers you want to see, and hide the rest. On every page, you now also have access to the Beer Finder. Just start typing the name of a Portland beer and if we've got it on our database it will display it. You can then hit "Go" and get all of the information we've got on the beer, find it and rate it! The site also makes use of in-page social media like Twitter Web Intents. This allows the user to interact with content directly on the page if the user is logged into Twitter.

Hopefully everyone—not just the mobile users—will enjoy the newest incarnation of the site. To get to this point, we've listened to all of your feedback and added the features you've requested. For the more technical of you out there, tune in to the next installment, where I dig a little deeper into the technologies behind the curtain. Cheers Portland!