Aggiornamento grafico: nuovo logo

TomStardustTanto per allinearmi con le mode del web 2.0 ed in particolare di questo 2006, ho deciso di cambiare la grafica del titolo e di qualche altro elemento minore (come le intestazioni delle pagine).

Adesso sì che posso essere felice, mi è bastato un semplice riflesso e qualche sfumatura sull’immagine: ci vuole poco per far contento un web designer di questi tempi…

Mi raccomando, aspetto pareri!

Se invece vi state chiedendo quali siano le tendenze di cui sto parlando, nessun problema, anzi significa che siete ancora sani mentalmente. Se proprio volete farvi contagiare, forse questo articolo vi chiarirà le idee: 8 Web Design Clichés of 2006.

Utilizzare PNG trasparenti su Internet Explorer

Il formato PNG per le immagini è sempre più diffuso sul web da quando è stato creato nel 1995, e con l’utilizzo delle trasparenze consente di ottenere ottimi risultati.

E’ infatti possibile sovrapporre immagini trasparenti ad altri elementi per arrivare ad interessanti combinazioni irraggiungibili con il formato GIF, se non fosse per i soliti problemi di compatibilità con Internet Explorer.

Al contrario dei vari Firefox, Opera, ecc.., il browser di casa Microsoft non supporta le trasparenze dei PNG mostrando un improbabile sfondo grigio.

La soluzione in attesa di IE7 consiste in un hack CSS che permette di aggirare il problema utilizzando un particolare filtro per IE (dalla versione 5.5 in poi).

Potete vedere subito l’esempio che ho realizzato; per i vostri test tutto quello che dovrete fare è usare il seguente codice CSS:

#overlay{
background: url(opaco70.png);
}
* html #overlay { /* Regole per IE (dalla 5.5 in poi) */
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="opaco70.png" ,sizingMethod="scale");
}

Ovviamente la vostra immagine PNG andrà a sostituire opaco70.png dell’esempio, così come il nome dell’elemento a cui applicare la trasparenza.

I problemi di questa tecnica? Eccoli:

  • Non è supportata da Internet Explorer 5 ed inferiori, quindi se il vostro sito è studiato per funzionare anche con questo browser, meglio evitare di utilizzarla
  • L’elemento a cui applicate la trasparenza dovrà avere width e height impostate, o in alternativa position: absolute (decisamente restrittivo, lo so)
  • L’utilizzo di CSS hack deprecati e non standard

Traete le vostre conclusioni, la cosa potrebbe tornare sicuramente utile aspettando l’uscita ufficiale di IE7, ma sono da valutare bene i pro ed i contro.

La nuova versione di Technorati

TechnoratiCos’è Technorati? E’ il principale motore di ricerca per blog: ad oggi ne ha indicizzati 49.6 milioni, una discreta somma per indicarne l’importanza.

Fatto importante è che abbia deciso di cambiare la propria veste grafica, rivelando un’interfaccia che presenta notevoli miglioramenti.

Orientata verso il look dei siti più famosi, in vero e proprio stile web 2.0, consente facilmente dalla homepage di navigare in 5 categorie principali: entertainment, life, sports, business e tech. A queste categorie si aggiunge l’immancabile ricerca per tag, mentre al centro della pagina sono presenti gli ultimi post più importanti.

Notevole l’uso di ajax in alcuni elementi dell’interfaccia, come il pannello di login posizionato in alto: davvero comodo.

I passi avanti sono molti anche a livello di architettura delle informazioni. E’ importante infatti notare come i contenuti presentati siano diversi se si è utenti registrati o no, ma anche se ad esempio si hanno dei blog preferiti che saranno messi in evidenza, consentendo di essere letti facilmente.

Grande adattabilità alle esigenze degli utenti quindi, per un ottimo lavoro di redesign non solamente dal punto di vista estetico.

TomStardust.com premiato da Accessites!

Quality Universal Design awardSono fiero di annunciare che questo sito è stato recensito e premiato da accessites.org, portale che si occupa di accessibilità, con articoli e showcase di siti che seguono gli standard web.

E’ proprio in questo showcase che è stato appena inserito TomStardust.com, con un bel Quality Universal Design award.

Mettendo da parte l’autocelebrazione, mi è stato utilissimo il metodo con cui è stato recensito il sito, con tanto di voti per ogni singola caratteristica e commenti dettagliati su ogni problema evidenziato. Mancanze nell’xhtml, inaccessibilità di alcune sezioni con le immagini disabilitate, tutte cose che mi erano sfuggite e che adesso so come correggere.

Consiglio a tutti gli sviluppatori web con un sito accessibile di sottoporsi all’esame, avere un feedback accurato da parte di altri utenti è utilissimo. Unica pecca l’attesa: per essere recensito ho dovuto aspettare circa 3 mesi, anche se dopo poche settimane avevo già ricevuto l’approvazione e sapevo sarei entrato nello showcase.

