Giornata dedicata interamente ai layout delle pagine e ai loro comportamenti sui vari sistemi che potrebbero navigarli.

I margini non esistono più

Eliminare i margini di pagina dalla mente di un grafico cosiddetto «cartaceo» di solito provoca questa la reazione.

Sul web del 2014 i margini non esistono, o meglio esistono, ma possono avere talmente tante dimensioni che è meglio pensare che non esistano.
Per fortuna sono 3 anni che ci lavoro insieme al mio analista (illuminante fu questo magnifico speech di Jeremy Keith from Clearleft) e oggi posso dire di essere guarito.

Anzi, vi dirò che mi piace parecchio fare design visivo di una cosa che non so come verrà visualizzata.

Ad esempio non saprò mai come (e se) questo testo finirà per andare a capo.

Ad ogni modo, ogni elemento grafico (griglia, bottone, immagine che sia) va progettato nelle varie le circostanze di utilizzo che possiamo prevedere oggi.

Vengono riassunte, semplificando, in:

• Telefono in verticale
• Telefono in orizzontale
• Tablet in verticale
• Tablet in orizzontale
• Laptop
• Cinema display
• Godzilla

La pagina Progetti, se viene richiesta da un telefono ha 2 progetti per riga, da un tablet ne ha 4 e da desktop 6 o più finché ce ne stanno.

La dimensione dei testi e la giustezza delle righe va pensata per tutte le circostanze, senza esagerare verso il grande per non sembrare un sussidiario delle elementari e senza esagerare verso il piccolo… vabè ci siamo capiti.

Gradite un dessert?

A tutto questo aggiungi che non puoi sapere quale browser verrà usato (Explorer, Firefox, Chrome ecc), e nemmeno da che versione di quel browser.
Infine non saprai mai (se non dopo, sulle Analytics) se il tuo sito verrà aperto da un telefono, da uno schermo 40 pollici o da un forno a microonde.

Dove inizia l'imbarazzo

È importante impostare un limite sotto il quale il sito si deve sì poter leggere, ma non si pretende che abbia tutte le figatine (scusate il termine tecnico) che hai progettato (font, animazioni, bordi ecc).
Questo limite di solito te lo suggerisce l'analisi delle statistiche sull'utilizzo del sito fino ad oggi, oppure le caratteristiche del tuo utente tipo (qualcuno lo chiama target).

Explorer 8, hai rotto (i layout).

Ad esempio Internet Explorer 8, uno dei più problematici, è stato usato nell'ultimo anno dal 2,35% degli utenti di emmaboshi.net, al che mi vien da dire che possiamo evitare di investire tempo a ottimizzare il nuovo sito per un numero così esiguo di utenti che per di più andrà auspicabilmente calando.

Tornando a oggi

Lavoriamo per tutta la mattina solo sul nuovo footer (ah il footer è quello che si chiamava piede di pagina, per chi fosse rimasto «cartaceo») e i suoi vari adattamenti. Andiamo a pranzo con il footer completato.

Al ritorno però Andrea si mette a scrivere delle query MySql.
Bei momenti.

In diversi mi chiedono come noi grafici scegliamo i colori

Molti ci immaginano su una scogliera, di spalle, con un abito scuro e il cielo che minaccia tempesta, quando in realtà siamo piuttosto così

Andrea, ma quei capelli, non è forse ora?

Tutto il precedente pippone sui layout fluidi e sui colori, riassunto in una sola immagine: questa.

A fine pomeriggio abbiamo rifatto la Home e la pagina Progetti.
Il sito ha un look già totalmente nuovo!

Mancano ancora degli aggiustamenti sui layout e il grande capitolo dei contenuti. Settimana prossima.

Ora torna a vedere la demo che è cambiata parecchio

http://www.emmaboshi.net

Continuiamo a risalire il grande fiume del redesign a bordo della nostra barcarola. La notte è passata tranquilla e stamattina a bordo si respira aria di vittoria.

Abbiamo migliorato la responsiveness, la griglia dei progetti è fluida e anche la pagina del singolo progetto ha la sua adaptiveness.

Fino a quando non arriviamo alle porte della style guide

Hey, ciao ragazzi! Anche voi qui?

Le colonne, i sei stili di titoli, i comportamenti dei bottoni, la giustezza delle righe, tutto fischia.

«Andrea, presto, ingrossa la barra di sinistra nelle citazioni!»
Poi di nuovo liste ordinate e numerate, di nuovo bottoni, tabelle.

Giuriamo sulle Regole tipografiche del Serra di ripudiare i maiuscoletti forzati

I 21 colori diventano 24.

Header Parisi is down with us

Finalmente una modifica grafica che impatta veramente e positivamente sul layout, dandoci nuove energie in uscita dalla prova di forza della style guide.
Abbiamo rifatto l'header, partendo dalla versione mobile, curando poi i particolari della versione desktop la quale vede un ridente triangolino rosa puntare verso la pagina in cui ci si trova. www.emmaboshi.net

Last but not least: Imaginarium

Nella nuova barra di navigazione troverte Imaginarium, la bacheca dove salvo tutte le immagini e le gif animate che compongono la mia cultura visiva. Da Basquiat a Magnum PI e ritorno. http://imaginarium.emmaboshi.net

Domani si pubblica, a qualunque costo (?!?)

Ci rimane il footer e i nuovi layout di pagina per non parlare degli slideshoow di immagini.
Una volta fatte quelle abbiamo i vari pezzi da montare uno sull'altro e tirare fuori il sito.

Nel frattempo resto qui.

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

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 [email protected], 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

Oggi inizia la parte finale del redesign di www.emmaboshi.net e questo microblog sarà il racconto del percorso che ci porterà al lancio del nuovo sito.

Dopo quattro anni di onorata attività online, i device sono cambiati, il web è cambiato e pure noi non scherziamo.

Il nuovo emmaboshi.net sarà:

• responsive (capace cioè di adattarsi allo schermo del dispositivo che lo naviga: telefono, tablet, forno a microonde, playstation ecc);
• visivamente più adatto anche a quello che la grafica è diventata in questi ultimi quattro anni (apriti cielo);
• più veloce da caricare (hai presente quando sei in un posto dove internet va davvero piano?).

Per farlo lavoreremo gomito a gomito con Andrea De Carolis, aka Decarola, lo sviluppatore front-end che già vide nascere la versione di emmaboshi.net del 2010. Recidivo.

Laurie Anderson che ci esorta a non farci prendere dal panico.

Primo step: la road map

Le tipologie di operazioni che affronteremo sono le più disparate. Dalla migrazione tra server, al nuovo stile tipografico, ad una palette cromatica, all'abbattimento dei tempi di caricamento delle varie pagine.
Per questo la prima cosa che abbiamo stilato oggi è la road map che ci porterà alla sostituzione del sito di oggi.

Statistiche: ovvero chi siete (stati)

Per farlo abbiamo iniziato a studiare le statistiche degli ultimi sei mesi, scandagliando tipologia di browser (IE8 al 2%), tipologia di dispositivi, pagine più viste ecc, per individuare dove posizionare la barra del «vabè, ora non esageriamo».

Sulla carta è un attimo!

Restate collegati per seguire l'andamento e non siate timidi, commentate.
Ogni suggerimenti è prezioso.