Più Chiaro, Più Spazioso, Più Fresco: Presentazione del Nuovo Layout

stesso motore, scocca lucidata a puntino

scritto da Francesco Gavello [+] il 20 ottobre 2010 | 53 Commenti in: Blogging Tips

layout-update-2010

È 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. :D

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

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.

Aspetta! C'è dell'altro!

  • Per il momento non ci sono post correlati.

Trovato questo articolo interessante?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

53 Commenti

Update 12/02/2012: Il Regolamento Commenti è cambiato! Leggi ciò che serve sapere!

  1. Luigi ha detto:

    Il tema si vede male su vari browser.. cmq è molto bello e pulito ottimo lavoro! Complimenti..

    Rispondi
  2. Eddy ha detto:

    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).

    Rispondi
  3. Giainel ha detto:

    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

    Rispondi
  4. camu ha detto:

    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!

    Rispondi
  5. Matteo Marangoni ha detto:

    Ciao Francesco, vedo tutto sfalsato (ho firefox).
    La sidebar è sotto ed è grande tutto il foglio, il footer ha i box che si spostano…

    Rispondi
  6. Lorenzo ha detto:

    Ciao Francesco io lo vedo male da ie6 da lavoro. Considera che cmq molti in ufficio hanno ancora purtroppo solo questo browser!

    Rispondi
  7. Francesco Ciabatta ha detto:

    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 =/

    Rispondi
  8. Francesco Gavello ha detto:

    Grazie a tutti per i vostri feedback, ora vediamo di fixare i bug segnalati… :)

    Rispondi
  9. Giainel ha detto:

    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! ;)

    Rispondi
  10. Francesco Gavello ha detto:

    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. :)

    Rispondi
  11. Anna Pallotti ha detto:

    Davvero bello, spazi perfettamente ottimizzati, layout fluido molto interessante, complimenti

    Rispondi
  12. Eddy ha detto:

    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ò.

    Rispondi
    • Francesco Gavello ha detto:

      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.

      Rispondi
  13. Lorenzo ha detto:

    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.

    Rispondi
    • Francesco Gavello ha detto:

      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.

      Rispondi
  14. con Chrome tutto Ok.
    Bravo! Ora leggerti è molto più rilassante ;-)

    Rispondi
  15. camu ha detto:

    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?

    Rispondi
    • Francesco Gavello ha detto:

      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. ;)

      Rispondi
      • camu ha detto:

        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.

  16. Giacomo Ratta ha detto:

    Ciao Francesco,
    complimenti per l’ottimo lavoro.
    Tema molto carino (non che quello di prima non lo fosse…)

    Una domanda: perché 1190px?

    Rispondi
    • Francesco Gavello ha detto:

      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.

      Rispondi
  17. Alberto Trussardi ha detto:

    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!!!!

    Rispondi
  18. camu ha detto:

    Hai fatto delle prove con i dispositivi mobili?

    Rispondi
    • Francesco Gavello ha detto:

      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).

      Rispondi
  19. Andrea Leti ha detto:

    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.

    Rispondi
    • Francesco Gavello ha detto:

      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. ;)

      Rispondi
  20. yesWEBcan ha detto:

    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

    Rispondi
  21. instantempo ha detto:

    Ottimo lavoro Francesco, layout ben pulito, semplice e chiaro.

    Rispondi
  22. The Writer ha detto:

    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.

    Rispondi
  23. roberto ha detto:

    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 :-)

    Rispondi
    • Francesco Gavello ha detto:

      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. :)

      Rispondi
  24. aldopinga ha detto:

    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

    Rispondi
    • Francesco Gavello ha detto:

      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.

      Rispondi
  25. Alessandro ha detto:

    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? :P

    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 :P ..

    Rispondi
  26. Kiko ha detto:

    Più lineare e sobrio. E occhio che spesso queste sono qualità!

    Rispondi
  27. Fabio ha detto:

    La leggibilità e la chiarezza d’insieme sono ora eccellenti.

    un caro saluto
    fabio

    Rispondi
  28. Webblog ha detto:

    Non per nulla sei un designer … ottimo lavoro a me piace molto

    Rispondi
  29. Brunella ha detto:

    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

    Rispondi
  30. PiccoloSocrate ha detto:

    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 :-)

    Rispondi
  31. Julius ha detto:

    Non avevo fatto caso al ridimensionamento automatico della sidebar in due risoluzione, un tocco di classe! bravo!

    Rispondi
  32. Carla ha detto:

    Davvero molto pulito, chiaro e assolultamente non affaticante nella lettura

    Rispondi

Lascia un commento

Anteprima commentatore

Personalizza il tuo avatar!
Vai su gravatar.com e carica quello che preferisci!

I commenti sono modificabili entro 5 minuti dal loro inserimento.
Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Solo i commenti firmati con un nome saranno accettati. Leggi il Regolamento Commenti!