Più chiaro, più spazioso, più fresco: presentazione del nuovo layout

stesso motore, scocca lucidata a puntino

È con grandissimo piacere che oggi voglio presentarti uno degli aggiornamenti più significativi degli ultimi tempi al layout di FrancescoGavello.it.

Come avrai già avuto modo di notare, tante piccole cose sono cambiate (niente di totalmente rivoluzionario, ad ogni modo). Sulla base dei dati collezionati nei mesi precedenti e lavorando sui punti in cui il precedente layout cominciava a stare un po’ stretto, ecco come si presenta la nuova veste grafica.

Cosa c’è di nuovo?

  • Un layout di base largo 1190px (sì, esatto)
  • Più spazio ai contenuti (un sacco di spazi di decompressione visiva)
  • Una sidebar completamente ridisegnata
  • Un box “Punti di discussione” inframezzato agli articoli in homepage
  • Un box “In seconda pagina” che anticipa i contenuti della paginazione
  • Un box “Trending topic” sulla pagina dei singoli articoli
  • Un paio di ritocchi ai risultati di ricerca (ora molto più significativi)
  • Diversi riferimenti “social” in più sui singoli blocchi articolo

layout-update-2010-full

Sotto al cofano tutto rimane come in precedenza: stesse funzionalità (altre se ne sono aggiunte), stessa semplicità nel leggere e interagire con i contenuti. Come dire, questo layout è tutto quanto il precedente è già stato, solo …meglio. 😀

P.S. Hai provato a ridimensionare la finestra del browser? 😛

Che ne pensi? Sono davvero curioso di leggere i tuoi feedback!

Forse lo stile più spaziato potrebbe spaventare qualcuno (come sempre accade, non è possibile accontentare tutti), ma personalmente sono estremamente soddisfatto del risultato ottenuto.

Francesco Gavello

Francesco Gavello

Consulente, formatore e public speaker in Advertising e Web Analytics. Sviluppo strategie di Inbound Marketing per progetti web di grandi dimensioni. Appassionato da sempre di illusionismo, un’arte che ha molto da spartire con il marketing.

