Marco Rosella è un web designer/blogger (e ingegnere informatico) di talento che tramite il suo progetto The Horizontal Way, è riuscito a vincere un prestigioso premio internazionale nell’edizione 2007 dei South By Southwest Web Awards.

Ho avuto il piacere di scambiare 2 chiacchiere con Marco.
Se volete conoscere la sua professionalità ed alcune risorse interessanti sui css, vi consiglio la consultazione di questo lungo ed interessante post.
Di cosa tratta l’intervista:

della sua figura professionale;

di molte risorse utilizzate per il web design e la grafica;

di alcuni dei suoi lavori ed in particolare del progetto The Horizontal Way;

dei consigli e letture utili sui css per principianti ed esperti.

delle tendenze del web design per quest’anno.

e molto altro…

Vi invito a porre domande e aprire discussioni nei commenti dell’articolo:
Marco sarà felice di rispondere a tutti voi.

Buona lettura.

Mik (di blographik.it)
01. Chi è Marco Rosella?
Vuoi parlarmi del tuo percorso formativo ed il tuo profilo professionale?
Dove vivi e lavori?

Marco Rosella (di Centralscrutinizer.it)
Ho cominciato a scoprire il pc, il web ed il loro potere alienante ad Alghero, dove sono nato, decidendo diversi anni dopo di andare a studiare Ingegneria Informatica in quel di Pisa.

Dopo la laurea ho lavorato per circa un anno e mezzo all’Istituto di Informatica e Telematica del CNR, occupandomi del trattamento di dati in XML tramite applicazioni web di cui costruivo il lato client.

Da due mesi mi sono trasferito a Milano dove lavoro nell’agenzia web Dodicitrenta come sviluppatore HTML, CSS e Javascript.

Mik
02. Come è nata in te la passione per il web design e la grafica?

Marco
A dire il vero il mio sogno è sempre stato quello di fare il modello, poi il dover viaggiare troppo, lo stress per le serate e le invidie per il mio metro e 67 mi hanno fatto ben presto virare verso un Frontpage anni’ 90 con il quale ho creato alcuni siti molto amatoriali per degli amici.

Nel 2002, con l’ingresso nella blogosfera, ho cominciato a leggere alcuni articoli relativi a nuove tecniche HTML e CSS (poi Javascript) sulla vecchia versione PRO di html.it.

Da lì ho cominciato a seguire le risorse in inglese alle quali erano ispirati, divorando tutorial su tutorial fino ad oggi.

Riguardo alla grafica sono un appassionato da sempre di manifesti, volantini, adesivi e vecchie riviste.

Mik
03. Quali programmi e risorse usi solitamente per la realizzazione dei tuoi progetti?

Marco
Creo la grafica di base utilizzando principalmente Fireworks e Photoshop:
uso anche il primo perchè lo trovo più immediato per figure semplici, ma riguardo a filtri, gestione dei livelli e plugin, credo che Fireworks stia a Photoshop come Wordpad sta a Word.

Per lo schema dei colori di solito comincio da un’immagine estrapolandone i colori con Colr.org, oppure parto da un colore a caso ottenendone i colori collegati con Color Blender.

Per miscelare i colori tra loro, soprattutto quando si tratta di una grafica monocromatica, utilizzo sempre (omonimo di quello sopra)
Color Blender.

Riguardo i font mi affido al sempreverde dafont.com, ma almeno una volta vorrei acquistare qualcosa da fonts.com (Il fatto che sia a pagamento è quasi una garanzia che pochi utilizzino quel font) (poi magari è lo stesso caso delle partenze intelligenti).

Quindi prendo un foglio A4, penna nera e ricopio il layout a grandi linee rappresentando quelli che saranno i div del mio HTML, assegnando ad ogni box il proprio id o classe.

Scrivo quasi in contemporanea l’HTML ed il CSS utilizzando Notepad++, che segnalando solamente gli errori di sintassi costringe ad acquisire un certa disciplina nella creazione dei due codici.

Per testare le pagine con i browser mi faccio aiutare dalle estensioni Firefox Web Developer Toolbar e HTML Validator.

Da Pixel Ruler per aggiustare la larghezza delle colonne e da What Color per estrarre alcuni colori dal template.

Una volta che le pagine stanno più o meno in piedi mi diletto con il Javascript e PHP, coadiuvato dalla forse migliore estensione Firefox: Firebug.

Mik
04. Come rimani aggiornato nel tuo settore?
Segui attivamente dei forum, blog e siti web?

Marco
Seguo costantemente una ventina di blog che parlano di webdesign.

Un pò di meno i forum, in cui capito solo quando sono in cerca della risoluzione ad un problema.

