Dopo Bite Size Standards di cui ho parlato qui, ecco Vitamin, un nuovo sito multiautore sul web design che, data la caratura degli autori, è senza dubbio molto promettente. Si tratta di una risorsa destinata a diventare un punto di riferimento.I primi articoli sono decisamente interessanti: How CRAP is your site design di Mike Rundle propone un'analisi dei siti web in base ai quattro elementi fondamentali del design: Contrasto, Ripetizione, Allineamento e Prossimità . Molto informativo, e a dire il vero è uno di quegli argomenti che avevo in mente per un articolo.Notevole il punto di vista di Dave Shea in Stop Hacking, or be Stopped sull'importanza di evitare gli hack CSS, soprattutto con IE7 che entrerà  presto nella rosa dei browser da tenere in conto per lo sviluppo e il test di siti web. A proposito di IE7, il 24 aprile è stata rilasciata la beta 2 che vale la pena di installare. Mi raccomando: se avete installato la beta precedente, va disinstallata prima di procedere con l'installazione.Infine, in Making Popular Layout Decisions Eric Meyer parla di scelte essenziali nello sviluppo di siti web: la risoluzione, il tipo di layout e il dimensionamento dei font. Quello che risulta è che non ci sono risposte assolute e scelte migliori rispetto ad altre.

Continua a leggere Vitamin, il web design multivitaminico

Categoria: Web Design

Il titolo è un gioco di parole fatto a partire da un libro di Sofia Postai: Siti che funzionano. Di siti che emozionano parla invece Donald Norman in questo breve saggio apparso sul suo sito personale.Norman prende le mosse dai nuovi, straordinari, servizi di mappe geografiche di Google, Yahoo! e Microsoft. Rispetto ai loro predecessori, a parità  di fattori come l'utilità , l'usabilità  e le informazioni che forniscono, offrono un'esperienza di gran lunga più coinvolgente. Perché? Per l'immediatezza del feedback, per i colori, per gli effetti di semi-trasparenza dei livelli sovrapposti, ma soprattutto per il movimento e per la fluidità  di questo movimento.Vi lascio alla lettura dell'articolo, non prima di aver riportato la parte finale, quella che guarda al futuro: We are moving from static pages with their clunky, slow repainting of the page to fluid, dynamic displays, where the movement is a major part of the charm. We are moving from behaviorally effective designs to ones that add emotional engagement.

Continua a leggere Siti che emozionano

Categoria: Web Design

Nei precedenti appuntamenti abbiamo presentato la selezione di dieci siti da analizzare e il principale tool di analisi, ovvero i CSS utente. Il primo dato che si rileva molto facilmente è il numero totale di div strutturali e liste di navigazione. Tale numero è molto variabile nei siti presi a campione: dai 14 elementi di digital web magazine ai 113 di ajaxian. Ora qualche curiosità : 9 siti su 10 (a parte ajaxian) hanno i contenuti dopo le colonne secondarie, solo 1 sito su 10 (digital web magazine) ha la navigazione principale dopo i contenuti, 9 siti su 10 (a parte Molly) hanno il footer come ultimo elemento. Per questo ultimo dato ho dovuto dare una sbirciatina alle prime righe di markup, ma ero troppo curioso: solo 2 siti su 10 (Molly e MeyerWeb) hanno gli skip links e i link di navigazione interna alla pagina. Questo è tutto, lascio al lettore curioso ulteriori approfondimenti: il CSS visto nello scorso appuntamento dovrebbe essere un buon punto di partenza per ulteriori sviluppi.

Continua a leggere Visti da vicino: alcuni risultati

Categoria: Web Design

Una volta c'erano le directory alla Yahoo!. Oggi sembra che la tendenza sia quella di fare collezioni di risorse suddivise per argomento sbattendo tutto sulla stessa pagina. Questa è davvero massiccia e copre davvero ogni possibile ambito legato al design: font, illustrazione, fotografia, tipografia, etc, etc. Presenti anche i link diretti a decine di articoli in PDF.