53 commenti

  1. Ciao Francesco,

    l’idea mi sembra ottima e sono curioso, al momento ti segnalo però che vedo la sidebar sotto il comment box (Chrome, Mac OS).

  2. Ciao Francesco! Il tema sembrerebbe essere molto bello e ordinato. Il problema è che, come già segnalato da Eddy, ciò che dovrebbe apparire nella sidebar, appare invece nel footer del Blog.
    Ho provato a visualizzarlo con Internet Explorer 8, Mozilla Firefox 3.6.10 e con Google Chrome 6, utilizzando come sistema operativo Windows 7. Ciao!

    PS Se può essere utile, la risoluzione del mio monitor è 1280×1024

  3. Si, confermo che la sidebar scivola sotto i contenuti, con risoluzioni più piccole tipo 1024. Ma un layout semifluido con min-width e max-width? 🙂 Comunque, problemi tecnici a parte, ottimo lavoro, prenderò spunto di sicuro per alcune delle idee implementate!

      1. Personalmente ho deciso di non supportare più IE6, il numero di visitatori che usano quel browser, nel mio caso, è sceso al di sotto del 2% 🙂

  4. Ciao Francesco,
    sicuramente un layout più pulito e spazioso, nonchè una scelta ‘coraggiosa’, forse però i tempi sono amturi per creare questo tipo di layout.
    Ti segnalo però che a 1920×1080 con firefox mi mette lo scroller orizzontale e se diminuisco le dimensioni della finestra, anche di poco, la sidebar va sotto =/

  5. Ora, sto visualizzando il Blog con Windows XP, risoluzione 1024×600 e si vede tutto alla perfezione.
    Ho provato con Mozilla Firefox, Google Chrome e con Internet Explorer 8. Complimenti ancora per il nuovo layout. Buona giornata, ciao! 😉

  6. Ho ricontrollato tutto “live” in locale su due macchine e su BrowserLab di Adobe + Browsershot.org

    Gli errori di visualizzazione erano dovuti a una stringa che (mea culpa, mea culpa) continuava a puntare in locale al server del mac sul quale sto scrivendo e non dava l’avvio allo switch on-the-fly del foglio di stile.

    Quindi, sostanzialmente, dovremmo esserci. 🙂

  7. confermo, ci sei 😉
    (ora da PC, sempre su Chrome)
    domanda/considerazione: come mai il retweet button in un angolino in alto, e il fb like button solo sotto?
    Io avrei accorpato un pò.

    1. Perfetto 🙂

      Beh, semplicemente trovo che la posizione naturale del like button sia a fondo post (dovendo scegliere), e non volevo sacrificarne lo spazio affiancandolo al retweet.

      Così ho deciso di separare le due cose e di posizionare gli share su Twitter già subito sotto al titolo. D’altronde quel piccolo widget pesca tutti i link già condivisi su Twitter che non necessariamente hanno avuto origine dal blog, e può essere un’altra metrica per il lettore.

  8. Mh, mi piace graficamente, io adoro il bianco, però non credi che in questo modo siano meno visibili i tanti contenuti?
    Prima c’era il sideblog e il box con i tab che contenevano molto materiale.

    1. Ciao Lorenzo,
      beh, è questione di punti di vista. 🙂

      I box, il sideblog e i tab fungevano sicuramente da punti di ingresso per i contenuti (anche se limitatamente alla home e secondo precise motivazioni), ma non così tanto quanto desiderassi.

      Con questo update ho cercato di rifinire i percorsi di navigazione, di portare fuori gli argomenti che tratto al di là di quanto emerge dagli ultimi post, di rendere molto più semplice la lettura e l’interazione con i contenuti piuttosto che il “giocare” con l’interfaccia.

  9. Ottimo, tutto ok adesso. Ma quindi 1190 è il nuovo 980? 😉 Forse anch’io dovrei essere più coraggioso sul mio layout ed aggiungere questi 110 pixel… che ne dici?

    1. Dati alla mano, solo l’11% dei visitatori di questo blog naviga su risoluzione a 1024×768, mentre tutte le restanti fette della torta partono da un minimo di 1280px a salire (e lo fanno in forme piuttosto disparate).

      Non credo che il 1190 sia in tutto e per tutto il nuovo 980 (non ancora, forse) 🙂

      Credo però che con dei dati simili in cui pescare fosse venuto il momento di lavorare con spazi più ampi e titoli/testi più evidenti, netti, “ariosi”. Se non altro guardando almeno alla colonna dei contenuti principali, cercando di trovare (come vedi implementato qui) soluzioni alternative per gestire tutto quanto fosse complementare.

      Gli utenti a 1024, peraltro, possono stare tranquilli: ciò che viene “minimizzato” nel processo è appunto la sidebar di destra (che diventa una striscia su risoluzioni minori di 1200px) regalando un’esperienza di lettura costante.

      Ecco perché non ho optato per soluzioni fluide o semi-fluide. Volevo mantenere un preciso controllo su chi-avrebbe-visto-cosa. 😉

      1. Si, anche io aspetto che sul mio blog si scenda sotto la soglia del 10% (al momento sono ancora al 26%, sob) per allargare un goccio il mio layout fluido, che usa un max-width impostato a 980px. Nel mio caso ho scelto l’approccio opposto, è la sidebar a rimanere a larghezza fissa, e la colonna dei contenuti a rimpicciolirsi, ma in effetti la tua scelta ha perfettamente senso.

    1. Ciao Giacomo,
      perché lascia un buon margine (fisico, sui lati) per chi naviga a 1280. Ed è contemporaneamente una buona media anche per chi naviga a risoluzioni più elevate.

      Chi arriva da una 1024 vedrà invece la stessa dimensione per i contenuti centrali, e un po’ meno contenuti complementari in sidebar.

  10. Allora:

    1) Vedere un layout coi titoli grossi mi facilita la lettura e c’è molta aria
    2) è chiaro e ci sono poche robe inutili che impediscono la lettura
    3) mi piace i più commentati nella parte centrale tra gli articoli
    4) la chiusura della home con anteprima delle pagine successive verrà ampiamente riprodotta nel mio prossimo progetto 🙂

    Bella fra!!!!! A prestoooooo!!!!

    1. Su iPhone da quanto ho potuto vedere rende in versione compatta senza particolari problemi, anche se metterò mano ai testi ingranditi automaticamente da iOS per fixare qualche spaziatura.

      Per i restanti device, mi affiderò a WpTouch (Pro, probabilmente).

  11. Ciao Francesco!

    Ti do il mio personalissimo parere. Personalmente credo si che sia il tutto più leggibile ma che con le nuove caratteristiche del blog sia diventato “un blog qualunque” (graficamente parlando).

    Credo che la versione precedente fosse “fuori dal coro” in senso posivito.
    Non lo so, secondo me hai perso qualcosa cosi…

    Torno a ribadire che questo è il mio personalissimo parere. Consideravo il design di prima come la “mucca viola” dei blog e uno che parla di (blog)marketing a 360° sa a cosa mi riferisco!

    Spero che da questo mio punto di vista tu possa cogliere qualcosa di importante e che non prenda questo commento come una critica cattiva e scriteriata.

    Un saluto!
    Andrea.

    1. Ciao Andrea,
      tutt’altro! Mi interessa moltissimo sapere qual è il feeling che passa il nuovo layout.

      Forse ciò che più è cambiato (al di là della vecchia home “pick & mix” su tre colonne) è il contenitore (fittizio) che raggruppava contenuti+sidebar, e dava quel particolare aspetto “monilitico”.

      Poi sai, neanche il precedente layout al suo lancio fu esattamente com’era diventato sino all’altro ieri: spero che anche questo nuovo vestito possa perfezionarsi in una nuova mucca viola. 😉

  12. Ciao Francesco
    Mi piace molto il layout, molto pulito e leggibile.
    I vari bug piano piano li risolverai, e le novità sono molto interessanti.
    L’unica cosa nel box preview presente dalla seconda pagina in poi, non sarebbe meglio far visualizzare un anteprima degli articoli della pagina successiva, invece di quelli della seconda pagina? (ad esempio anche nella terza pagina si visualizzano quelli della seconda)

    A parte questo rinnovo i miei complimenti
    Veramente ben fatto

  13. Ciao Francesco; un buon lavoro con un buon stile complimenti! :). Mi piace molto come sei riuscito a integrare la sidebard, sembra tutto un unico pezzo, impressionante :). Molto interessante anche il trending topic, sicuramente implementa i commenti sui post.

    La prima cosa che ho pensato dopo aver cliccato sul link del Feed è stata: ” Che è successo”.

    Ho provato l’accesso con IE 8, IE 9, Firefox, Chrome, Safari e Opera ed è tutto funzionante al 100% spero lo sia anche per gli altri utenti.

  14. Ciao Francesco.
    Sì, anche a me piace il nuovo layout (che originalone 🙂 ).

    – la sidebar è il punto vincente per me. Indica anche per immagini cosa voglio trovare (la nuvoletta, la stella, il cuore) e ottima l’idea di spostare in alto la toolbox, strumento molto utile prima era schiacciato in mezzo a troppe cose.

    – Punti di discussione buono anche questo ti indirizza subito sull’argomento importante. (cos’è, un plugin ?)

    – In generale c’è molto più spazio e tutto sembra, e forse lo è, più grande.
    Ciao 🙂

    1. Ciao Roberto, la zona “punti di discussione” è una query su misura che pesca gli ultimi 3 post commentati nelle ultime 2 settimane.

      Vorrei rifinire ancora un po’ il concetto dietro a quel box, ma per il momento direi che compie il suo scopo. 🙂

  15. ottima scelta specie se sarà unita ad una versione mobile
    la sidebar con crome scivola in basso in fase di rendering per poi allinearsi a pagina visualizzata
    (cmq è una cosa che succede spesso con left-rigth)
    complimenti è ancora più piacevo leggerti

    1. Credo dipenda da un minimo di lag durante lo switch del foglio di stile complementare per mostrare la versione compatta. In locale è immediato (non ci sono dati da scaricare al volo), e testandolo a dovere credo si possa ancora migliorare.

  16. Ciao Fra,

    ottimissima l’idea delle anteprime, dove l’hai vista?

    ma mostra solo gli articoli della seconda pagina, se vado in quarta non mi mostra gli articoli della quinta ma sempre della seconda..

    Non penso sia un’errore. Forse l’hai messo del codice pezza per il momento? 😛

    Ciaoo

    edit: ah un’altra cosa volevo chiederti, hai le statistiche sull’utilizzo di quel box cerca? secondo me è troppo su, con un header così alto verrà utilizzato poco.. Ovviamente sono pronto ad essere smentito 😛 ..

    1. Dici bene, il box delle anteprime di paginazione per ora mostra solo la seconda pagina anche nelle pagine seguenti. Update a brevissimo.

      Per i dati sulla ricerca, aspetto un 30-60 giorni per fare i paragoni con i mesi precedenti 😉

  17. Ciao Francesco,

    ritorno sul tuo blog dopo un po’ di tempo.
    Trovo il nuovo layout più fresco e leggero, mi sembra di avere più mobilità.

    Chiaramente ogni qual volta si apprezza qualcosa si avanza anche qualche critica (qualcosina che personalmente si modificherebbe).

    Se può esserti utile, oltre ai sinceri complimenti per il restyling che da lettrice del tuo blog sentivo anch’io necessario, ti dico la mia:

    – Il font degli annunci google lo farei più grande, non leggo proprio le parole.
    Non lo faccio per spingere gli annunci, ma per una questione grafica.

    – Le colonne laterali egoisticamente le invertirei,
    Dico egoisticamente perché non è un suggerimento frutto di uno studio sull’usabilità, ma su una necessità personale. Dopo aver finito di leggere un articolo sono alla ricerca di un altro che mi interessi.
    Mi farebbe più comodo avere la colonna delle ‘categorie’ a portata di mouse, senza dover fare un ‘salto’ e vedere il riquadro della ‘navigazione’, il quale dopo 3 o 4 volte che l’ho visto… vabbè l’ho visto, ok, non mi ‘serve’ più… mentre le categorie mi servono di più lì vicino.
    La twitter zone poi ha dei colori tali da essere riconosciuta ovunque la metti, ne sono certa, per cui spostarla sulla destra non le toglierebbe visibilità.

    – Per lo sfondo se ti interessa una mia idea particolare sui migliori colori per questo periodo storico (ehhh?), ci scriviamo in privato.

    A star bene,
    Brunella

    1. Grazie per i feedback Brunella!

      Mi interessa molto sapere la tua sui colori del background; quando hai un attimo mi piacerebbe scambiare quattro chiacchiere in privato. E chissà che non ne esca un post utile a chi legge 😉

  18. bOh sarà, ma a me piaceva più la precedente versione, molto più “personalizzata” e meno uguale agli altri…
    boh… :-\ I contenuti, ovviamente, non si discutono 🙂