Line Height

Luca (aka deMo) mi segnala questo approfondimento sulla specificità CSS(Cascading Style Sheets) dei links di Eric Meyer.

Il documento è vecchio (l'ultima modifica risale al 5 Febbraio 2005), ma l'argomento è interessante: come al solito non si smette mai di imparare. La frequente domanda a cui Eric risponde in questo piccolo articolo è: Ho provato ad applicare i CSS ai miei links, ma l'hovering non funziona. Come è possibile? E' colpa di questi stupidi browsers? E' in questo frangente che viene introdotta la specificità dei selettori, ed in particolare delle pseudo-classi applicate all'elemento <a>.

Il problema di fondo sta tutto nell'ordine in cui vengono specificati gli stati per un link. Io personalmente ho sempre raggruppato a:link, a:visited, a:active insieme, per poi eventualmente ridichiararne uno dopo aver definito gli stili di a:hover. Il signor Meyer invece ci illustra il metodo LVHA, ovvero Link Visited Hover Active: se scritti in questo ordine, gli stati di ogni link non si sovrascrivono, come al contrario potrebbe succedere in altri casi.

Ma allora, perchè bisogna seguire questo schema? They all have equal weight. Hanno tutti lo stesso peso.

 a:link {color: blue;}        /* specificità = 1,1 */
 a:visited {color: purple;}   /* specificità = 1,1 */
 a:hover {color: magenta;}    /* specificità = 1,1 */
 a:active {color: red;}       /* specificità = 1,1 */

E' poi interessante il metodo proposto da Eric (e valido con i CSS 2) per scavalcare il problema di specificità, senza intaccare le altre pseudo-classi e/o creare conflitti di alcun tipo. La soluzione consiste nel combinare insieme più stati:

 a:visited:hover {color: maroon;} /* specificità = 2,1 */
 a:link:hover {color: magenta;}   /* specificità = 2,1 */
 a:hover:active {color: cyan;}    /* specificità = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. In sostanza, quindi, la specificità rimane la stessa, ma cambia l'ordine e si rompe lo schema: la selezione diventa più specifica, offrendo tra l'altro una maggiore personalizzazione (possiamo infatti creare effetti di hovering diversi in base alla natura del link).

La volta scorsa, con discreta superficialità, si è parlato di semantica e di forum (vedi La semantica nei forum): oggi invece facciamo l'esatto contrario, e parliamo di design nei siti web.

Mike Rundle, professionista nel campo, ci illustra un metro di giudizio utile per migliorare il design dei nostri siti web: I principi di C.R.A.P. (ben diverso da crap, che è invece un termine volgare usato per denigrare il lavoro altrui).
L'acronimo sta per Contrasto Ripetizione Allineamento Prossimità: significa, pertanto, che dobbiamo agire sull'aspetto di una pagina sulla base di questi quattro concetti principali, tutti strettamente correlati fra loro. Mike li spiega così (scusatemi se la traduzione/interpretazione non è delle migliori):

• Contrasto

  Elementi con scopi diversi dovrebbero essere molto differenti dal punto di vista estetico. Leggere sfumature confondo l'utente portandolo a stabilire relazioni che non esistono. Un forte contrasto fra i vari elementi permette agli occhi del visitatore di seguire un determinato flusso, piuttosto che creare una melma anonima di elementi somiglianti fra loro, noiosa ed assolutamente non comunicativa.

• Ripetizione

  Per ottenere un'atmosfera coerente è bene utilizzare sempre gli stessi stili: se ci sono elementi correlati dallo stesso look in una porzione di pagina, continua ad utilizzare lo stesso metodo per tutte le aree simili (chi gestisce un blog non avrà difficoltà a capire), in favore di una certa solidità e consistenza.

• Allineamento

  Ogni cosa deve essere connessa visivamente a qualcos'altro, niente dovrebbe essere fuori posto o distinto da tutti gli altri elementi del design.

• Prossimità

  La prossimità crea relazioni fra elementi: quelli con la stessa valenza dovrebbero essere raggruppati insieme; quelli che esprimono significati diversi, invece, necessitano di essere distanziati con spazio sufficiente ad evidenziare la loro differenza ed incompatibilità.

Quindi, una volta ideata e concepita la struttura di una pagina, il compito del webdesigner dovrebbe consistere nel fornire visivamente agli elementi le corrette relazioni logiche (ecco a tal proposito una pagina riassuntiva dei concetti C.R.A.P.).

Nella maggior parte dei casi, un buon lavoro comporta anche discreti risultati nell'ambito dell'accessibilità e dell'usabilità: l'utente comprende e memorizza subito lo schema della pagina, allontana eventuali problemi di navigazione e di lettura, e riesce ad usufruire dei contenuti che gli sono stati offerti senza alcuna difficoltà.
Si crea quindi un ambiente favorevole alla permanenza, poichè chi entra avverte subito un gradevole sensazione di affidabilità, sentendosi così a suo agio.
E' un aspetto importantissimo che, possibilmente, non dovrebbe essere trascurato.

[...] if you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about if your padding is off or elements aren’t aligned, you’ll just do it correctly from the start.

E' proprio così: il manuale per sviluppatori web di Vitaly Friedman non ha carenze di nessun tipo, e fornisce una vasta gamma di collegamenti utili per gli sviluppatori, relativi a un'altrettanta vasta gamma di argomenti: dalle tecniche di colorazione ai CSS, dalle references HTML a quelle DOM, dalle più rinomate librerie Javascript al Web 2.0.

Tanto per fare un esempio, vi segnalo alcune delle cose più curiose / interessanti / utili che ho trovato partendo da questa documentazione, e navigando per ipertesti.

• Giocare a carte coi CSS

  Una curiosa dimostrazione di come sia possibile emulare un solitario semplicemente lavorando con entità HTML e proprietà CSS.

• Hack Triple-X esclusivo per IE 7

  Molti errori di IE 6 sono stati sistemati e corretti nella versione beta 2 di IE 7. Eppure, a quanto pare, col nuovo browser ne sono comparsi di nuovi: sembra che sfruttino lacune dei CSS 3.

• Personalizzare i pulsanti di invio

  David Longworth ci spiega come realizzare degli accattivanti pulsanti di invio simili a quelli di Stylegala.

• Creare blocchi di links

  Un curioso articolo che spiega come creare blocchi di links completi di data, titolo e descrizione di notevole effetto, grazie all'ausilio dei fogli di stile.

• Personalizzare i links in base al tipo

  Alexander Sperl definisce quattro tipi di links: esterni, interni, indirizzi di posta e specifici. La guida spiega come gestire ognuno di questi links, e si avvale della proprietà background-image.

• 25 Fonts di ottima qualità

  L'instancabile Vitaly Friedman ha anche realizzato una classifica di 25 fonts - tutti gratuiti e di grande qualità - ottimi per un buon impatto professionale.

Ci sono inoltre servizi di manipolazione immagine come il suddivisore in porzioni, di Chami.com o Polaroid-o-nizer, realizzatore di foto Polaroid. Fra le varie voci, infine, ho anche scoperto Don't Meet Your Heroes, che offre flussi di notizie provenienti dai più importanti siti web dedicati al design.

I CSS(Cacading Style Sheets) sono uno strumento potente, poichè permettono un pieno controllo sugli elementi della pagina. Questa è una cosa che, più o meno, sappiamo tutti. Quello che non sappiamo (scusate se vi coinvolgo :P) è che i fogli di stile sono caratterizzati da una vasta gamma di proprietà e valori, alcune delle quali sono spesso poco conosciute... quasi "misteriose".

Così, qualche giorno fa, ho deciso di approfondire la questione, studiando cause ed effetti di tutti i valori possibili per la proprietà CSS display. Dopo alcuni giorni di lavoro (e di pausa), ho finalmente completato la pagina di analisi e verifica della proprietà display.

Il documento prende in esame ogni tipo di valore possibile: vengono tralasciati i parametri block, inline e none, poichè generalmente sono quelli più conosciuti ed utilizzati, e non mi sembrava il caso ritornarci sopra. Premesso questo, il test analizza le altre nove possibilità. Per ogni voce c'è una spiegazione (spesso tradotta dalle pagine del consorzio o da altre guide online), seguita da una lista di browser compatibili (purtroppo poco precisa) e da un esempio. Quest'ultimo è organizzato con bordi di diverso colore, in modo tale da facilitare la distinzione di ogni elemento. A piè di pagina, infine, ho inserito una lista di fonti dalle quali ho preso spunto durante la lavorazione, che spero possa essere utile per chi ha intenzione di approfondire ulteriormente l'argomento.

Non so quanto questo lavoro possa essere stato costruttivo. Mi auguro, comunque, di essere stato d'aiuto per chi, come me, desidera colmare alcuni dubbi nell'ambito della presentazione. :)

Vai alla pagina d'esperimento CSS: La proprietà display.

Scegliere il giusto carattere, le giuste dimensioni, le giuste misure per il testo di una pagina web non è assolutamente facile: in gioco ci sono tanti parametri, portati dagli utenti che ci visitano, e tante regole da rispettare, per ottenere dei buoni risultati nel campo della leggibilità.

We now have the tools to return typography to its true role within the sphere of design.

Come specificato in un ottimo articolo sull'anatomia dei caratteri web, il foglio stampato ed il layout web non hanno nulla in comune, nemmeno la rappresentazione dei colori (additiva per i monitor, sottrattiva per il supporto cartaceo). Questo genera alcune differenze, specialmente per quello che riguarda la famiglia di caratteri da utilizzare.

La tipologia di caratteri Serif è quella maggiormente utilizzata nella stampa: ogni tratto termina con piccole linee e/o eleganti decorazioni che accompagnano l'occhio nella lettura del testo (es. Times New Roman, Georgia, Garamond). Appartengono invece alla famiglia Sans Serif tutti quei caratteri privi di questi "fronzoli" (es. Verdana, Arial, Helvetica).

Su foglio, l'impatto di quest'ultimi agli occhi del lettore non è certo dei migliori: lo scarso contrasto e la semplicità delle lettere rendono il testo decisamente monotono e privo di interesse. Tuttavia, su un monitor, questi fattori non devono essere tenuti troppo in considerazione. Le dimensioni relativamente piccole adottate dagli sviluppatori, e il sempre più frequente utilizzo della smussatura (detta anti-alias), fa sì che la famiglia serif risulti scomoda per la lettura: tutte le linee, le curve, le terminazioni poste sulle braccia di ogni lettera diventano "puntini" fastidiosi e seccanti che rendono incomprensibili le parole e (se è attivo l'anti-alias) danno un effetto sfocato decisamente poco adatto a testi che vorremmo fossero letti con attenzione e partecipazione.

A riguardo vi rimando ad un altro breve articolo sulla scelta del giusto set di caratteri.

Una volta deciso il font da utilizzare, bisogna tener conto di alcuni importanti fattori essenziali per dare al testo una buona leggibilità: interlinea, spazio fra le lettere, allineamento, dimensioni del testo, eccetera. E' qua che entra in gioco, quindi, webtypography.net - a practical guide to web typography, un interessante riassunto dell'omonimo libro di Robert Bringhurst dedicato all'argomento tipografia, dove vengono illustrate tutte le proprietà CSS(Cascading Style Sheets) per realizzare testi altamente fruibili, e le tecniche utili per focalizzare e mantenere l'attenzione sui contenuti.