link - TomStardust.com

A List Apart in italiano

Nasce la versione italiana di A List Apart, la rivista online per i lavoratori del web.

Ho scoperto la notizia per caso, notando l’account Twitter: è appena nata la versione italiana di A List Apart, una delle voci più autorevoli sul web per i professionisti del web design. Il sito italiano ripropone da Febbraio 2010 tutti gli articoli del sito originali, traducendoli.

E’ un’ottima notizia per chi ha problemi di lingua (anche se l’inglese è ormai un must per chi vuole lavorare sul web) e per la diffusione di questo magazine, che da anni si distingue dalla massa pubblicando due lunghi articoli a settimana.

Il progetto è gestito da Valeria e Carlo Brigatti, a cui ho rivolto qualche domanda.

Ecco le risposte di Valeria:

Come è nata l’idea di Italian ALA? E’ stato complicato realizzarla?

Ho conosciuto A List Apart quando ho cominciato ad occuparmi di web design. Ho da subito trovato gli articoli pubblicati molto interessanti ed istruttivi. Circa un anno e mezzo fa, mi è venuta l’idea di creare una versione italiana del sito, che traducesse sistematicamente tutti gli articoli pubblicati da A List Apart, per offrire alle persone che si occupano di web, ma non padroneggiano l’inglese a sufficienza, la possibilità di tenersi aggiornati agevolmente. Così ho contattato Jeffrey Zeldman e ho proposto la mia idea, che è stata subito accolta con favore, ma ci è voluto più di un anno perché il team di A List Apart avesse chiara in mente la direzione che il mio progetto avrebbe dovuto prendere. Così, a gennaio sono stata ricontattata per dare il via all’operazione.

Chi siete? Cercate collaboratori?

l team di Italian A List Apart è costituito da me e da Carlo Brigatti. Carlo si occupa della gestione tecnica del sito e del suo sviluppo. Inoltre, è l’autore delle bellissime illustrazioni che accompagnano ogni articolo. Io collaboro con Carlo per la parte tecnica (più che altro fornisco direttive che vengono da lui trasformate in realtà :) ) ed eseguo le traduzioni.

Per il momento riusciamo a gestire il carico di lavoro piuttosto bene. Non percepiamo nessun compenso per il lavoro che svolgiamo, quindi preferiamo gestircelo noi fintanto che saremo in grado.

Potete comunque aiutare Italian A List Apart facendolo conoscere nel web italiano e partecipando alle discussioni degli articoli sul nostro sito. Inoltre, a breve saranno disponibili degli spazi pubblicitari che potranno essere acquistati da chi fosse interessato (Happy Cog – creatrice di A List Apart – ci autorizza a tenere i compensi derivanti dalla pubblicità sul sito).

Come mai il sito è basato su Joomla! e non su ExpressionEngine come l’originale?

Come ho già accennato, non abbiamo un budget per Italian A List Apart e per abitudine Carlo ed io lavoriamo con CMS open source e free, pertanto ci siamo orientati fin da subito verso questa scelta. Nello specifico, Carlo conosce molto bene Joomla! e pertanto si è deciso di utilizzarlo come sistema di gestione dei contenuti.

Trovate la versione italiana di A List Apart su italianalistapart.com

Link accessibili da tastiera

L’importanza di mantenere l’outline sui link, anche utilizzando dei CSS di reset.

Una pratica fin troppo diffusa, spesso derivata dall’uso di CSS di reset, è quella di eliminare l’outline dai link e dagli altri elementi attivi di una pagina per scopi puramente estetici, con poche righe di codice:

:focus {
	outline: none;
}

Potrà sembrare una soluzione elegante, ma ai fini dell’accessibilità di un sito è assolutamente sconsigliato, perchè senza outline diventa impossibile navigare tramite tastiera, o comunque con dispositivi diversi da un mouse.

Non pensate che riguardi solo una minoranza di utenti: sono tanti coloro che scorrono il contenuto di una pagina premendo il tasto tab. In molti ad esempio si spostano tra i campi di un form in questo modo: eliminando l’outline sul focus rendete il vostro sito inaccessibile.

