CSS  »  Articoli  »  Effetti con CSS 

Dopo aver parlato di tag list nell'articolo Tag List con background e CSS torniamo a parlare di tag. Questa volta l'argomento sono le tag cloud, sempre più presenti in siti di natura sociale, Web2.0 e blog.

A differenza delle tag list, che caratterizzano un singolo elemento (ad esempio un bookmark, un post, un articolo o un prodotto) una tag cloud è un modo per offrire ai visitatori, in un solo colpo d'occhio, la diffusione di frequenza di tutti i tag presenti su un sito. Dopo alcune considerazioni di carattere generale, presenteremo un semplice esempio che dovrebbe costituire una buona base di partenza per le tag cloud che vorrete realizzare.

Tag cloud: alcuni consigli

Le tag cloud sono uno strumento di consultazione a volte utilissimo e in alcuni casi quasi necessario, ma ci sono alcuni aspetti implementativi che vengono spesso trascurati. Prima di iniziare con codice ed esempi, ci sono alcuni consigli che mi sento di dare:

• Se possibile, usare un carattere ridimensionabile anche per gli elementi delle tag cloud; ed in ogni caso accertarsi che anche i tag a frequenza più bassa siano abbastanza leggibili
• È indispensabile controllare il line-height della tag cloud: un valore senza unità di misura è nella maggior parte dei casi più indicato. Un buon valore da utilizzare potrebbe esssere quello corrispondente alla misura del tag più grande: se questo ad esempio è 180% del font-size di base (oppure 1.8em) si potrebbe specificare un valore di line-height di 1.8
• Il testo delle tag cloud generalmente si presenta centrato o giustificato: nel secondo caso è importante, per questioni di leggibilità, che la larghezza della tag cloud sia sufficientemente grande in modo da non generare troppo spazio vuoto e/o "buchi" tra i vari tag
• Il numero di grandezze dei tag da usare è variabile: un minimo di tre e un massimo di cinque dovrebbe andare nella maggior parte dei casi.
• L'informazione visiva sulla grandezza dei tag è importantissima, ma non dovrebbe essere l'unico modo per convogliare l'informazione della loro frequenza: l'uso dell'attributo "title" è il modo più diffuso ed efficace per fornire la frequenza numerica dei tag: qualcosa del tipo <a href="#" title="33 post con tag CSS">CSS</a>.
• In quanto al markup: trattandosi di un elenco di tag, la tag cloud dovrebbe essere codificata come una lista non ordinata

Altri articoli

Altre guide

Altre newsletter