Vandaag hebben we de lancering ondersteund van BigBoulderConf.com, een site die we hebben ontworpen en gebouwd voor GNIP's Big Boulder Conference. We zijn erg tevreden over hoe het project is afgelopen. Hier zijn enkele details:

Een logo en merk

We besloten te beginnen met een logo dat Boulder's beroemde Flatirons omzet in één geweldige piek (de "Big Boulder", als je wilt). Onze designheld Anthony nam basissymbolen van de eerste, tweede en derde Flatirons en vereenvoudigde ze.

Terwijl we samenwerkten met onze uitstekende vrienden Randy en Bre bij GNIP, hebben we verschillende typografische behandelingen in combinatie met het logo onderzocht. De voortgang is duidelijk zichtbaar in de afbeelding links, die illustreert hoe het definitieve logomerk tot stand kwam.

Een website voor alle apparaten

We sprongen direct van het Big Boulder-merk naar websiteontwerp. Dit was een nauwe samenwerking tussen Anthony en onze resident HTML samoerai, Steve, omdat we vanaf het begin toegewijd waren om deze site zeer responsief te maken. Dankzij Steve's precisiezwaardwerk ziet de site er geweldig uit op grote schermen, middelgrote schermen en kleine schermen. En belangrijk is dat de inhoud afneemt tot slechts de meest essentiële items wanneer deze op een klein scherm wordt bekeken.

We hebben responsieve gridbibliotheken zoals Foundation en Bootstrap in onze apps gebruikt gedurende een bepaalde tijd, dus we besloten hetzelfde te doen met Big Boulder.

Zie zelf! Vergelijk bijvoorbeeld hoe de navigatiebalk van de site eruitziet op desktops met hoe deze eruitziet op je smartphone.

Een lancering

Toen we een solide statische website hadden gebouwd, voegden we een Middleman toe. Als je websites bouwt en je Middleman nooit hebt gezien, bekijk het dan. Middleman laat je jouw statische website een sjabloon maken: Omdat het helemaal gek is om tien identieke koppen en voeten te onderhouden.

Middleman werkt met een verscheidenheid aan sjablonbestanden. We gebruikten ERB omdat we het leuk vinden. Dat stelde ons in staat om dingen te doen zoals dynamische titeltags op pagina's, zelfs al is de HTML-kop ergens anders:

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

Middleman stelt ons ook in staat om dingen te doen zoals CSS en JavaScript minimaliseren en browsers dwingen om nieuwe versies van CSS- en JavaScriptbestanden te laden:

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

En Middleman laat ons belangrijke of herhaalde gegevens in een YAML-bestand plaatsen, waardoor de site veel onderhoudsvriendelijker is dan een traditionele statische site.

  registratie:
    label: Registratie Geopend
    description: Registreer buiten de Xanadu Balzaal in het St Julien Hotel en Spa
  

Ten slotte bouwden we een geautomatiseerde implementatie naar onze staging- en productieomgevingen (gehost op EC2). Bouw de site, rsync naar de server.

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

Is dat niet mooi?