Line Height

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 confondono 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.

Ultima modifica: Giovedì 12 Febbraio 2009, 01:44

I CSS 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 è che i fogli di stile sono caratterizzati da una vasta gamma di proprietà e valori, alcune delle quali sono spesso poco conosciute.

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é largamente utilizzati. Premesso questo, il test analizza le altre nove possibilità.

Per ogni voce c’è una spiegazione (spesso tradotta da fonti esterne), seguita da una lista di browser compatibili e da un esempio dove è possibile vedere la proprietà in azione.

A piè di pagina ho inserito una lista di fonti dalle quali ho preso spunto man mano che procedevo col lavoro, che spero possa essere utile per chi ha intenzione di approfondire ulteriormente l’argomento.

Nota: La pagina è abbastanza datata e necessita di alcune correzioni. Spero di applicarle al più presto.

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