10 ragioni per un sito accessibile

Un recente articolo su accessites.org elenca le 10 ragioni per motivare la realizzazione di un sito accessibile. Ho trovato la lettura molto interessante, anche se si riferisce soprattutto a motivazioni commerciali ed ha alcuni riferimenti validi solo per gli Stati Uniti, ma l’idea alla base è ottima.

Per questo motivo voglio riproporre le 10 ragioni in un articolo in italiano su questo sito, sperando che possano aiutare qualcuno a spiegare ancora meglio le proprie scelte davanti ad un possibile cliente.

  • Coinvolgete il cliente, facendogli capire i vantaggi del considerare tutti i possibili visitatori. La frase esplicativa del concetto è touch on the human side, c’è bisogno di maggiore sensibilità per determinati temi.
  • Avere un sito accessibile è un ottimo spunto pubblicitario, ed un argomento che può sempre essere citato per farsi notare da stampa ed affini.
  • In Italia c’è la legge Stanca: riguarda solo le pubbliche amministrazioni obbligandole ad avere siti accessibili, ma non è un male pensare di portarsi avanti col lavoro in previsione di norme future. In Inghilterra ad esempio ci sono già.
  • I numeri sono dalla parte dell’accessibilità: alcuni tipi di dislessia arrivano al 15%, altri tipi di problemi alla vista al 7%, sono cifre decisamente significative, tali da non poter essere ignorate.
  • L’uso dei CSS in maniera intelligente risparmia il lavoro di gestione di un sito. Sarà più facile aggiornarlo, e le novità generano sempre maggior traffico.
  • L’eliminazione delle tabelle per il layout significa minor spreco di risorse, anche in termini di banda. Risparmiare in questo senso, soprattutto per un sito con molti visitatori, è essenziale.
  • Un sito accessibile, se ben realizzato, non dipende dal mezzo con cui viene visitato. Con sempre nuovi browser, palmari e smartphone che arrivano sul mercato, scegliere un sito accessibile è un’ottima mossa.
  • Miglior posizionamento sui motori di ricerca, grazie anche ad una miglior semantica del codice
  • La popolazione di internet comprenderà fasce di età sempre più avanzate, è importante muoversi anche in questo senso.
  • E’ la cosa giusta da fare, perchè la rete è condivisione e non esclusione. Peccato che questo punto, il più importante, sia quello che in genere meno importa al cliente.

Mi sento di condividere tutti e 10 i punti, alcuni hanno maggiore importanza, altri meno, ma tutti andrebbero sempre ricordati. Se avete idee differenti a riguardo, o altre motivazioni, non esitate a scriverle!

Yahoo! e la nuova grafica

Yahoo!Yahoo! si prepara a cambiare veste grafica, e dalla homepage è già possibile vedere la nuova versione all’opera tramite un collegamento in alto a destra.

Il cambiamento è notevole, spicca il menu verticale a sinistra ed i vari menu a tab interni, che consentono una navigazione nel dettaglio senza dover caricare nuove pagine.

Tutto questo però passa in secondo piano davanti ad una scelta che è decisamente azzardata: la risoluzione minima per questa nuova grafica è 1024×768. Considerando che Yahoo! è un portale assolutamente popolare, non un sito tecnico, e che vi accedono utenti di tutti i tipi, mi pare assurdo non considerare chi naviga ad 800×600.

O meglio, tale risoluzione viene ricordata, ma tramite una funzionalità marginale e seminascosta. Infatti c’è un link sulla destra dell’header che consente di vedere la pagina in versione narrow, oltre a dare la possibilità di cambiare il colore di sfondo.

Come testimonianza basta dare un’occhiata alle statistiche disponibili su w3schools aggiornate a Gennaio 2006. Alla voce Display Resolution c’è ancora un buon 20% corrispondente agli utilizzatori di una risoluzione 800×600.

Stylegala in vendita

StylegalaUna notizia si fa largo nel web da qualche giorno: Stylegala è in vendita. Uno dei siti showcase più importanti a quanto pare cambierà gestione, e la speranze di tutti è che continui a funzionare così come ha sempre fatto.

Personalmente lo ritengo uno dei migliori nel suo genere, venivano recensiti lavori notevoli anche se non molto frequentemente, probabilmente per mantenere sempre alto il livello qualitativo.

Potete trovare a questo indirizzo tutti i dettagli, se siete interessati la base d’asta è di 30.000 dollari, una bella somma.

Di seguito alcune statistiche che fanno capire l’importanza del sito ed il perchè siano in molti a temere per il suo futuro:

  • Pagine visitate ogni mese: 4.200.000
  • Link su Google: circa 3.000
  • Link su del.icio.us: circa 4.000
  • Guadagni mensili: 2.500 dollari