In entrambi do la mia opinione poche volte, forse perché sono un lurker anche nella vita:
se state dialogando con un vostro amico e ad un certo punto notate un ombra sospetta, quello potrei essere io.

Mik
05. Quali siti/blog/forum consulti giornalmente che reputi fondamentali per un web designer?

Marco
Scegliendo alcuni tra i più frequentemente aggiornati, tra i blog 456BereaStreet, Veerle, Eric Meyer e ParticleTree.

Tra i siti A List Apart, Digital Web Magazine e Vitamin.

Mik
06. Puoi indicare delle risorse da dove prendi spunto per le ispirazioni per i tuoi lavori?

Marco
Principalmente le gallerie CSS, come il patriarca CSS Beauty o CSS Mania.

Un’altra risorsa molto interessante è anche Design Melt Down, che con il passare dei “capitoli” è quasi diventato un enciclopedia delle mode nel web design.

Mik
07. I miei complimenti per il tuo blog e soprattutto per The Horizontal Way, il tuo progetto per il quale hai ricevuto un premio prestigioso come miglior CSS dell’anno al South By Southwest in Texas.

(Consiglio a tutti di leggere un post molto ironico su Centralscrutinizer.it che dice tutto sull’evento citato:
la valigetta di cartone.)

Puoi parlarci di questo progetto e della tua esperienza che ti ha portato alla ribalta internazionale?

Marco
Grazie mille.

E’ cominciato tutto con un post del mio blog in cui segnalavo una serie di siti con layout orizzontale, con i contenuti disposti da sinistra verso destra e non dall’alto verso il basso, chiedendo i miei lettori il perchè della loro scarsa diffusione.

Ho creato quindi una galleria che non solo mostrasse con delle mini-recensioni i siti orizzontali (principalmente porfolio, gallerie fotografiche, siti commerciali) che utilizzano le tecniche CSS e javascript più efficaci, ma funzionasse a sua volta come esempio di sito orizzontale creato con i CSS.

Tra i quaranta siti segnalati, tuttavia, non ho escluso quelli costruiti con tabelle annidate, che pur essendo obsoleti (e conosciamo tutti i problemi che porta la mancata separazione tra struttura e presentazione in termini di accessibilità, velocità di caricamento etc.) talvolta offrono ottimi esempi di layout e grafica.

Ho reso inoltre disponibile un template con un html, un css e un javascript per lo scrolling:
per far sì che i lettori interessati potessero creare da zero il proprio sito orizzontale.

Ogni qual volta ricevo una segnalazione “questo sito l’ho creato grazie al tuo progetto ed al tuo template“, sento di aver dato il mio piccolo contributo nel rispondere alla domanda di quel vecchio post.

Puoi segnalarci altri tuoi lavori o progetti realizzati?

I più recenti:

Ho creato come freelance il tema del blog di MS&L Francia.

Con l’IIT-CNR abbiamo presentato alla conferenza WWW2007 in Canada un nostro prototipo di tagging semantico.

Ho raccolto un paio di miei vecchi script nel blog The Lab of the weblog Central Scrutinizer.

Ho aggiornato vlog.it, un blog in cui da due anni tengo nota dei videoblog che mi piacciono di più.

Mik
08. Hai altri progetti per il futuro, stai collaborando con altri professionisti?

Marco
Per quanto riguarda i progetti personali, ho qualche appunto ma rimango un procrastinatore d’assalto.
Vorrei scrivere il libro “La mia vita è un to-do”, ma è nella lista delle cose da fare.

Mik
09. Consigli dei libri e altre risorse che ritieni siano utili per imparare e migliorare nell’uso dei CSS e nella progettazione di siti web accessibili ed usabili?

Marco
Come ho scritto prima io sono partito da tutorial in rete, ma qualche volta mi sono trovato con delle lacune che forse la lettura di un libro avrebbero colmato sin dall’inizio.

A voi che cominciate, consiglio di studiare uno tra Progettare Siti Web Standard di Jeffrey Zeldman, Cascading Style Sheet di Eric Meyer e CSS di Gianluca Troiani.

Dopodichè approfondite subito con le bestie nere:

il posizionamento;

i float;

le liste.

Poi passate agli esercizi:
avete presente i pittori che al Louvre ricopiano la Gioconda sulle loro tele?

a). Scaricate Scrapbook, che consente di salvare l’html, il css e tutte le immagini di una pagina web.

b). Salvate capolavori riconosciuti come il già citato blog di Veerle o
UX Magazine.

c). Provate a riscrivere il blog cancellando l’Index.css che trovate nelle rispettive cartelle.

In questo avrete bisogno dell’aiuto del CSS Cheat Sheet vicino al vostro pc e diversi altri tutorial.

Vi renderete conto profondamente che il web designer ha un grande nemico, chiamato Internet Explorer.

