E così eccola qua, la terza generazione del “vestito” di questo sito. Costruita rigorosamente tutta a mano, tag dopo tag, definizione di stile dopo definizione di stile. Prendendo spunti dai grandi maestri e cercando di mescolare insieme le “best practices” in maniera semplice ed armoniosa. Qualcuno potrà dire che ho usato un approccio minimalista e scarno, ma io preferisco definirlo moderno ed essenziale. Ho sempre amato i design contemporanei nell’arredamento, le linee sottili, i colori eleganti, l’intuitività delle interfacce (si, anche le maniglie dei cassetti sono delle interfacce) e delle funzioni. Il tema precedente era diventato come il garage di molti americani: un deposito di aggeggi che nessuno usa mai, e che occupano spazio inutilmente. Era giunta l’ora di fare una bella pulizia. Anche perché in questi anni (la versione precedente era nata nel 2006/07) le tecnologie sono maturate, e tanti ammennicoli erano pertanto diventati inutili (come anche le mie statistiche confermano).
Zero (o quasi) javascript
Oggi il web è infestato di inutili effetti speciali, buttati a casaccio sulle pagine solo perché “fanno figo”. Tutta robaccia che non aggiunge alcuna utilità alla fruizione dei contenuti, e che finisce per appesantire la navigazione e distrarre il visitatore dal motivo per cui era venuto sin dall’inizio: leggere un articolo. Allora una delle sfide che mi sono posto, nella riscrittura del tema, è stata quella di limitare l’uso di Javascript al minimo possibile, se non addirittura ridurlo a zero. Alla fine è rimasto solo il codice per le mie statistiche integrate (addio Analytics, mi mancherai un po’) e quello per rendere più gradevole l’interazione con i campi di testo. Tutto il resto è andato in pensione, a beneficio della rapidità di caricamento della pagina (la dimensione media, dati di page speed alla mano, è calata ad un incredibile 80 kb). Per carità, non voglio dire che il Javascript “in generale” sia inutile e fastidioso: ho visto magnifiche applicazioni che ne fanno uso in maniera pulita ed intelligente.
Finalmente fluido
In varie occasioni ho affrontato l’argomento layout fluido si o no. Come forse saprai, il mio parere è sempre stato a favore delle impaginazioni a larghezza fissa. Principalmente perché fino a non molto tempo fa era un casino implementare una soluzione che fosse digerita dai tutti i browser sul mercato (vedi implementazione di max-width
). D’altro canto avere un testo spalmato ad una larghezza di 1600 pixel, lo dicono tutti quelli che queste cose le hanno studiate davvero, non è comodo. Gli schermi da 24 pollici sono fatti per vederci meglio quando usi Photoshop o quando scrivi del codice, non per quando navighi sul web. La soluzione usata, quindi, segue lo stato dell’arte in materia, e consiste nel definire una larghezza minima ed una massima per il contenitore esterno. Che consentono alla pagina di adattarsi alle varie risoluzioni, anche inferiori a 800×600. Finisce quindi l’epoca delle due opzioni (largo e stretto) che la versione precedente metteva a disposizione dei visitatori. Anche la versione “mobile” servita a coloro che accedevano con iPhone e soci, ci ha salutato. CyberAngel ed Andrea Pinti (che link metto, Andrea?) mi hanno mandato gli screenshot del layout su iPhone: persino io sono rimasto meravigliato ๐
Accessibilità a tutto spiano
Un sito che si dichiara “amichevole” nei confronti degli utenti diversamente abili, non deve diventare brutto o peggio un incubo da navigare per chi diversamente abile non è. In questo ho fatto una totale inversione di marcia nell’aggiungere pulsantini e confusione varia (clutter, lo chiamano gli americani). Spariscono quindi le opzioni per ingrandire o ridurre il testo, passare alla versione ad alto contrasto, e via dicendo. Le tecnologie (leggasi, Internet Explorer 8), come dicevo prima, sono oramai abbastanza mature da consentire di evitare salti carpiati pur di ottenere il santo Graal della compatibilità cross-piattaforma. I caratteri sono ridimensionabili usando le funzioni offerte dai vari browser, analogo per l’alto contrasto e la navigazione con le immagini disattivate: ho cercato di bilanciare semplicità progettuale ed adattabilità ai vari contesti. Chiaramente c’è sempre spazio per migliorare il tutto, ed è per questo che i commenti sono più che graditi.
Usabilità e reperibilità totalmente riprogettate
Il menu di navigazione laterale, nella versione precedente, era diventato col tempo un’accozzaglia di collegamenti non proprio correlati tra loro. Questo rendeva poco intuitiva (e dunque praticamente inutile) l’intera navigazione in giro per il mio appartamento virtuale. L’introduzione di un piè di pagina che raccoglie in sezioni le varie categorie di collegamenti, sembra già una novità apprezzata dai navigatori. La “nuova” barra laterale fornisce invece poche informazioni (l’obiettivo è sempre quello di non distrarre il lettore) più “blog-oriented”: gli ultimi commenti inseriti e due articoli a caso. Quest’ultima novità consente sia a Google che ai visitatori di scovare contenuti “sepolti” negli archivi. Perché “a caso” e non “correlati”, qualcuno potrebbe chiedere. La risposta è quanto mai banale: dopo mesi d’uso, ho capito che l’intelligenza per trovare “articoli simili” non è ancora abbastanza matura, ed i suggerimenti finivano per essere spesso del tutto scorrelati dal contesto.
Commenti
Anche se in silenzio ti seguo da un bel po’ e ho potuto apprezzare tuoi i tuoi “vestiti”.
Beh, senza dubbio questo è il migliore e comunque il mio preferito!
Semplice, gradevole, fruibile e interessante.
Normalmente ti leggo da Google reader, ma con tutte queste novità in questi giorni non riesco a fare a meno dal venirti a trovare “in casa”.
Risposte al commento di Moebius
@Moebius: ben trovato! E grazie per la visita ๐ Ovviamente i colori del tema cambieranno, come prima, mese per mese, ma l’impalcatura rimane la stessa.
Anche io seguo spesso il blog via Google Reader, ma leggendo questo articolo, sono venuto a fare una visita!
Pur non essendo un esperto nel campo, devo dire che mi piace molto come il blog è strutturato ora, e anche dal punto di vista grafico sono rimasto piacevolmente sorpreso.
Complimenti!
Risposte al commento di Stefano
@Stefano: sono contento che questa ventata di novità sia anche servita a far uscire allo scoperto i miei lettori più timidi ๐ Grazie, sono contento che ti sia piaciuto…
Risposte al commento di camu
@camu: Ecco, come volevasi dimostrare non l’ho saputa utilizzare! ๐ Il commento qui sotto delle 12.44 sarebbe dovuto (nelle mie intenzioni) essere di seguito al tuo, peccato abbia dimenticato di cliccare su “rispondi”!
Risposte al commento di Stefano
@Stefano: beh, allora la prossima generazione del mio tema cercherà di indovinare i propositi di chi commenta ๐
Si senza dubbio! ๐ E devo dire che (sebbene abbia letto commenti discordanti a proposito, nel/nei articolo/i prima di questo) anche l’organizzazione dei commenti indentati (suppongo si dica così) è secondo me estremamente intuitiva, sicuramente un passo in avanti rispetto alla grande maggioranza dei blog che usa invece la vecchia disposizione.
Concordo in pieno con tutto ciò che hai detto. Il mio tema prese il nome di KISS proprio per questo: pagine leggere e senza troppi orpelli grafici aiutano a concentrarsi su ciò che vale di quella pagina: il contenuto! ๐
Ciao,
Emanuele
Per me manca ancora qualcosina ๐
Risposte al commento di Redemption
@Redemption: ah questi lettori moderni, non li si accontenta mai ๐
Ottimo lavoro si nota subito che è leggero perchè si carica istantaneamente.
Sicuramente limitare l’uso di jscript e orpelli vari imho porta più vantaggi che svantaggi.
Oltre ai benefici che hai elencato c’e’ ne sono mille altri:
per es. meno consumo di banda, meno consumo di cpu etc… inoltre google ha introdotto nel 2010 anche la velocità di caricamento delle pagine come parametro di ranking.
Risposte al commento di evilripper
@evilripper: esattamente ๐ Proprio per rimediare al mio precedente “ban” da Google, mi sono molto dedicato a quest’aspetto (e non ho ancora finito). Adesso le pagine sono decisamente più veloci, ma vedremo il responso di Google Webmaster Tools fra qualche settimana!
Ciao Camu,
ma non mi sembra proprio minimalista e scarno (io ne so qualcosa….) il tuo nuovo template.
Mi piace, è molto leggibile ed intuitivo. Non mi convince moltissimo lo sfondo, ma è una questione di gusti personali e sai com’è, “de gustibus….”
Ottime cose!
Risposte al commento di Giuseppe
@Giuseppe: prima di tutto benvenuto sul mio blog ๐ In effetti il tuo template è ancora più “essenziale” di questo, e devo dire che una parte di me è sempre tentata dal creare una versione come la tua, chissà, la quarta generazione forse… Lo sfondo cambia una volta al mese, questi sono i colori di Settembre, che piano piano ci portano verso l’autunno. Quindi, come dicono gli americani, “stay tuned” per i colori di Ottobre ๐
Che direi. Ancora complimenti per il nuovo sito a cui mi sento in parte legato dopo aver dato il mio esiguo contributo come beta-tester ed essermi divertito in una comment-chat con te e Emanuele.
Grazie mille anche per la citazione! ๐
Risposte al commento di CyberAngel
@CyberAngel: grazie a te per il contributo, sono onorato di avere lettori così proattivi ๐
Elegantissimo, snello e bellissimi i pulsantoni!!!
Risposte al commento di Francesco
@Francesco: eccoti finalmente! ๐
Bello eh, ma mi aspettavo qualcosa in più da te ๐
Risposte al commento di Napolux
@Napolux: ‘nche senzo scusa? ๐
Non so se può essere un consiglio sensato o fattibile, però credo che, dal momento che ora la disposizione dei messaggi non è più in ordine cronologico, potrebbe essere utile vedere quali sono i nuovi messaggi dall’ultima vista.
Pensandoci un attimo, non so se la cosa è realizzabile in quanto, almeno vedendo come funziona nei forum, penso sia necessario un login, per stabilire quando è stata l’ultima visita, cosa non usata nei blog, però io l’ho buttata là, non si sa mai che si realizzabile in qualche modo che ignoro. ๐
Risposte al commento di Stefano
@Stefano: si, il fatto di non essere “riconosciuto” dal sistema, complica un po’ la fattibilità. In alternativa puoi sempre dare un’occhiata al feed dei commenti (vedi icona accanto all’intestazione “Commenti”) e la sottoscrizione (il cui plugin ho deciso di riscrivere di sana pianta) che ti avvisa delle nuove risposte. Comunque se trovi un blog dove questa cosa è implementata, fammi sapere, ci darò volentieri un’occhiata…
Risposte al commento di camu
@camu: Infatti immaginavo fosse una cosa un po’ più complicata, in ogni caso grazie dei consigli!
Si senz’altro, se troverò qualche blog con un sistema simile ti farò sapere, anche se fino ad ora non ne ho mai incontrati.
Risposte al commento di Stefano
@Stefano: e poi comunque, come si diceva in un altro thread, la media di commenti per articolo in questo blog è abbastanza bassa, quindi le due soluzioni (thread e lineare) finiscono spesso per coincidere… ๐ Se poi dovessi diventare molto popolare, allora vedrò di lavorare a qualcosa di più intuitivo eheh
Anch’io preferisco non inserire script Javascript, a meno di non provvedere soluzioni alternative con i Css, oppure applicarli a dinamiche “perdibili” che possono anche non essere presenti.
Mi riconosco nella tua massima “Accessibilità è essenzialità”, complimenti Camu!
Sempre con un filo di nostalgia…
Risposte al commento di Francesco
@Francesco: grazie Francesco, il tuo parere conta molto per me ๐ Avere il tuo bollino di approvazione è un vero onore!
Camu, che imbarazzo… dopo quanto ho imparato e imparo da te… il nuovo schema di questo blog è ideale nella scelta degli elementi, un pochettino devo abituarmi alla modernità del design, la poetica dei miei blog è più classica e vicina al vecchio duechiacchiere.it, ma se considero (ed è così) che un sito/blog visuale accessibile è la trasposizione in grafica di un codice scritto con riguardo all’opportuna sequenzialità, essenziale, semantico e corretto il risultato è entusiasmante.
Probabilmente l’ispirazione ai pixel del tema è l’essenza della sua poetica.
beh, che dire Camu… ottimo lavoro e naturalmente ad maiora! ๐
Il lettore affezionato, Pseudolus
Risposte al commento di Ps3udolus
@Ps3udolus: ben trovato ๐ Grazie per l’apprezzamento, molto gradito!
non ricordo se l’ho già scritto…(la vecchiaia avanza inesorabilmente -.-)….a me piace moltissimo la nuova veste del blog, ma tanto credo siano sempre più importatni i contenuti ๐
Risposte al commento di Simona
@Simona: beh, è proprio quello che ho cercato di mettere in risalto con questo nuovo “vestito” ๐
Ciao,
ora la nuova veste grafica è una realtà e i contenuti sono – naturalmente – tutti salvi.
Camu, allo storico del tuo blog mancano solo gli screenshots dei vecchi temi grafici.
Che te ne pare di tenerne un archivio in ripostiglio, come i costumi di scena delle gloriose rappresentazioni?
Riflessione annosa: il web si è evoluto senza tenere traccia delle interfacce originarie dei siti, stilare una memoria non sarebbe male.
Complimenti, Francesco
Risposte al commento di Francesco
@Francesco: sarà che con tutti i traslochi che ho fatto nella mia vita (per ultimo quello transoceanico che m’ha portato qui) ho imparato a non rimanere attaccato a troppi “feticci” del passato, ma penso che come dicono gli americani, bisogna imparare “to let it go”, che non mi è chiaro come si potrebbe tradurre efficacemente in italiano senza usare una parafrasi. Il vecchio tema rimarrà per sempre nei nostri cuori, questo è quello che conta ๐
Risposte al commento di camu
@camu: oddio però Francesco non ha tutti i torti…io invece sono una che conserva tutto, tuttissimo!!!!
Che poi un ‘album dei ricordi’ ce l’avrai in questa casetta virtuale, no? ๐
Risposte al commento di Simona
@Simona: il tempo mi ha insegnato che conservare ogni briciola materiale del chi siamo, è un feticismo che ci porta a perdere di vista il vero orizzonte spirituale della vita ๐ Si vede che sto leggendo Eat, Prey, Love? Eheh…