Oggi abbiamo supportato il lancio di BigBoulderConf.com, un sito che abbiamo progettato e costruito per la GNIP's Big Boulder Conference. Siamo molto soddisfatti di come è venuto fuori il progetto. Ecco alcuni dettagli:

Un logo e un marchio

Abbiamo deciso di iniziare con un logo che trasforma le famose Flatirons di Boulder in un unico picco impressionante (il "Big Boulder", se vogliamo). Il nostro designer Anthony ha preso forme base dalla prima, seconda e terza Flatiron e le ha semplificate.

Mentre lavoravamo con i nostri eccellenti amici Randy e Bre di GNIP, abbiamo esplorato diversi trattamenti tipografici in combinazione con il logo. La progressione è evidente nell'immagine a sinistra, che illustra come è nato il logotipo finale.

Un sito web per tutti i dispositivi

Siamo passati direttamente dal marchio Big Boulder alla progettazione del sito. Questa è stata una stretta collaborazione tra Anthony e il nostro esperto HTML Steve, perché ci siamo impegnati fin dall'inizio a rendere questo sito altamente reattivo. Grazie al lavoro preciso di Steve, il sito appare fantastico su schermi grandi, medi e piccoli. E, cosa importante, i contenuti si riducono solo agli elementi più essenziali quando visualizzati su schermi piccoli.

Stiamo utilizzando librerie di griglia reattive come Foundation e Bootstrap nelle nostre app da un po' di tempo, quindi abbiamo deciso di fare lo stesso con Big Boulder.

Guarda tu stesso! Ad esempio, confronta come appare la navigazione dell'intestazione del sito sui desktop con come appare sul tuo smartphone.

Un lancio

Una volta costruito un solido sito web statico, abbiamo aggiunto un Middleman. Se costruisci siti web e non hai mai visto Middleman, dai un'occhiata. Middleman ti permette di creare template del tuo sito web statico: Perché è totalmente folle mantenere dieci copie identiche di un'intestazione e un piè di pagina.

Middleman funziona con vari linguaggi di templating. Abbiamo usato ERB perché ci piace. Questo ci ha permesso di fare cose come avere tag di titolo dinamici nelle pagine, anche se l'head HTML è altrove:

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

Middleman ci permette anche di fare cose come minimizzare CSS e JavaScript, e forzare i browser a caricare nuove versioni di file CSS e JavaScript:

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

E Middleman ci permette di mettere dati importanti o ripetitivi in un file YAML, rendendo il sito molto più manutenibile di un tradizionale sito statico.

  registration:
    label: Registrazione Aperta
    description: Registrati fuori dalla Xanadu Ballroom presso il St Julien Hotel and Spa
  

Infine, abbiamo costruito un deploy automatizzato per i nostri ambienti di staging e produzione (ospitati su EC2). Costruisci il sito, sincronizzalo con il server.

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

Non è bellissimo?