Circa due settimane fa Andy Rutledge ha presentato un'interessante sperimentazione, ovvero un possibile redesign di Google, articolo divenuto noto a molti grazie a Digg. Oltre ad essere un notevole esercizio di design, trovo il risultato decisamente accattivante, ma credo sia una questione molto soggettiva. Sempre attraverso Digg scopro la che il citato redesign è stato anche codificato con HTML e CSS e presentato in questa pagina. Curioso di natura come sono, ho subito dato uno sguardo al markup, e ho notato: <a href="http://www.google.com/ads/"><div class="ad"></div></a> Un link vuoto con dentro un div è sbagliatissimo per due motivi: l'accessibilità  ai contenuti a chi naviga con immagini e/o CSS disabilitati, screen reader e browser alternativi; inoltre i link essendo elementi inline al loro interno non possono contenere elementi block-level come i div. Se l'appeal del redesign è notevole, chi ha fatto la sua ricodifica ha fatto un lavoro decisamente pessimo: lo dice anche il validatore.

Continua a leggere Il redesign di Google… e la sua ricodifica

Categoria: Web Design

Tags: ,

Sono davvero molte le risorse in rete inerenti l'accessibilità : alcune di queste sono un vero e proprio must per chiunque è coinvolto nello sviluppo di siti web, e ho pensato di racchiudere le più significative in questo post. Cominciamo dalle risorse "di casa", ovvero le risorse di HTML.it: la guida all'accessibilità  e quella ai Siti ad alta accessiblità  sono due buoni punti di partenza. Passando alle risorse anglofone: Dive into Accessibility di Mark Pilgrim (di cui è disponibile la traduzione italiana Affrontare l'accessibilità ) è una guida in trenta pratiche lezioni. àˆ disponibile online e consultabile liberamente l'intero libro Building Accessible Websites di Joe Clark. Rimanendo in tema di libri online, anche se si tratta di un libro non prettamente dedicato all'accessibilità  ma a buone pratiche di sviluppo, merita una lettura la Web Style Guide.Concludo infine con siti che contengono articoli e risorse sull'accessibilità : tra questi Web Aim e Juicy Studio, mentre Access Matters contiene dei quiz e test cases su temi specifici dell'accessibilità , sulla falsariga del ben noto Simple Quiz che si occupa invece di markup e fogli di stile. Buona lettura!

Continua a leggere Accessibilità : le letture imperdibili

Categoria: Web Design

Premesso che non parliamo di quelle estetiche bensì di quelle strutturali e funzionali, quali sono le caratteristiche che un sito aziendale dovrebbe avere?Ogni azienda, infatti, ha ben chiare le necessità  dettate dalla legge 626 sulla sicurezza del posto di lavoro, i diritti e doveri dei dipendenti, le relazioni con le istituzioni.Le ditte migliori conoscono il proprio mercato, seguono i propri clienti, sanno di quali macchinari necessitano, certificano i propri fornitori, collaudano o “testano” le materie prime.E il sito? Perché accettano siti fatti come se fossero la home page di un privato cittadino che vuol presentare il proprio curriculum? Siti che mancano di parti fondamentali, con struttura poco chiara e testi a volte persino sgrammaticati.Non fermiamoci solo allÂ’usabilità , allÂ’accessibilità  ed alla compatibilità . Il sito aziendale deve avere anche altre caratteristiche che sono proprie del mondo economico e di impresa.Curiosi? Calma. Tra qualche giorno arriveranno due post: il primo sarà  sugli errori da evitare, il secondo sulle cose da fare (o lÂ’inverso, non ho ancora deciso). A presto :-)

Continua a leggere Le caratteristiche di un sito aziendale

Categoria: Web Design

Nella serie dedicata alla "Grafica per blog con i CSS" (qui i link alla prima, seconda e terza parte) ho presentato alcuni modi per personalizzare titoli e commenti. Segnalo qui due risorse decisamente ispirate e accattivanti, ovvero Typography for headlines e Comment design showcase su Smiley Cat che contengono molti screenshot di questi due elementi di design importanti, con link ai siti da cui sono tratti. Davvero un lavoro certosino.

