Quinte Parallele wants you (don’t take our word for it, rather Brahms’s)

Il manuale/la guida di stile per l’utente/l’autore/il redattore di Quinte Parallele

Questo stile di paragrafo – denominato ‘Slogan grandissimo’ –  può essere utile per introdurre i contenuti da utilizzare all’interno degli articoli. Può essere, come in questo caso, seguito da un blocco testo comune, magari impreziosito da un capolettera.

Ci siamo chiesti come si potesse stabilire delle linee guida editoriali per il nuovo Quinte Parallele, che potessero esser facilmente interpretabili e non esponessero gli autori a un training passo-passo, tedioso e difficile da padroneggiare. Allora, ci siamo risposti che avremmo redatto un articolo che potesse affrontare le tipologie di più frequente applicazione – proprio partendo dagli elementi relativi alla tipografia, ovvero all’utilizzo dei caratteri all’interno del sito.

Slogan grandissimo, utilizzato aggiungendo il corsivo, produce un eccellente “effetto riassunto”

Slogan molto grande, utilizzato aggiungendo il corsivo, produce anch’esso un buon “effetto riassunto”

Slogan in risalto, utilizzato aggiungendo il corsivo, produce un “effetto riassunto” credibile, ancorché meno evidente, data la prossimità con la grandezza del testo di default

Per prima cosa, i titoli (e i paragrafi di testo)

I titoli sono elementi gerarchici per definizione; il linguaggio hmtl ne prevede sei livelli – da 1 a 6. Il livello 1, o – per maggior precisione – h1 provvede alla titolazione più importante, dal punto di vista gerarchico; il livello 6 (h6) quello meno importante. In genere, considero la titolazione da h4 a h6 come interstiziale, ovvero adatta a sopratitoli e sottotitoli. h1, quando non addirittura riservato al titolo del sito (nome della testata), deve essere comunque riservato a comunicare una sintesi di estrema rilevanza.

Proprio per quanto detto, i titoli non andrebbero mai appesantiti con stili aggiunti cosiddetti inline. Nei titoli, si consiglia di evitare assolutamente il grassetto, e di utilizzare con estrema parsimonia il corsivo.

Per quanto riguarda i paragrafi, allo stato attuale sono state valorizzate quattro grandezze, espresse nel menu laterale come “Slogan grandissimo” (utilizzato generalmente come “hero text” per introdurre le pagine statiche, e utilizzato nella presente pagina-manuale-guida di stile dell’autore come introduzione ), e, a scalare, le grandezze “Slogan molto grande” (utilizzato in questo paragrafo) e “slogan in risalto”.

Procedendo nell’elencazione degli stili che valorizzano le grandezze della tipografia, lo “slogan in risalto” è stato utilizzato nel presente paragrafo per illustrarne la valenza secondo la guida di stile.

L’altro stile è “Default”, appunto applicato di default a tutto il testo a cui non abbiamo associato una grandezza scelta dall’utente/autore. È necessario disporre di uno stile di default selezionabile, altrimenti non si potrebbe tornare indietro dalla selezione di grandezze diverse da quella di default.

Come sono state definite queste grandezze? sempre in modo proporzionale rispetto al font di default che l’utente valorizza sul proprio computer/tablet/telefono (genericamente, dispositivo). questa è la grandezza di default.

A questo punto, l’utente/autore di Quinte Parallele si starà chiedendo: perché variare le grandezze del testo? le statistiche sull’usabilità dimostrano che alternando grandezze fra i paragrafi si aumenta l’attenzione del lettore.

Titoli: questo si fa (h1)!

Titoli: questo non si fa (h1)!

Titoli: questo si fa (h2)!

Titoli: questo non si fa (h2)!

Titoli: questo si fa (h3)!

Titoli: questo non si fa (h3)!

Titoli: questo si fa (h4)!

Titoli: questo non si fa (h4)!

Titoli: questo si fa (h5)!

Titoli: questo non si fa (h5)!

Titoli: questo si fa (h6)!

Titoli: questo non si fa (h6)!

Utilizzo del blocco citazione (croce e delizia)