Creare pagine visualizzabili allo stesso modo su Firefox ed Explorer è una strada lunga e densa di imprecazioni:

benchè sia uscita la versione 7, che ha tolto diversi bug ma ne ha aggiunti giustamente altri (…), la risorsa di riferimento per hack e workaround rimane Position is Everything (da stampare anche la tabella di compatibilità di Alessandro Fulciniti).

La regola dello studiare il codice degli altri vale comunque per tutti.

Nei corsi di scrittura si insegna a fare una lettura “attiva” dei testi, cercando ad esempio di assimilare il più possibile il ritmo chiedendosi perchè sono state usate quelle pause o quelle ripetizioni (e allo stesso modo nella regia il perchè di quella particolare inquadratura o nella fotografia quella scelta di illuminazione).

Quando mi trovo davanti ad un sito che piace, quasi automaticamente clicco la combinazione CTRL+Shift+S che con la web depeloper toolbar mi consente di disabilitare gli stili, e controllo come sono visualizzati ‘a nudo’:

il menu, gli heading e le varie sezioni, navigandolo la pagina con la tastiera.

Riattivo i CSS dando una rapida occhiata ad header, menu, sezione centrale e footer:
se c’è un particolare che mi interessa, ad esempio uno strano menu con rollover mai visto, con CTRL+U visualizzo l’HTML e con CTRL+C visualizzo il CSS controllando come è stata creata la lista.

Se viene utilizzata una tecnica particolare l’appunto da qualche parte, sperando di ricordarmene per un futuro menu che mi troverò a fare, altrimenti penso:

“Io la farei in un modo molto più semplice, come ho visto in quel blog, imparato in quel tutorial, sperimentato nel mio vecchio sito…”.

Penso quindi che il confronto continuo con i siti che ci piacciono sia importantissimo per cercare di migliorarci (se il vostro sito fosse un azienda si tratterebbe di ‘benchmarking competitivo’), mentre il confronto con i siti che NON ci piacciono una buona occasione per mettere alla prova le conoscenze acquisite (“…ed inoltre qui manca proprio il padding e le colonne sono troppo distanti, tiè!”).

Inoltre consiglio sempre di accompagnare ad un HTML scritto semanticamente e ad un CSS che ne segua la struttura in modo ordinato una grafica ben curata, che segua almeno le regole matematiche che regolano il layout, la tipografia e gli schemi di colori.

Tra milioni e milioni di siti (a meno che ci si chiami Marc Andreessen e si presentino nel primo mese, cominciando con un template grigio di default, una ventina di post micidiali) il detto “content is king” non ha più il valore di una volta.

Mik
10. La domanda che ormai pongo a quasi tutti nelle interviste su blographik:
Secondo te quali saranno le “tendenze grafiche del web design” del 2007?
Cosa reputi andrà ancora “di moda” e cosa verrà abbandonato?

Marco
Se come nella moda ci sono stati dei ritorni inaspettati, come gli occhiali grandi anni ’80 di questi ultimi tempi, spero che un giorno ricompaia in massa la pixel art dei primordi del web design, magari in una versione aggiornata.

Per la fine del 2007 vedo in discesa libera riflessi ed effetto lucido tipici dello stile web 2.0, mentre in aumento l’uso di ombre, di elementi radiali, di header giganteschi o ridotti drasticamente e di menu fissati nel footer della pagina.

Lo stile che va a gonfie vele è sicuramente il wicked worn look, che dopo una toccata e fuga nel 2004 è ritornato prepotentemente l’anno scorso nelle sottocategorie effetto legno, retro/vintage ed (tento traduzione da distressed/worn/grunge) effetto logoro.

Termina questa interessante intervista a Marco Rosella, che ringrazio per il tempo dedicato a rispondere alle mie domande.

Ora tocca a voi.

Fatevi avanti e non perdete l’occasione di approfondire o porre altre domande ad un web designer creativo e di fama internazionale come Marco.

Le altre interviste realizzate su blographik:

Interviste on line: Giovanni Dragone, web designer e blogger;

Comunicazione in rete: intervista a Tommaso Sorchiotti;

Web design e Blog: Intervista ad Alessandro D’Agnano;

Web design made in Italy: intervista a Nicolò Volpato;

Web design al femminile: intervista a Cristina Calabrese di pannasmontata-templates.net;

Intervista ad Antonio Volpon, project manager e web designer;

Intervista a Mauro Sanna: illustratore, grafico e web designer;

Intervista a Tommaso Baldovino: un eccellente web designer;

Intervista on line: Paolo Corsini di Hardware Upgrade;

Comunicazione on line: intervista ad Alessandro Banchelli di MasterNewMedia Italia.