Secondo solo allo schiacciare il pluriball, una delle cose più goduriose al mondo è risultata essere tracciare righe sui compiti completati.

L'alba di oggi è stata all'insegna della pianificazione delle operazioni della giornata (geniale no?), quindi si lavorerà su:

Progetto della style guide
Abbattimento del tempo di caricamento della pagine
Realizzazione del disclaimer per la beta
Release del lavoro della giornata
Scrittura di questo post :-)

La nostra roadmap. Andrea, te lo scrivo qui: non è forse ora di tagliare questi capelli?

La style guide

Realizzare una style guide per il web vuol dire progettare ogni tipo di elemento grafico che potrà finire sulla pagina: paragrafi, titoloni, titolini, bottoni pigiati, bottoni non pigiati, elenchi puntati e numerati, link ecc.
avere quindi una visione d'insieme dell'impatto visivo:

Font
Colori
Grandezze
Interlinee
Griglie

Quanto mi viene da cliccare su dei bottoni così? Decisamente molto.

Gli esempi illustri

Per farlo siamo partiti dalla recentissima guida di OPS, la quale a sua volta è ispirata a quella dei maestri di Clearleft, la quale probabilmente si è ispirata a questa.

Lo stile tipografico

Il nuovo font principale sarà l'umanista (si può dire?) Coranto 2, affiancato all'occorrenza dal pragmatico Adelle sans, entrambi disegnati da Veronika Burian e José Scaglione di Typetogether in Repubblica Ceca.

La palette cromatica

Il sito sarà basato su 21 colori e le loro varie tonalità. Il risultato sarà un mosaico policromo. Qui vedete i cinque principali con i loro nomi ficcanti.

Tutto bene, fin quando due uomini non iniziano a parlare di misure.

< nerd mode on >
Il righello si chiama Yslow e la ‘cosa’ è il peso in Kb delle pagine web (che quindi impongono i tempi di caricamento).
Per darci dei parametri abbiamo voluto iniziare misurando le home dei due Rocco della situazione, ovvero il sito di Clearleft e quello di Happycog, in una competizione in cui però vince chi ce l'ha più leggero (ok, la chiudo qui).

Tu chiamali se vuoi benchmark:

Clearleft: 366 Kb, 260 Kb di immagini, 24 richieste HTTP (un dialogo tra client e server tutto sommato frugale, quasi un saluto tra passanti, ei, ciao, ciao, tutto bene?, tutto bene e tu? tutto bene, ok, ciao, ciao);
Emmaboshi studio vecchio: 428 Kb in in 33 richieste di cui 244k di immagini (non male!);
Happy Cog: 1.286 Kb con 23 richieste; Inspiegabile!
Un noto studio bolognese: 2.063 Kb in 62 richieste (un dialogo davvero troppo verboso tra client e server. Uno dei due non vuole collaborare o è duro d'orecchi);

La bellezza di questa immagine

Spaccato del peso in byte di tutti gli elementi del vecchio layout

Rappresentazione visiva del peso di ogni componente della pagina. Non è pazzesca?

Rinunciamo dopo questi test al like di Facebook, che, come si può notare nell'immagine qui sopra, pretende di scaricare una quantità sproporzionata di dati.
Metteremo in sostituzione un bottone di share che ci eviterà di aspettare che Facebook risponda alla nostra chiamata con il conteggio dei like (e il nostro ego se ne farà una ragione).
Stessa sorte avrà il Fancybox per aprire le immagini in grande: pesa troppo. Le immagini non avranno bisogno di essere ingrandite nel nuovo layout perché saranno già abbastanza grandi.

Per concludere questa gragnuola di ore bollenti all'interno core tecnologico del sito Gzippiamo e chachiamo il cachabile (nell'htaccess) e usciamo a riveder le stelle. Mi gira la testa.
< / nerd mode off >

Responsiveness, liberate i margini

Iniziamo a ritoccare l'interfaccia, partendo dai margini che fino ad oggi erano fissi, per intraprendere il cammino che porterà al responsive.

Il cammino verso il responsive è lastricato di media-queries.

Pubblichiamo in beta il sito vecchio con il nuovo font e i primi layout fluidi, che reagiscono tutto sommato bene all'improvvisa libertà, ma la strada da percorrere è ancora molto lunga.

Ci scusiamo per il disagio: il disclaimer

Abbiamo realizzato un disclaimer bello evidente sulla versione beta, nel nuovo rosa squillo istituzionale, che spiega che quello che state per vedere è una versione beta, durante un'operazione in anestesia totale.

Mandateci le vostre opinioni

Scrivetele a studio@emmaboshi.net, sono fondamentali per farci notare quello che noi, lavorandoci da diversi giorni di fila, non riusciamo più a vedere.

Ed ecco l'indirizzo della beta la nostra beta a cuore aperto.

Ci potete seguire, nelle pause di Game of Thrones, qui: http://new.emmaboshi.net (edit: il sito è ormai sullo spazio definitivo www.emmaboshi.net).
Al mio 3 scatenate la cache.

1, 2, 6, 9! cit

Diario di un redesign. Giorno 4

Diario di un redesign. Giorno 3

Diario di un redesign. Giorno 2

Diario di un redesign. Giorno 1