(questo paragrafo è stato ingrandito solo a scopo dimostrativo delle possibilità di impaginazione) Abbiamo concepito il nuovo Quinte Parallele pensando a un magazine raffinato, con punti di riferimento nella fascia alta della carta stampata.

Il blocco citazione si posiziona di default alla destra del testo che accompagna, ma questo posizionamento può essere modificato

Il blocco citazione si posiziona di default alla destra del testo che accompagna, ma questo posizionamento può essere modificat
o

Carlo Emilio

Per questo, abbiamo pensato a strutturare elementi che avessero una funzione di aumento dell’attenzione del lettore, senza disdegnarne la funzione decorativa. Un caso interessante è il blocco citazione, che è un modo intelligente per rendere la lettura più focalizzata, e in genere, più gradevole. Definiamo prima i casi di utilizzo improprio di questo blocco:

• Non è adatto alla generica evidenziazione di un blocco di testo qualunque (ad esempio, non serve a evidenziare il contrasto domanda/risposta);
• non è utile né consigliabile utilizzarlo in un contesto in cui si riporta un semplice discorso indiretto.

Qual è dunque l’utilizzo che consigliamo di fare del blocco citazione?

• Per estrapolare una parte del discorso, anche non completa, o ellittica in alcune parti (caratterestica che evidenzieremo attraverso la convenzione […], quadra e puntini di sospensione), mettendola in evidenza. L’occhio del lettore la individuerà come elemento riconoscibile.

Per quanto riguarda i comportamenti che abbiamo previsto per renderlo il più possibile funzionale e decorativo, l’utente/autore di Quinte Parallele può sfruttarne le caratteristiche intrinseche (connaturate all’utilizzo semantico dell’HTML) e quelle invece valorizzate espressamente per Quinte Parallele. un elemento citazione nasce diviso in due parti:

• il testo da estrapolare;
• la fonte, ovvero l’autore (il Parallelo che ha redatto l’articolo).

Per questo, abbiamo pensato a strutturare elementi che avessero una funzione di aumento dell’attenzione del lettore, senza disdegnarne la funzione decorativa [… è possibile utilizzarlo]
senza popolare la fonte, come in questo caso

Testo da estrapolare e fonte sono funzioni evidenziate attraverso due tag specifici, valorizzati anche visivamente. Quando l’utente/autore crea un nuovo blocco citazione, ottiene un testo di default che può sostituire. Non è obbligatorio popolare la fonte (un esempio potrebbe essre il seguente: se l’autore intende rafforzare un concetto che ha espresso nel testo, sta di fatto citando sé stesso – non c’è dunque bisogno di citarsi come fonte).

Valorizzazioni visive del blocco citazione includono:

• posizionamento a destro o a sinistra, tramite la scelta dello stile “Flottante a dx” o “flottante a sx”;
• l’utilizzo del corsivo, che nel blocco citazione (formattato tutto in corsivo) ha l’effetto opposto, rimuovendo lo stile italic;
• si sconsiglia fortemente l’uso del grassetto all’interno di un blocco che è così fortemente caratterizzato; appesantisce oltremodo senza aggiungere valore visivo.

Il posizionamento geografico di un blocco citazione deve fare i conti con l’estensione del testo e la prossimità ad altri elementi dello stesso tipo. È sconsigliato concentrare in poche righe più blocchi citazione, mentre è consigliato aggiungerne in caso di testi molto lunghi, proprio per la funzione di movimentazione cui si faceva riferimento in questo sezione del manuale/della guida di stile.

Utilizzo delle immagini

Questa sezione del manuale/della guida di stile è dedicata alla gestione delle immagini e ai blocchi a esse correlati. si comincia da una piccola “anomalia”, ovvero dal blocco cover (copertina), che vedete qui sopra. Il blocco presentato qui sopra consente la valorizzazione di altre specifiche, come il colore di sovrapposizione e quello del testo (se si intende visualizzare del testo sovraimpresso all’immagine di sfondo).

È inoltre possibile utilizzare specifiche cone l’effetto parallasse (da valutare e testare esaustivamente), e/o la ripetizione a mo’ di tessere di mosaico (altamente sconsigliata). sui blocchi Cover/copertina, è altamente sconsigliato valorizzare “espandi al clic” (effetto lightbox) relativamente all’immagine.

