Today we supported the launch of BigBoulderConf.com, a site we designed and built for GNIP's Big Boulder Conference. We're really pleased with how the project turned out. Here are some of the details:
A logo and brand
We decided to start with a logo that turns Boulder's famous Flatirons into a single awesome peak (the "Big Boulder", if you will). Our design hero Anthony took basic shapes from the first, second, and third Flatirons and simplified them.
As we worked with our excellent friends Randy and Bre at GNIP, we explored different type treatments in combination with logo. The progression is evident in the image to the left, which illustrates how the final logomark came to be.
A website for all devices
We jumped right off the Big Boulder brand into site design. This was a close collaboration between Anthony and our resident HTML samurai, Steve, because we committed at the outset to make this site highly responsive. Thanks to Steve's precision bladework, the site looks great on big screens, medium screens and little screens. And, importantly, the content tapers to only the most essential items when viewed on the small screen.
See for yourself! For instance, compare how the site's header navigation looks on desktops with how it looks on your smartphone.
Once we had a solid static website built, we mixed in a Middleman. If you build web sites and you've never seen Middleman, check it out. Middleman lets you templatize your static web site: Because it's totally crazy to maintain ten identical copies of a header and a footer.
Middleman works with a variety of templating languages. We used ERB because we like it. That allowed us to do things like have dynamic title tags on pages, even though the HTML head is elsewhere:
<title><%= (content_for?(:title)) ? yield_content(:title) : "Big Boulder Conference" %></title>
<link href="/stylesheets/style.css?1332972306" media="screen" rel="stylesheet" type="text/css" />
And Middleman lets us put important or repetitive data in a YAML file, making the site far more maintainable than a traditional static site.
registration: label: Registration Opened description: Register outside of the Xanadu Ballroom at the St Julien Hotel and Spa
Finally, we built an automated deploy to our staging and production environments (hosted on EC2). Build the site, rsync it to the server.
middleman build rsync -avz ./ firstname.lastname@example.org:/ebs/sites/bigboulderconference2012
Now ain't that pretty?