L'open source è ormai una realtà  consolidata sul web. Sebbene esistano moltissimi template disponibili liberamente in rete, il concetto di web design open source ha in un certo senso qualcosa di nuovo. Segnalo così alcuni siti divenuti popolari negli ultimi tempi proprio per il fatto che offrono template HTML e CSS rigorosamente open: Open Web Design Open Source Web Design Pretty as a picture Il mio consiglio è: se siete in grado, non fate i pigri e usate la vostra creatività  per qualcosa che sia unico e vostro. Ma se tempo, conoscenze o capacità  grafiche dovessero essere ostacoli insormontabili il web design open source potrebbe essere una pratica soluzione e/o fonte di ispirazione e studio. Mi raccomando in ogni caso di rispettare i lavori originali degli autori, e soprattutto le eventuali condizioni di licenza (sostanzialmente i credits) con cui vengono forniti i template.

Continua a leggere Web design open source

Categoria: Web Design

Roger Johannson nel suo recente articolo Setting font-size in pixels affronta uno dei temi più hot di sempre del web design, ovvero pro e contro del dimensionamento dei caratteri in pixels. Si tratta di uno dei tanti tormentoni del web design, che per quanto se ne parli e per quanto l'ago della bilancia possa pendere da una parte o dall'altra, difficilmente trova una parola definitiva. Ma quali sono gli altri? Credo sia ormai sulla via del tramonto il tema CSS contro tabelle per il layout, forse l'unico tormentone ormai fuori moda. Sempre evergreen risultano invece: Dimensionamento in pixel o relativo dei font Layout fisso contro liquido HTML contro XHTML A cui aggiungo la nuova entrata usabilità  e accessibilità  di AJAX. Sinceramente non mi sento di entrare nel merito di discussioni di entità  così imponente, spesso sorrette da argomenti validi e universalmente riconosciuti da una parte e valutazioni specifiche dall'altra. D'altra parte il web design non è una scelta esatta, e a comandare sono spesso necessità  e buon senso. Ma vorrei lasciare aperta la discussione: qual è attualmente il tormentone più in voga? E il prossimo che si avvia verso il tramonto?

Continua a leggere I tormentoni del web design moderno

Categoria: Web Design

Web Design from Scratch è un nuovo sito dedicato a chi si avvicina a questa pratica con l'intento di creare siti efficaci ed esteticamente gradevoli. Nulla di nuovo, per certi versi, ma alcune delle mini-guide in cui sono suddivise le principali aree del sito sono davvero ben fatte.Ne segnalo una, quella aperta e sempre in fieri in cui l'autore propone una sorta di stato dell'arte del buon design sul web: Current Web Style. àˆ piena di screenshot e link di siti che spiccano in qualche modo per le loro caratteristiche e che sono accomunati da questi elementi (ritenuti evidentemente vincenti nel contesto attuale):layout semplici;effetti tridimensionali, gradienti e riflessi usati con parsimonia ma in modo efficace;sfondi bianchi o con sfumature di grigio;utilizzo appropriato e moderato di colori forti;uso equilibrato di icone e altri elementi grafici;grande utilizzo di spazi bianchi di respiro;testo grande.

Continua a leggere Web Design che funziona

Categoria: Web Design

Tags:

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