Se non lo conoscevate e siete interessati a vedere il meglio del web, vi consiglio di passare qualche minuto ad esaminare la galleria di siti che propone.

La nuova veste di Flickr

Gli assidui frequentatori di Flickr, il famosissimo sito dove conservare i propri album fotografici, avranno notato in questi giorni alcuni cambiamenti che riguardano soprattutto l’architettura delle informazioni e di conseguenza l’interfaccia.

Le novità sono diverse, a cominciare dal menu a tendina che consente un’esplorazione più dettagliata, per arrivare a diverse funzioni di ricerca aggiuntive. Adesso il menu è stato modificato in maniera più intelligente, e sono immediatamente visibili le sezioni principali chiamate You, Organize, Contacts, Groups ed Explore. E’ subito intuibile la loro funzione, come è giusto che sia.

Ma una delle rivoluzioni più interessanti riguarda l’Organizer, la pagina con cui era possibile modificare titoli e tag delle foto, set di appartenenza e quant’altro. Adesso tutto funziona tramite un comodo drag&drop, non c’è alcun caricamento di altre pagine ed il processo è di una semplicità estrema.

Tutto questo lavoro merita un applauso, soprattutto perchè Flickr aveva già ottenuto un premio per la migliore interfaccia web, e nonostante i riconoscimenti ottenuti hanno avuto il coraggio di modificarla ulteriormente.

C’è sicuramente del materiale su cui riflettere sull’abilità del team di sviluppo: è riuscito a rendere divertente l’interazione in un sito dove in sostanza non si fa altro che uploadare foto, metterci dei titoli ed organizzarle. Sicuramente attività non così interessanti, ma con la giusta formula il risultato è fenomenale!

Una nota: con le ultime modifiche il servizio non è più in beta, bensì in fase gamma.

Il web design e le tendenze del 2006

Dopo l’avvento del CSS Reboot 2006 a cui anche questo sito ha partecipato, risultano evidenti alcune tendenze nell’ambito del web design. Un fenomeno che potrebbe anche essere passeggero, ma che è ben descritto in questo articolo di Christian Montoya sul suo omonimo sito.

I particolari dei siti esaminati che vengono messi in evidenza sono diversi, ma principalmente possono essere riassunti in:

  1. Risoluzione base di 1024×768 pixel
  2. Presenza delle Silk Icons
  3. Testo chiaro su sfondo scuro
  4. Footer grandi e ricchi di elementi

La mia attenzione è caduta principalmente su questo ultimo punto. Proprio negli ultimi giorni ho messo mano al codice di questo sito per eliminare alcuni elementi dalla sidebar spostandoli nel footer, e devo ammettere che il look ne ha guadagnato.

Uno dei primi a scegliere questo tipo di formato per il footer è stato senza dubbio Derek Powazek, seguito a ruota da altri come lo stesso Montoya che si è inventato un fantastico stile ispirato a Super Mario Bros.
Questa tendenza è da valutare attentamente, credo che sfruttare meglio il footer di una pagina possa portare molti vantaggi sia nell’organizzazione dei contenuti che nella navigazione. Può essere utilizzato per mostrare link, set di fotografie, oppure gli elenchi classici dei blog come i post più commentati o quelli più recenti.

Prevedo a breve un ulteriore modifica al layout di TomStardust.com: perchè non seguire le mode quando portano innumerevoli vantaggi?

Dieci peccati mortali del web design

Mi sono imbattuto in un articolo in inglese, intitolato Ten deadly sins of web design sul blog di Roger Johansson.

E’ un intervento che ha la sua importanza, e che a sua volta è stato tratto da una pubblicazione di un magazine svedese chiamato CAP&Design. Mi sembrava giusto quindi riportarlo in italiano, per tutti coloro che con l’inglese non hanno molta praticità.

Questo articolo come potete intuire dal titolo elenca i 10 errori che un buon web designer non dovrebbe mai commettere. Purtroppo è possibile trovare questi peccati in molti siti, e sono molti gli sviluppatori che non sanno nemmeno di sbagliare a compiere certe azioni. Questo è l’elenco:

  1. Non seguire le regole tipografiche basilari
  2. Essere troppo creativi con la navigazione
  3. Creare un sistema di navigazione con troppe voci
  4. Fare in modo che il sito richieda determinate tecnologie per funzionare
  5. Pensare che l’accessibilità riguardi solo i non vedenti
  6. Ignorare gli standard web
  7. Non considerare i motori di ricerca fin dal principio
  8. Basare la struttura del sito sul proprio modello dati
  9. Usare testo grigio su uno sfondo grigio
  10. Non effettuare l’analisi di fattibilità

Penso che i 10 punti siano già autoesplicativi, l’analisi dettagliata di ognuno di essi per il momento è presente solo sul magazine svedese. E’ comunque probabile che in futuro qualcuno riprenda l’articolo traducendolo in una lingua più diffusa.