Continua a leggere Siti e risorse sul design

Categoria: Web Design

Tags: ,

Nello scorso appuntamento abbiamo presentato il campione di dieci siti. L'analisi è soprattutto volta al markup in relazione al layout: ho così avuto la necessità  di uno strumento un po' più pratico e veloce rispetto alla semplice consultazione del codice (X)HTML. Ecco l'idea: tipicamente siti table-less usano elementi strutturali e di navigazione (rispettivamente div e ul) con id e classi. E' possibile con Opera visualizzare una qualsiasi pagina con i CSS autore e i CSS utente contemporaneamente: basta quindi un CSS pensato ad hoc per etichettare e numerare gli elementi di pagina principali, mantenendo comunque il layout originale. Questo si ottiene facilmente con poche regole CSS che usano il selettore di attributo, lo pseudo-elemento :before e i contatori. Argomenti che potrete approfondire negli articoli Selettori e proprietà  CSS avanzate per esempi e Usare i CSS utente su HTML.it. Ecco quindi le regole del CSS utente che ho creato: div[class]:before{content: "div." attr(class) " (" counter(n) ")"} div[id]:before{content: "div#" attr(id) " (" counter(n) ")"} ul[class]:before{content: "ul." attr(class) " (" counter(n) ")"} ul[id]:before{content: "ul#" attr(id) " (" counter(n) ")"} div[id]:before,div[class]:before,ul[id]:before,ul[class]:before{     counter-increment: n;background: #9cf;color: #000} E' bastato poi caricare il CSS utente in Opera e con le opportune modifiche al file di configurazione del browser, e il gioco è fatto. Ecco uno screenshot di Stopdesign visto con il CSS utente aggiuntivo: E' tutto per ora: visto il principale tool di analisi, non ci resta che procedere con i risultati, che saranno argomento del prossimo post.

Continua a leggere Visti da vicino: i CSS come tool di analisi

Categoria: Web Design

Esistono studi affermanti che in una certa percentuale di individui, il carico cognitivo dato da immagini ed icone sia inferiore rispetto ai testi corrispondenti. Questa cosa mi riesce difficilmente comprensibile, ma devo ammettere che conosco persone che un messaggio testuale non lo leggerebbero quasi mai, per quanto grave, mentre si soffermerebbero sicuramente davanti ad una bella immagine con una X rossa. Le stesse persone, usano più facilmente quei programmi che pulsanti iconici, piuttosto che quelli a menu testuali. (more...)

Continua a leggere Come spiegare le immagini: il ciclo Prova/Abbandona

Categoria: Web Design

In questi giorni sarà via fino a fine settimana, ho così pensato di preparare una mini-serie un po' particolare. Come già  anticipato da Cesare in questo commento al post il sito è nudo, una ridistribuzione dei contenuti e un redesign del blog sono in programma, anche per rialineare link e risorse del nuovo HTML.it. Niente di sicuro su tempi e modi, ma ho pensato di cominciare con una fase di analisi, soprattutto per soddisfare la mia natura curiosa. Dieci i siti presi a campione: alcuni presentano qualche somigliamza con <Edit> per tipologia degli argomenti e varietà  dei contenuti, altri sono stati scelti per la loro autorevolezza e per l'impegno di divulgazione. Si tratta di quattro siti multiautore, un network e cinque siti personali. Ecco la lista: sitepoint digital web magazine ajaxian alistapart 9rules StopDesign Molly MeyerWeb SimpleBits MezzoBlue Questa la selezione, di cui credo che molti dei lettori ne conoscano una buona parte: nei prossimi appuntamenti cercheremo di vederli sotto un'altro aspetto. Nel frattempo, qualche considerazione sul layout: esattamente 5 siti su 10 adottano un layout liquido (e gli altri 5 un layout fluido), solo due su dieci presentano un layout a due colonne, e solo due hanno un layout a tre colonne per alcune pagine e a due per altre. E' tutto per ora: nel prossimo post vedremo come i CSS possano essere un ottimo strumento di analisi oltre che di sviluppo.

Continua a leggere Visti da vicino: dieci siti sotto la lente

Categoria: Web Design

LÂ’altra sera volevo giocare a carte, ma dato che la mia ragazza mi diceva che è troppo da vecchi, abbiamo trascorso qualche ora leggendo il libro “Neuropsicologia del linguaggio", di M. Agliotti e F. Fabbro, commentando una conferma scientifica a una cosa che il buonsenso da sempre ci dice. Parliamo dellÂ’importanza che interfacce e siti destinati ad utenti italiani, abbiano contenuti in italiano. (more...)

Continua a leggere Se non bastasse il buonsenso

Categoria: Web Design

Negli ultimi tempi ho notato un aumento di siti e blog dedicati al web design in cui il tema centrale non sono i CSS o il codice, ma tendenze, soluzioni, risorse, opinioni e interviste... in alcuni casi si tratta di un vero e proprio ritorno al design, in cui spesso vengono presentate letture informative e diverse del solito. Segnalo qui in ordine sparso le mie preferite: Design Melt Down Web Design Times Fadtastic the Web Design Blog The Elements of Typographic Style Applied to the Web Smiley Cat Design View Information Design Designers who blogs Mcville Tutti i siti sopra citati hanno anche un feed RSS. Buona lettura!

Continua a leggere 10 siti sul web design

Categoria: Web Design

àˆ passato più di un anno dalla prima versione dei Nifty Corners e oltre ai tre articoli in italiano (primo - parte prima e seconda - secondo e terzo) sono state pubblicate le versioni in inglese per l'audience internazionale (primo, secondo e terzo) che sono state spunto per diverse soluzioni derivate e varianti.Cominciamo con le versioni solo HTML e CSS. Stu Nicholls dopo la pubblicazione del primo articolo ha presentato gli Snazzy Borders e i Krazy Korners; mentre recentemente sono stati pubblicati gli Spiffy Corners, che includono un generatore dell'HTML e CSS necessario per avere angoli arrotondati con antialias. Quest'ultima soluzione è stata duramente criticata su Sitepoint per il fatto che si basa su HTML presentazionale e vincolato al contenuto, critica che condivido.Ora le soluzioni con Javascript. In ordine di tempo dopo il primo articolo sono comparsi diverse varianti e soluzioni derivate. Gli Anti-alias Nifty Corners e i Rounded corners without images, le prime due soluzioni per avere angoli arrotondati con antialias. Dopo il secondo i rounded corners di Rico, parte di un framework Javascript che include ajax e effetti dinamici, con detection automatica dei colori e bordi. Successivamente sono stati pubblicati i rounded corners di EditSite, che combinano alcune delle soluzioni precedenti con la possibilità  di scegliere la dimensione degli angoli arrotondati con antialias, solo sui div.Le più recenti soluzioni sono i Curvy Corners, che offrono la possibilità  di bordi con antialias e spessore a piacere, e i recentissimi RuzeeBorders, che consentono di ottenere angoli arrotondati con antialias ed effetti drop shadow e glow con una precisione quasi pari a Photoshop: davvero notevole.In molti casi purtroppo la compatibilità  cross-browser non è dichiarata (da verificare soprattutto su IE5.x e Safari), e c'è solo un esempio ad accompagnare lo script o l'articolo. Soprattutto per le ultime due librerie citate, in alcuni casi lo script si presenta lento e ho il sospetto che appesantisca veramente troppo l'albero DOM della pagina. Una buona fase di test è quindi necessaria se avete intenzione di adottarle, ma ho ritenuto fosse opportuno presentare le soluzioni derivate e/o alternative.

Continua a leggere Nifty Corners e derivati

Categoria: Web Design