Bozze di rinnovo grafico. (Quasi) pronto!

Ce l'ho quasi fatta. Nei ritagli di tempo, nei meeting noiosi 🙂 e nelle notti insonni ho messo insieme la struttura di quello che vorrei fosse la nuova faccia grafica di Borborigmi. Non è finita, mancano ancora alcuni dettagli e parecchie passate di cartavetro prima che a si possa dichiarare compiuta, ma penso sia a un livello tale da poter cominciare a utilizzarla, e a sentire che cosa ne pensano i lettori.

Come avevo accennato nel passato, ho voluto fare un template più bianco, più arioso, più largo, più leggibile. Le barre laterali sono diventate due, e il footer adesso ha spazio per un po' di informazioni in più. La paletta di colori che accompagnano il bianco e il nero usa un paio di sfumature di arancione, che - a differenza del violetto di prima - danno un tono più caldo alla pagina. Il carattere della testata si chiama FFF Tusj, che è una reinterpretazione manoscritta del Georgia - il carattere principale dei testi. La tagline del blog è scritta in Miserably Lose; titoli e titoletti sono in Lucida Grande, tranne che per il menù di navigazione in alto per cui ho usato il Trebuchet. Tecnicamente, il template è un child theme di Thematic, con un po' di PHP per un paio di cosettine e tutto il resto disegnato con CSS.

La novità principale, al di là della grafica, è la possibilità di rispondere esplicitamente a un commento. Vediamo se migliora le conversazioni.