Inoltre, le immagini possono essere allineate a destra del testo che le precede/segue, o a sinistra. È consigliabile gestire le immagini che verranno circondate dal testo specificandone una grandezza fissa (esprimendo uno dei parametri, in questo caso la larghezza). In questo modo, si evitano comportamenti indesiderati.

In apertura di questo articolo, l’utente/autore di quinte parallele avrà potuto vedere la stessa immagine impaginata a destra e a sinistra; è inoltre possibile allineare l’immagine al centro, conferire l’attributo di larghezza ampia e persino di larghezza piena.

Seguono esempi di allineamento centrale e di allineamento non valorizzato (ovvero, mancanza della specifica di allineamento)

Immagini senza specifica di allineamento: forse meglio non usarle…

Larghezza ampia e perché/quando usarla

Larghezza piena e altre cose da sapere sulle immagini

Aggiungere una immagine a larghezza piena equivale a estendere i margini destro e sinistro dell’immagine facendoli coincidere con la piena estensione della finestra del browser.

Entrambi queste modalità possono essere molto efficaci, ma è necessario utilizzarle con parsimonia. si consiglia di evitare tout-court l’utilizzo della didascalia (disarmonica quando estesa ai margini) e di disattivare l’opzione “espandi al clic”; quest’ultima, infatti, dà luogo a risultati inattesi se accoppiata all’allineamento “larghezza piena”.

Galleria delle immagini: una modalità per aumentare l’impatto visivo dei contenuti

Le gallerie sono blocchi replicabili (è possibile inserirne più d’una, come già si accennava sopra). Si consiglia di impostarle con allineamento a larghezza piena. Per richiamare la composizione del blocco BP gallery, è sufficiente digitare /BP subito dopo l’aggiunta del nuovo blocco.

Per massimizzare la gradevolezza dell’effetto mosaico tipico di questa galleria, si consiglia di alternare immagini landscape (a sviluppo orizzontale o addirittura panoramiche) con altre portrait (a sviluppo verticale e/o quadrate); infatti, la galleria dispone il carosello battezzando uguale ingombro verticale (stessa altezza) per ciascuna immagine, e poi riorganizza lo spazio disponibile di conseguenza. Quanto più è movimentato questo contesto, tanto migliore sarà la riuscita.

il blocco BP gallery, progettato ad hoc e riadattato alla veste editoriale del nuovo Quinte Parallele, consente la riorganizzazione delle immagini selezionate attraverso drag & drop e altre prassi estremamente agevoli per l’utente. Basta un po’ di pratica e si acquisisce subito una competenza sufficiente a produrre layout di grande qualità senza rinunciare a un codice organizzato, conciso e semanticamente valido (che non piace solo a noi programmatori, ma anche a Google).

BP gallery (galleria di immagini) a larghezza piena

BP gallery (galleria di immagini) senza valorizzazione dell’allineamento

Elementi di pagina avanzati e blocchi speciali

Navigando il nuovo Quinte Parallele, l’utente/l’autore/il redattore avrà notato alcune prassi che regolano gli archivi. Per ‘archivi’ si intendono tutte quelle strutture di carattere plurale che raccolgono i contenuti – questi, considerati uno per uno, sono singolari – nel caso del nostro magazine online, le tassonomie che regolano gli archivi sono le categorie.

Queste ultime sono, allo stato attuale, categorie principali (dette genitori) e sottocategorie (figlie). Potranno ulteriormente ramificarsi con sotto-sottocategorizzazioni; il sistema è robusto a questa crescita potenziale.

Per rendersi conto di questa tassonomia, consiglio una rapida visita nelle sezioni Compositori e Generi, che condividono una struttura comune, visitando anche le categorie figlie (o alcune di esse).

Uso dei tab per gerarchizzare il contenuto libero

Possono verificarsi anche casi in cui il redattore voglia dividere il contenuto in blocchi replicabili che gerarchizzino ulteriormente anche il contenuto libero: è il caso dei Tab, che andremo a dimostrare di seguito.