Continua a leggere Titoli e commenti: alcune ispirazioni

Categoria: Web Design

àˆ un tema carsico quello della home page. Di tanto in tanto torna a riemergere e ad offrire nuovi spunti di riflessione. Ve ne segnalo tre.Sull'ultimo numero di A List Apart interviene Derek Powazek con Home Page Goals. A parte l'outing sul suo approccio al design di un sito (prima le pagine 'interne', poi le sezioni, infine la home), ho trovato molto convincente l'argomento contenuto al punto 2 (che in verità , IMHO, si presta solo a certi tipi di siti). Bisogna fare in modo di adattare la pagina al tipo di utente che la visita. A chi torna, al visitatore abituale, sarebbe opportuno servire informazioni personalizzate, specifiche, diverse da quelle date a chi arriva per la prima volta. Basta creare sulla home un'area dinamica, a contenuto variabile.Chi invece si dice totalmente insoddisfatto di un certo tipo di home page (con l'eccezione di Google) è Seth Godin. L'accusa? Pagine iniziali come quelle di AOL, MSN, Amazon o Technorati, peccano per eccesso, vogliono raggiungere troppi obiettivi, spesso contrastanti, finendo per scontentare tutti, newbie, visitatori abituali e power user. Ecco allora la home page minimalista e tutta centrata sul cosa posso fare qui? di Squidoo, la startup recentemente lanciata dallo stesso Godin.A prescindere da come la home viene progettata, mai dimenticare il link esplicito 'Home' verso di essa nel menu di navigazione! Mai dare per scontato che tutti sappiano che per raggiungerla basta magari un click sul logo. Se è una tendenza quella di evitare quel link esplicito, che sia subito stroncata. John Scrivens dixit.

Continua a leggere Come la faccio la home page?

Categoria: Web Design

Questo lo scenario. Decidi di passare da un layout a larghezza fissa ad uno liquido/elastico con dimensioni espresse in em (o in percentuale). Vuoi però che il logo che appare sulla testata si ridimensioni, scali in grandezza, senza perdere qualità  nel caso l'utente, ad esempio, decida di ridimensionare il testo.John Oxton ha risolto così. Ha creato il logo con un programma di grafica vettoriale, lo ha importato in Flash e ha esportato il semplice movie che ne è risultato. Lo ha quindi inserito nella pagina in questo modo: <div class="container"> <object type="application/x-shockwave-flash" data="logo.swf" > <param name="movie" value="logo.swf" /> <param name="wmode" value="transparent" /> <img src="logo.gif" alt="John Oxton" /> </object> <h1 class="alternate-text">John Oxton</h1> </div> Come si vede, nessuna dichiarazione esplicita per width ed height sul filmato Flash. Le dimensioni sono invece settate nel CSS, in em: object { width:21em; height:4em; } Il risultato? Primo esempio, secondo e terzo. Si provi, ovviamente, a ridimensionare il testo con il browser per apprezzare l'effetto.

Continua a leggere Un logo ‘elastico’ con Flash e CSS

Categoria: Web Design

Tags: , ,

Attenti, web designer. Il frutto del vostro duro lavoro e l'appeal visuale del sito che avete appena realizzato, viene quasi sempre giudicato in una frazione di secondo.Almeno così sostiene uno studio condotto da Gitte Lindgaard, ricercatrice presso l'università  di Carleton, Ontario. Un fatto, quindi, che dovrebbe portare a non trascurare mai l'impatto emozionale del design. Resoconti della ricerca sono apparsi un po' dovunque negli ultimi giorni, ma vi rimando a questa ottima sintesi di WebSiteOptimization.com. Oltre ad una carrellata di link finali di approfondimento, contiene anche una serie di domande alla Lindgaard, una tabella riassuntiva e gli screenshot, rispettivamente, delle tre pagine con il maggiore e minore visual appeal secondo i risultati emersi dal test. Giusto per sapere a cosa non ispirarsi...

Continua a leggere 1/20 di secondo per giudicare un sito

Categoria: Web Design

Quali sono gli elementi HTML più usati sul web? E i nomi di classi? Sono ancora in voga le tabelle e l'utilizzo di attributi di presentazione nel codice?Domande interessanti, senza dubbio, per chi si occupa di fare siti, non fosse altro che per soddisfare la curiosità . Le risposte ce le danno queste incredibili Web Authoring Statistics rilasciate giusto ieri da Google. I dati sono molteplici e riguardano un gran numero di aspetti, ma per fruirli nella loro interezza è consigliabile navigare con un browser in grado di supportare al meglio SVG (Firefox 1.5, per esempio). Sorprese? Non saprei, dipende ovviamente dalle aspettative e dalla percezione dell'oggetto analizzato di ciascuno di noi. Per dire, table supera div di parecchio, e magari la cosa non è molto incoraggiante per chi promuove un certo approccio alla realizzazione di layout. Qualcun'altro, invece, vedrà  il bicchiere mezzo pieno anziché vuoto. Insomma, a voi i commenti.C'è una cosa che mi ha sconvolto e non attiene ai risultati della ricerca. La pagina introduttiva cita all'inizio una serie di ricerche simili svolte per lo più da autori indipendenti negli anni precedenti. Bene, il campione più ampio su cui si sono applicati i poveri umani è di 1315 siti. Google sostiene che la sua analisi è stata svolta, nel dicembre 2005, su circa 1 miliardo di documenti. Direi che come campione è abbastanza rappresentativo....

Continua a leggere Google, istantanea sul web

Categoria: Web Design

di

Grafici di tutto il mondo, unitevi e ascoltate: volete vincere un iPod? Ebbene, ecco una simpatica garetta per voi. Point of View (un titolo decisamente emblematico per una competizione che fa del giudizio soggettivo un dogma irrinunciabile) mette a disposizione un player Apple in una gara non ufficiale in cui l'oggetto del contendere è la produzione del miglior layout per WordPress (la nota piattaforma blog). Ho stuzzicato la curiosità  di qualcuno? Bene, qui c'è tutto il necessario per partecipare. Se qualcuno si iscrive è pregato di farci vedere il lavoro ed informarci sul risultato ottenuto! Occhio che la scadenza è fissata per il 28 febbraio.

Continua a leggere Disegna WordPress, vinci un iPod

Categoria: Web Design

Lo spunto del ragionamento di Jeffrey Veen è un articolo uscito su Design Observer, una recensione del DVD contenente l'intera collezione (80 anni) del New Yorker.Osservando quella collezione emerge subito un fattore chiave dal punto di vista del design: un formato editoriale rimasto nel complesso pressocché immutato, con piccoli cambiamenti distillati con parsimonia nel corso degli anni. Come dice Michael Bierut (autore dell'articolo), sembra essere tutto noioso, ma meravigliosamente, incredibilmente e perfettamente noioso.Nasce da qui l'elogio dello slow design cui allude il titolo di questo post. Un concetto che Veen vedrebbe volentieri applicato anche al web design, un ambito in cui sembra invece prevalere la tendenza a rivisitazioni radicali e cicliche dei siti, magari motivate solo dalla voglia di 'mantenere il passo con i tempi' rispetto alle tecnologie che i nuovi browser sono in grado di supportare. Anche dal punto di vista dell'usabilità , si chiede, non è meglio adottare modifiche incrementali diluite nel tempo piuttosto che ricorrere a soluzioni radicali? E conclude: "L'innovazione troverà  semre e comunque il suo spazio, ma forse è il momento di rallentare un po' la corsa...".

Continua a leggere Elogio dello slow design

Categoria: Web Design