Ecco cosa penso mi resti da fare per considerare il template finito:

  • Colorare il disegno di me e Oliver nella testata. Non ho proprio avuto tempo, e aspettavo di definire la paletta di colori.
  • Migliorare l'intestazione delle pagine di archivio delle categorie. Quella semplicissima di adesso non è granché.
  • Cambiare/ricolorare i pallini delle liste nelle barre laterali, almeno per le liste di secondo livello.
  • Aggiungere un'immagine sulla destra al footer, con link per tornare in alto. Pensavo di riprendere il disegno di Oliver.
  • Aggiungere un bottone per i feed RSS. E il feed RSS nell'head del documento principale.
  • Migliorare la maschera di ricerca. Fatto 🙂
  • Cambiare la favicon (usando per esempio ancora il disegno della testata, o la "B" nel carattere del titolo). Fatto (anche se l'immagine che ho usato - il mio gravatar attuale - non è proprio adattissima. Ci ritornerò).
  • Aggiornare un po' widget sulle barre laterali, verificare che la formattazione tenga. Fatto, più o meno. E messo a posto anche il footer.
  • Aggiornare le pagine nel menù in alto (per esempio, aggiungere esplicitamente i "Contatti"). Fatto 🙂
  • Testare con vari browser (per ho ora ho provato con Firefox, Safari e Chrome, sembra andare tutto bene, tranne un problemino con gli emoticon in Chrome).

Che ne dite? Vi piace?

Questo inserimento è stato pubblicato in Mezzi e messaggi e il tag , , , , , . Metti un segnalibro su permalink. Inserisci un commento o lascia un trackback: Trackback URL.

41 Commenti

  1. Pubblicato il 27 aprile 2011 alle 10:29 | Permalink

    Si, mi piace davvero molto!
    Non vedo l'ora di ammirare il template finito in tutti i dettagli.

    Ciao!

  2. Pubblicato il 27 aprile 2011 alle 10:29 | Permalink

    Bellissimo!
    Io, però, i disegni di te e Oliver non li colorerei: già in bianco e nero rendono bene!

  3. Pubblicato il 27 aprile 2011 alle 10:30 | Permalink

    Funzia pure su Opera e mi pare ottimo

  4. Stefano
    Pubblicato il 27 aprile 2011 alle 10:58 | Permalink

    Davvero niente male! 🙂 I disegni di te e Oliver anche in bianco non sono male, ma un po' di colore, magari riprendendo l'arancione, forse li farebbe risaltare di più.

    L'unica cosa che inizialmente mi ha un po' spiazzato (anche se spiazzato è una parola grossa) sono le due barre laterali, entrambe a destra. Ma pensandoci, metterne una a sinistra e l'altra a destra, non so quanto senso possa avere.

    Mi chiedevo come si fa a rispondere direttamente ad un commento?

  5. Pubblicato il 27 aprile 2011 alle 11:03 | Permalink

    Le barre restano a destra, è una scelta precisa che mi garba, mentre il testo attorniato da barre a destra e sinistra non mi piaceva proprio.

    Si risponde a un commento cliccando su "Rispondi" (è attivo da 30 secondi!). Per adesso i commenti "nidificati" permettono fino a 5 livelli di risposta (poi graficamente diventa illeggibile secondo me), vediamo come va.

  6. Stefano
    Pubblicato il 27 aprile 2011 alle 11:19 | Permalink

    Ok ora lo vedo anch'io!

  7. emilio
    Pubblicato il 27 aprile 2011 alle 12:08 | Permalink

    bello mi piace molto...che ci puoi dire sul tuo futuro professionale..

  8. Emanuele Balboni
    Pubblicato il 27 aprile 2011 alle 12:50 | Permalink

    Ma tu guarda, ho quasi creduto che mi fossero impazziti i segnalibri e di essere finito in altro sito! E dire che lo avevi pure annunciato.
    Molto bello complimenti, quasi sul leitmotiv "less is more" (parlando ovviamente di pesantezza grafica e non di contenuti!). Approvo senza riserve la risposta diretta ai commenti (sì, forse oltre 5 diventa illeggibile, esperimento?), il layout della navigazione nelle categorie (ma concordo con il tuo commento sui titoli: si potrebbe forse usare lo stesso del titolo del blog?), e poi... il testo giustificato! (non rammento: nella vecchia versione non era così, giusto?)
    (bene e ora la pianto di far uso smodato di parentesi; e poi perché terminano tutte con una domanda?)
    Non so se preferisco te e Oliver colorati o in bianco e nero, così mi piace già molto.
    Riguardo le due barre a destra hai già risposto, ma sono l'unico elemento che mi aveva lasciato appena perplesso (sarà il testo bandiera a sinistra?).
    Due micropulci: su firefox 3.6 per linux il campo per la ricerca è tagliato sulla destra, e i colori delle linguette di "home", "quarta di copertina", etc... sono visibili solo se osservo lo schermo da angolazioni improponibili (questo sul mio portatilino, perché dallo schermo del pc di casa neanche mettendomi a testa in giù) 😀

  9. Emanuele Balboni
    Pubblicato il 27 aprile 2011 alle 12:53 | Permalink

    Ehm, con "Migliorare la maschera di ricerca" intendevi forse "evitare che fosse tagliata"? Chiedo umilmente scusa...

  10. My_May
    Pubblicato il 27 aprile 2011 alle 12:55 | Permalink

    Bello si, ma non trovo l'articolo nuovo (l'ultimo) e quello precedente all'ultimo ecc.
    Mi sembra che prima ci fosse una scaletta di articoli dal più nuovo al più vecchio

    Io vedo invece in alto: Inizia da qui-Cerca nel sito
    scendendo:
    Chiacchiere in corso
    Ripescati (a caso) dalle viscere
    Qui si parla di...
    Argomenti

    e i nuovi articoli dove sono?In pratica se ci fosse un articolo non ancora commentato non me ne accorgerei.

  11. Pubblicato il 27 aprile 2011 alle 13:19 | Permalink

    Al volo: il mio contratto al CERN è stato prolungato fino a fine Agosto, e un laboratorio della collaborazione di cui faccio parte mi ha proposto un contratto temporaneo di un paio d'anni a partire da Settembre nel caso gli altri concorsi per posizioni più permanenti a cui sto partecipando non debbano andare bene. Insomma, non resterò sulla strada 🙂 Appena le cose si chiarificheranno un po' non mancherò di aggiornarvi più seriamente.

  12. Pubblicato il 27 aprile 2011 alle 13:22 | Permalink

    Potrei aumentare il livello di nidificazione dei commenti fino a 10, ma temo un disastro di leggibilità dell'indentazione crescente. Vediamo come evolve.

    Sulle pagine delle categorie potrei tentare di usare il font della testara, ma siccome non si tratta di un font direttamente adatto al web dovrei usare un po' di trucchi. Ci provo appena ho tempo (ma tu, ti intendi di CSS?)

    Nella versione precedente il testo non era giustifica, e ho esitato a lungo. Non sono sicuro di capire: ti piace o no?

    I colori sono quello che sono, la resa dipende dalla qualità dello schermo. Se vi lamentate in molti scurirò il menu (ovviamente ne ho provati diversi).

  13. Pubblicato il 27 aprile 2011 alle 13:22 | Permalink

    concordo sul B/N

  14. Pubblicato il 27 aprile 2011 alle 13:24 | Permalink

    yep 🙂

  15. Pubblicato il 27 aprile 2011 alle 13:25 | Permalink

    In effetti ho tolto il widget degli ultimi dieci articoli. Mi costa poco rimetterlo, anche se non sono convinto che serva alla navigazione.

  16. Claudio
    Pubblicato il 27 aprile 2011 alle 13:25 | Permalink

    Bello, mi piace 😀
    È molto più personale adesso! 😀
    L'unica cosa è la nuvola dei tag in Flash: è un po' pesantuccia, consuma molta CPU, perlomeno su Linux.

  17. Pubblicato il 27 aprile 2011 alle 13:32 | Permalink

    Capisco benissimo 🙂 E in effetti è solo un bel giochino, mi chiedo se qualcuno la usi per davvero. Ho provato a sostituirla con una tag cloud più tradizionale, ma non sono sicuro che mi piaccia.

  18. Emanuele
    Pubblicato il 27 aprile 2011 alle 14:03 | Permalink

    Beh, se vuoi mi metto a fare 3 risposte alla tua risposta e vediamo che succede 😀

    CSS? No, non me ne intendo. Ma Betta sì, credo. Se vuoi chiedo.

    Certo che mi piace il testo giustificato: bello, ordinato, leggibile (soprattutto se ci si limita a - quanto? - 100 caratteri per riga).

    Ehi, non offendiamo! Gli schermi son quello che sono perché lo stipendio è quello che è, e con quest'ultimo ci devo pure mangiare, mentre a provare a mangiare lo schermo uno rischia di restarci (e non ti dico che saporaccio i cristalli liquidi!) 😛

  19. Stefano
    Pubblicato il 27 aprile 2011 alle 14:47 | Permalink

    Per quanto riguarda i colori a me sembra di vederli, o meglio, vedo che la barra superiore (quella che contiene Home, Quarta di copertina, ecc...) è beige.

    I commenti nidificati... sinceramente credo che un po' in leggibilità si perda anche con un massimo di 5 nidificazioni.

    Il problema è che se si utilizzano i feed, l'ordine cronologico con cui compaiono non fa capire bene a che messaggio ci si riferisce; mentre sul blog basta scorrere la pagina, ma anche qui c'è il rischio di perdersi qualcosa.

  20. Belinde
    Pubblicato il 27 aprile 2011 alle 16:09 | Permalink

    Altra cosa da fare, figa e con relativamente poco sforzo: invece di dire alla gente che font scaricarsi, usare Font Squirrel e farglieli usare direttamente via CSS: http://www.fontsquirrel.com/fontface/generator

    my 2 cents... 😉

  21. emilio
    Pubblicato il 27 aprile 2011 alle 18:47 | Permalink

    waooooooooo sono felice che tu possa restare ..lo speravo tanto ....ciaoo

  22. GIGI
    Pubblicato il 27 aprile 2011 alle 19:55 | Permalink

    Ottimo, Marco! In bocca al lupo, ma sono certo che non resterai per strada.

  23. Jonathan
    Pubblicato il 27 aprile 2011 alle 20:26 | Permalink

    Bello mi piace, anche i colori e i font scelti… mi permetto di darti un solo consiglio: l'immagine di te e oliver… o di oliver e te 😉 la ritoccherei con i bordi non netti come ora ma con l'effetto schizzato che richiama il font del titolo. Per quanto riguarda la colorazione di voi due direi contorni neri a tratti schizzati e un leggero tratteggio arancione nei chiari del maglione e basta e tratteggi neri nelle ombre.
    In effetti un po di arancione nel titolo manca… in alternativa al maglione, potresti fare una lettera arancione, come già ci avevi fatto vedere.

    5 annidamenti son già molti secondo me, 10 non hanno senso… anche dal puntoni vista logico è poi difficile capire la gerarchia delle risposte

    Anche su iPad il campo di ricerca e il suo contenuto fuoriescono a d eta dello schermo.

  24. Pubblicato il 28 aprile 2011 alle 10:37 | Permalink

    Mi sa che per il disegno di me e Oliver farò un concorso pubblico di colorazione 🙂

  25. lallo
    Pubblicato il 28 aprile 2011 alle 10:38 | Permalink

    Bello! Complimenti! Io sono un conservatore e di solito le novità mi infastidiscono ma questa l'ho digerita immediatamente.

  26. Pubblicato il 28 aprile 2011 alle 10:38 | Permalink

    @Belinde: ci avevo pensato, e poi ho abbandonato l'idea per mancanza di tempo. I font inconsueti sono solo nella testata, che è un;immagine, mentre tutto il resto è basato su font tradizionali, con adeguati rimpiazzi definiti nel CSS. Ma magari prima o poi ci giocherò (o trovo qualche volenteroso che ci giochi per me).

  27. Pubblicato il 28 aprile 2011 alle 19:11 | Permalink

    Bravo. Complimenti per la passione che ci metti.
    E' proprio un bel blog da leggere.

  28. Stephan
    Pubblicato il 29 aprile 2011 alle 12:58 | Permalink

    E' molto più "caldo" ora, ma trovavo più gradevole lo schema colori di prima (qualcuno doveva lamentarsi! hehe) in particolare avere il corpo dell'articolo su uno sfondo di colore differente dal resto, "staccava" un po'.
    Ma sicuramente anche questione di abitudine.

  29. My_May
    Pubblicato il 29 aprile 2011 alle 13:25 | Permalink

    Per lo meno ora si legge bene e chiaro la tipologia del blog:

    BORBORIGMI (rumori gastrici) di un FISICO RENITENTE (cioè di un fisico che non si piega alla volontà altrui ed emette piccoli "rumori gastrici" appena qualcuno osa piegare la sua volontà... o per lo meno questa mi sembra la traduzione letterale).

  30. Stephan
    Pubblicato il 29 aprile 2011 alle 23:47 | Permalink

    Mi correggo, ora leggo da un'altro schermo molto piu grande e luminoso, mi piace

  31. Andrea
    Pubblicato il 30 aprile 2011 alle 08:43 | Permalink

    Ciao Marco,
    devo dire che il rinnovamento del sito è veramente bello (anche se solo agli inizi)!!! Comunque io ti scrivo dei suggerimenti:
    - per quanto riguarda la colorazione di te e Oliver propongo colori naturali, in stile 'matita' come la scritta "borborigmi" ma meno fitta, senza rispettare i margini di contorno (tanto per dire: stampa l'immagine e dalla per qualche minuto in mano alla 'sofisticata macchina quantistica'... );
    - nella versione precedente del sito ero afffezionatissimo alla sfera rotante in cui comparivano tutti i topic trattati, qui trasformatain una lista normalissimia (come mai???);
    - infine, ti proporrei di colorare lo sfondo (tutto bianco non mi entusiasma): magari solo le colonne laterali, lsciando bianca la colonna centrale del testo;

    P.S. ho visto che hai aggiunto la moderazione... (è forse dovuto a qualche commento/i di post recente...)
    ciao

  32. Pubblicato il 1 maggio 2011 alle 14:34 | Permalink

    Molto bello, complimenti!
    Ottima la scelta dei colori per i caratteri... il disegno lo trovo perfetto in B/N, invece. Per rimanere essenziali.

  33. Pubblicato il 2 maggio 2011 alle 08:54 | Permalink

    @Stephan: sono contento che ti piaccia, perché il cambiamento principale al quale puntavo era proprio leberarmi delle barre laterali, e lasciare il testo libero su uno sfondo bianco totale. Ma in parte posso capire lo spaesamento, e infatti avevo anche immaginato e tentato una riga centrale che separasse/definisse la colonna del testo da quelle laterali. Magari la rimetto su, e vediamo le reazioni.

  34. Pubblicato il 2 maggio 2011 alle 08:58 | Permalink

    @Andrea: ho tolot la sfera rotante sostituendola con una tag cloud più tradizionale perché la precedente era basata su Flash, che è notoriamente pesante in termini di CPU (qualcuno si è lamentato) e non visibile da tutti i dispositivi. ma concordo sul fatto che la cloud attuale sia poveretta, vedrò di migliorare. Invece lo sfondo resta tutto bianco, come scrivevo altrove era proprio quello che cercavo. Al limite metterò una righina a separare la colonna del testo dalle barre laterali.

    Sulla moderazione: c'è sempre stata, molto poco invasiva. Di fatto, filtro solo i commenti che hanno un link, principalmente per frenare lo spam che passa gli altri filtri, e evitare brutti scherzi. Tutti il resto va su in automatico.

  35. Michele
    Pubblicato il 3 maggio 2011 alle 22:41 | Permalink

    il template è molto ben fatto, vorrei solo suggerire di lasciare un pò di margine a sinistra della pagina per migliorare la leggibilità.
    Anche io trovo che i disegni in B/N siano perfetti!

  36. Andrea
    Pubblicato il 5 maggio 2011 alle 07:55 | Permalink

    Grazie per la risposta Marco: ho un'altro dubbio.
    Considerando il fatto che sei solito (spero sempre di più) proporre quiz ricompensa ai lettori di questo blog, come farai a stabilire un criterio di identificazione (prima i post erano numerati...)??? Non vorrei che la nuova impaginazione ci privi di tutto questo.
    Ciao

  37. Pubblicato il 5 maggio 2011 alle 08:24 | Permalink

    @Michele: il margine a sinistra è una delle cose che mi ha creato più problemi con gli allineamenti. Prometto che ci guardo, ma i miei poteri con CSS sono limitati 🙂

  38. Pubblicato il 5 maggio 2011 alle 08:26 | Permalink

    @Andrea: non starai per caso suggerendo che leggi questo blog solo per le svendite occasionali? 🙂

  39. Andrea
    Pubblicato il 6 maggio 2011 alle 09:37 | Permalink

    Rispondo solo per testare i sottolivelli di risposte...: se vai a scarabellare vecchi articoli, troverai la mia presenza ancora prima che tu avessi l'idea dei concorsi a premi, e se ricerchi tra gli articoli dei concorsi a premi la mia traccia si limita a uno soltanto di questi... il fatto che tu mi ritenga un fan dei saldi mi rattrista molto: sono il connubio Marco-fisica-CERN che mi portano a leggere questo blog 🙂

  40. My_May
    Pubblicato il 10 maggio 2011 alle 08:41 | Permalink

    Marco, secondo me c'è un problema.
    Quando io "rispondo" la risposta non è visualizzata come ultimo post ma è visualizzato subito dietro l'intervento "in risposta". Secondo me non facilita la lettura. ciao

  41. Pubblicato il 10 maggio 2011 alle 09:17 | Permalink

    @My_may: non è un problema, è una feature 🙂 Si tratta proprio di quei commenti annidati di cui si parlava qui sopra. Puoi scegliere se rispondere a un commento specifico (cliccando su "Rispondi" in calce al commento) o aggiungere un commento più generale con la maschera in basso. Alcuni sembrano contenti di questa innovazione, altri - come te - la trovano confusionaria. Penso che la lascerò attivata ancora per qualche settimana, e poi magari facciamo un sondaggio.

Scrivi un Commento

Il tuo indirizzo email non verrà mai pubblicato o condiviso.

Puoi usare questi tag e attributi HTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • Mi chiamo Marco Delmastro, sono un fisico delle particelle che lavora all'esperimento ATLAS al CERN di Ginevra.

    Su Borborigmi di un fisico renitente divago di vita all'estero lontani dall'Italia, fisica delle particelle e divulgazione scientifica, ricerca fondamentale, tecnologia e comunicazione nel mondo digitale, educazione, militanza quotidiana e altre amenità.

    Ho scritto un libro, Particelle familiari, che prova a raccontare cosa faccio di mestiere, e perché.

  • feed RSS articoli
  • feed RSS commenti
  • Cinguettii