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.

xmci8q1usttta.gif

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.

jtk2tejx2wcq0g.jpg

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ì

jhylh8ofph7law.jpg


Andrea, ma quei capelli, non è forse ora?

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

khmpevbx5wixw.jpg

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

Iniziamo?

Parliamo del tuo prossimo progetto, non vedo l'ora di iniziare.

Scrivimi