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.

We've been using responsive grid libraries such as Foundation and Bootstrap in our apps for some time, so we decided to do the same with Big Boulder.

See for yourself! For instance, compare how the site's header navigation looks on desktops with how it looks on your smartphone.

A launch

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>

Middleman also allows us to do things like minimize CSS and JavaScript, and force browsers to load new versions of CSS and JavaScript files:

<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 ./ user@server.dojo4.com:/ebs/sites/bigboulderconference2012

Now ain't that pretty?

Tweet