Idag stödde vi lanseringen av BigBoulderConf.com, en webbplats vi designade och byggde för GNIP's Big Boulder Conference. Vi är mycket nöjda med hur projektet gick. Här är några detaljer:

En logotyp och ett varumärke

Vi bestämde oss för att börja med en logotyp som gör Boulders berömda Flatirons till en enda fantastisk topp (den "Big Boulder", om man vill). Vår designhjälte Anthony tog grundläggande former från den första, andra och tredje Flatirons och förenklade dem.

När vi arbetade med våra fantastiska vänner Randy och Bre på GNIP, utforskade vi olika typsnittsbehandlingar i kombination med logotypen. Progressionen är tydlig i bilden till vänster, som illustrerar hur den slutliga logotypen blev till.

En webbplats för alla enheter

Vi hoppade rakt från Big Boulder-varumärket till webbplatsdesign. Detta var ett nära samarbete mellan Anthony och vår HTML-samuraj Steve, eftersom vi från början åtog oss att göra denna webbplats högt responsiv. Tack vare Steves precisionsarbete ser webbplatsen bra ut på stora skärmar, medelstora skärmar och små skärmar. Och, viktigt nog, innehållet avtar endast till de mest essentiella objekten när det visas på den lilla skärmen.

Vi har använt responsiva gridbibliotek såsom Foundation och Bootstrap i våra appar en tid, så vi bestämde oss för att göra samma sak med Big Boulder.

Se själv! Till exempel, jämför hur webbplatsens huvudnavigering ser ut på datorer med hur den ser ut på din smarttelefon.

En lansering

När vi hade byggt en solid statisk webbplats blandade vi in en Middleman. Om du bygger webbplatser och aldrig sett Middleman, kolla in den. Middleman låter dig mallifiera din statiska webbplats: För att det är helt galet att underhålla tio identiska kopior av en huvud- och sidfot.

Middleman fungerar med olika mallspråk. Vi använde ERB för att vi gillar det. Det gjorde att vi kunde göra saker som ha dynamiska titel-taggar på sidor, även om HTML-huvudet finns någon annanstans:

<title><%= (content_for?(:title)) ? yield_content(:title) : "Big Boulder Conference" %></title>

Middleman låter oss även göra saker som minimera CSS och JavaScript, och tvinga webbläsare att ladda nya versioner av CSS- och JavaScript-filer:

<link href="/stylesheets/style.css?1332972306" media="screen" rel="stylesheet" type="text/css" />

Och Middleman låter oss lägga viktig eller upprepande data i en YAML-fil, vilket gör webbplatsen mycket mer underhållbar än en traditionell statisk webbplats.

  registration:
    label: Registration Opened
    description: Register outside of the Xanadu Ballroom at the St Julien Hotel and Spa
  

Slutligen byggde vi en automatiserad distribution till våra staging- och produktionsmiljöer (hostade på EC2). Bygg webbplatsen, rsync den till servern.

  middleman build
  rsync -avz ./ user@server.dojo4.com:/ebs/sites/bigboulderconference2012
  

Nu är det inte det snyggt?