Lo stesso Eric Meyer, autore di uno dei più famosi CSS Reset, pur azzerando questo stile raccomanda di definirne altri per sostituirlo. Il mio consiglio è di lasciarlo inalterato per evitare problemi: perchè complicarsi la vita?

Una soluzione alternativa

A volte potrebbe comunque capitare di essere obbligati a modificare lo stile dei link, ad esempio su richiesta di un cliente particolarmente insistente. Un’alternativa in questi casi è lasciare il focus inalterato ed eliminare l’outline dallo stato active:

a:active {
	outline: none;
}

Così non apparirà il bordo tratteggiato al clic, ma la navigazione da tastiera resterà comunque possibile. Non è una soluzione ottimale, ma in situazioni particolari potrebbe essere un compromesso accettabile.

Foto: Macbook Keyboard by alcomm

L’usabilità dei link testuali

Una guida per la corretta formattazione dei link di testo, evitando soluzioni poco usabili.

I collegamenti testuali di una pagina sono un elemento basilare; capita spesso però che vengano sottovalutati dagli sviluppatori, dando per scontato la loro riconoscibilità.

Per avere dei link usabili in realtà basta seguire alcune semplici convenzioni: implementarle non richiede molto tempo, ma i vantaggi per i vostri utenti saranno evidenti.

Le convenzioni da seguire

In certi casi il rischio di confondere chi visita la pagina è alto: quante volte vi è capitato di provare a cliccare su un testo che in realtà non era un collegamento? Per evitare questi problemi, bisogna tenere presenti alcuni parametri:

Colore – Uno dei fattori principali per distinguere un link dal resto della pagina è il suo colore, differente da quello del contenuto. Attenzione però, perchè il colore da solo non è sufficiente: pensate ai problemi che potrebbe incontrare un utente daltonico.
Stile – Ci sono numerosi stili a disposizione, dalla sottolineatura al grassetto, passando per il tipo di font utilizzato. L’importante è che venga usato uno stile differente dal resto della pagina: la pratica comune vede i link sottolineati, ed è bene seguire questa convenzione.
Contrasto – Un link deve essere in evidenza, e non deve essere difficile da identificare. Cambiare il colore non basta, il contrasto deve essere elevato.
Comportamento – Tra le convenzioni più diffuse c’è quella del cambio di cursore al mouseover. Vedere il puntatore trasformarsi in una mano è indispensabile.

Tenendo presenti questi fattori, è possibile ottenere molteplici combinazioni usabili. Sperimentare è lecito, ma ricordate che innervosire i vostri utenti con dei link non riconoscibili, o ancora peggio dei testi normali che sembrano collegamenti, potrebbe causare la loro fuga. Non aspettatevi di ricevere segnalazioni nel caso ci siano problemi di questo tipo, il visitatore medio lascerà il vostro sito innervosito senza concedervi altre possibilità.

Qual è la pratica migliore?

Di default i collegamenti hanno la sottolineatura con text-decoration: underline, ed un colore blu facilmente riconoscibile.

Personalizzando questa impostazione, tenete presente che la sottolineatura è tuttora la pratica migliore e più diffusa. Se però non vi piace il risultato finale, potreste considerare di utilizzare un border-bottom al suo posto, come viene fatto su A List Apart. Il risultato può essere ulteriormente migliorato con 1 pixel di padding-bottom:

Un’altra pratica piuttosto diffusa, che utilizzavo su questo sito qualche tempo fa, sono i link in grassetto, senza sottolineatura. Il problema è che la distinguibilità dei collegamenti in questo caso dipende molto dal colore. Un esempio chiaro si ha su TechCrunch: guardando la pagina in bianco e nero grazie a GrayBit, i link non sono così evidenti come quelli sottolineati:

Ovviamente le varianti possibili sono infinite, l’importante è essere sempre consapevoli di quello che si sta facendo.

Ricordate comunque che in certi casi l’originalità può essere messa da parte e riservata ad altri dettagli: dei link usabili e facilmente riconoscibili sono indispensabili per garantire ai vostri utenti la migliore esperienza di navigazione possibile.