Ci sono due cose che puoi aggiungere a qualsiasi sito per aumentare i lettori: drop cap e colpi di eroi. Questi non sono nulla di nuovo, e non sono affatto "segreti". Ma molti designer non si rendono conto che sono usati per qualcosa di più che solo per ragioni estetiche. Oggi spiegherò il motivo per cui lavorano e vi mostrerò come implementarli al meglio.
Poco prima di immergermi, una parola di avvertimento. L'uso di questi elementi lo farà aumentare i tassi di lettori. Cioè, più persone leggeranno la tua copia. Ma se la tua copia è scadente, lo farai anche con i capolettera e gli eroi ridurre i tassi di risposta. Quindi è necessario disporre di una copia efficace per utilizzare efficacemente questi elementi. Altrimenti, avrai effettivamente meno conversioni. Puoi dare un'occhiata al mio precedente articolo qui a Design Shack per una guida rapida per individuare e scrivere copie persuasive.
Drop Caps
Ogni designer ha familiarità con personaggi superbi e di grandi dimensioni che danno inizio a un blocco di testo. Chiamate anche iniziali, i capolettera hanno origine nell'arte insulare dell'ottavo secolo delle isole britanniche. Sembrano essere stati interamente decorativi per cominciare, e si sono diffusi nel Rinascimento e nell'uso moderno perché? bene, sembrano belli.
A quanto pare, però, sono più che semplici alla vista. Aumentano anche i lettori, predando un bisogno umano fondamentale: il bisogno di completezza. In poche parole, le persone non possono sopportare di lasciare qualcosa a metà strada. Devono finirlo. Quando stai leggendo un libro prima di andare a letto e pensi "lo metterò alla fine della pagina", non lo farai mai fareperché la pagina finisce sempre a metà di una frase. Devi girarti per finirlo, vero?
I capolettera funzionano allo stesso modo. Perché si distinguono, e dato che sono il botto nel tuo percorso naturale su una pagina, sono quasi impossibili non leggere. Hai solo bisogno di una minima occhiata per prendere una singola lettera. Ma una volta che l'hai preso, il tuo bisogno di completezza richiede almeno di leggere il resto della parola. E una volta che hai letto la parola, lo stesso bisogno ti fa andare alla fine della frase. Con una buona linea di apertura, questo può essere tutto ciò che serve per poi leggere il paragrafo. E così via.
Alcune migliori pratiche per i capolettera
Keep Them Reasonably Small
Ovviamente puoi creare un drop cap enorme quanto vuoi. Ma questo è controproducente. Una volta che superano le tre righe, le iniziali iniziano a "staccarsi" dal resto del testo e rimangono isolate, il che sconfigge il loro scopo. Inoltre, i primi paragrafi possono essere piuttosto brevi. Quindi, se applichi dinamicamente un capolettera molto grande all'inizio di ogni pagina usando i CSS, potrebbe occupare più spazio verticale del paragrafo a cui è collegato. Che sembra stupido.
Consentitemi anche di notare qui che volete essere sicuri che la vostra misura (larghezza della linea) non sia troppo grande, altrimenti continuerete a riscontrare problemi con questo. Più di 80 caratteri per riga riducono la leggibilità, quindi se hai intenzione di mettere i capolettera, probabilmente vorrai mantenere la tua misura piacevole e snella e renderla utile. Io uso maxwidth: 75ex; per tutti i miei wrapper di contenuti.
Usa un colore forte
È anche consigliabile impostare i capolettera in un colore accattivante, piuttosto che in grigio scuro o nero come il resto del testo (anche in questo caso, presumo che si stia utilizzando il design più leggibile possibile: il testo invertito riduce i lettori. ) L'arancione o il rosso sono naturalmente i migliori, essendo i colori più provocanti, ma qualsiasi colore che il tuo disegno consente probabilmente funzionerà meglio del semplice grigio o nero.
Colpi di eroi
Un colpo di eroe è una fotografia di ritratto dell'autore, posta accanto al paragrafo di apertura. Può risaltare dal paragrafo a sinistra o a destra, oppure fluttuare in linea come un capolettera.
Perché funziona? Due ragioni:
- I volti attirano la nostra attenzione come pazzi. Di tutte le forme e gli schemi del mondo, sono quelli che sono i più cablati da riconoscere e fissare. Perché pensi che la Vergine Maria appaia a così tante persone nei loro cereali?
- Ci fidiamo molto delle persone quando sentiamo di conoscerle. Se possiamo vedere come appare l'autore di un pezzo, iniziamo a formare una relazione più forte con lui. Questo è utile non solo per i lettori, ma anche per le conversioni. La connessione che sentiamo con l'autore accresce la nostra fiducia in lui, che aumenta il valore percepito di ciò che sta dicendo, e il valore percepito è ciò che spinge i potenziali clienti a fare clic sugli inviti all'azione.
Alcune buone pratiche per gli eroi
Ricorda le tue didascalie
Sempre sempre usa una didascalia. I sottotitoli vengono letti il 200% in più rispetto alla copia del corpo, quindi vuoi sfruttarli al meglio. Oltre a fornire il nome completo dell'autore e le credenziali, è consigliabile includere un importante punto di vendita: riassumere un vantaggio chiave, garanzia, premio o simili.
Abbina la voce copia
Naturalmente, ha senso solo usare un colpo di eroe quando la copia è scritta come da una singola persona. Per i freelance, i colpi di eroi sono quindi eccellenti, molti dei migliori copywriter li usano. (Contrario violentemente questa regola sul mio sito, a causa del mio misterioso personaggio di Information Highwayman.) Per le grandi aziende, però, spesso non sono appropriate in ogni pagina.
Non travolgere il tuo lettore
Ricorda che gli eroi tirano veramente difficile. Ciò significa che saranno in concorrenza con altri elementi nella pagina, compresi i capolettera. Se devi scegliere tra l'uno o l'altro, un tiro all'eroe è probabilmente l'opzione migliore (split test per essere sicuro, ovviamente, dato che il tuo chilometraggio può variare).Se stai usando solo il colpo dell'eroe, posizionalo a sinistra per supportare, piuttosto che rompere, il naturale stato di osservazione del lettore.
Utilizzare solo un'immagine di alta qualità
È meglio non usare alcuna immagine piuttosto che usare uno schifoso. Se non hai una buona immagine, non usare affatto un colpo di eroe. Ricorda, lo scopo è incoraggiare nel lettore il senso di una relazione con l'autore, per rafforzare la fiducia. Una foto con denti snodati ridimensionata da 640? 480 fino a 50? 38 miniature e poi ridimensionata a 120? 90 shot eroe, quindi salvata come JPEG con una qualità del 40%? non così buono. Né, in generale, è una foto dell'autore dall'aspetto non rasato, spettinato, ubriaco, lapidato o comunque dubbioso. Ricorda che lo stile della foto può o contribuire a, o sminuire, la credibilità percepita della persona che raffigura.
Questo significa anche che dovresti evitare di usare un'immagine che si scontrerà con il tuo design. Nell'esempio qui sotto, vedrai che utilizzo un eroe stilizzato per abbinarlo al capolettera.
Esempi con codice
Ti darò alcuni suggerimenti di seguito per la codifica di un capolettera e di un colpo di eroe. Sentiti libero di fare il chip in seguito e criticare i miei metodi. Sono ciò che ho trovato che funziona meglio, ma c'è sempre più di un modo per scuoiare un gatto.
Creare un capolettera
Il tempo era che i capolettera dovevano essere hackerati insieme alle celle della tabella. Per fortuna, la loro creazione è molto più semplice e più elegante di questi tempi. A seconda di come si desidera applicare il capolettera, è necessario decidere se utilizzare una classe, selettori CSS o entrambi.
Se sei felice di applicare un capolettera alla prima lettera di ogni pagina, puoi semplicemente utilizzare i selettori. Ad esempio, diciamo che il primo paragrafo segue sempre un'intestazione di primo livello nel tuo markup. In tal caso, puoi utilizzare il selettore fratello adiacente CSS in combinazione con prima lettera pseudo-classe:
È bello e facile, e funziona in qualsiasi browser degno di menzione (e alcuni che non lo sono). Ma le probabilità sono che il tuo markup non sia sempre così elementare. Ad esempio, cosa succede se in alcune pagine utilizzi sia un'intestazione di primo che di secondo livello? Di nuovo, questo è facilmente risolvibile con il selettore fratello adiacente:
Oppure, se utilizzi HTML5 e inserisci i tuoi titoli in gruppi:
Personalmente, voglio un controllo più granulare di questo. Oltre ad avere un capolettera all'inizio di ogni pagina, a volte voglio posizionarne uno manualmente (dopo un'interruzione di sezione, forse). In casi del genere, uso una classe.
Ora, ho visto un sacco di persone che usano campata elementi per creare cappucci di protezione: avvolgi la lettera in a con la classe giusta in allegato, e via. Ho sempre considerato questo piuttosto inelegante, ma se hai qualche tipo di limitazione con il tuo CMS che rende problematica la mia soluzione, provaci. Preferisco semplicemente collegare una classe a un paragrafo. Ecco il CSS:
Io non uso p.drop-cap: first-letter {} perché mi piace mantenere aperte le mie opzioni. Un giorno potrei voler mettere un capolettera su un blockquote, per esempio. Ad ogni modo, l'HTML di accompagnamento è semplice:
Ok, così tanto per attivare il capolettera. Ma per quanto riguarda lo styling vero? Ci sono due avvertimenti di lil qui.
Scegli un font adatto
Devi ricordare che diversi tipi di carattere hanno diversi stili di maiuscole. Generalmente, una lettera maiuscola dovrebbe essere alta circa 1 em. Ma alcuni caratteri hanno? idiosincrasie. A volte troverai che una "A" occupa molto più spazio verticale di una "H", per esempio. Oppure una "J" spingerà in basso sotto la linea di base. Ogni sorta di piccoli capricci come questo può rendere estremamente difficile ottenere un capolettera di bell'aspetto. Ti suggerisco di fare l'opposto di quello che ho fatto quando ho creato il mio sito web e di trovare un font con maiuscole uniformi e coerenti da utilizzare per i capolettera. Negli esempi seguenti, userò League Gothic per il capolettera e Aller Light per il display.
Altezza della linea
I browser basati su Gecko non sembrano interessare l'altezza della linea, ma quelli di WebKit lo fanno. Se si ottiene un'altezza di linea errata, non si noterà in Firefox, ma il capolettera verrà impostato nella posizione verticale errata in Chrome e Safari.
Quindi, come fai a sapere quale altezza della linea (e dimensione del carattere) usare? Puoi ottenere un buon intervallo di partenza prendendo il numero di linee di paragrafo che vuoi coprire con il capolettera e moltiplicandolo per l'altezza della linea del paragrafo. Nell'esempio seguente sto usando un'altezza della linea di 24px e il capolettera copre tre righe, quindi inizio con una dimensione del font di 24? 3 = 72px, imposta l'altezza della linea sullo stesso e vedo come appare.
Nota che in realtà non voglio occuparmi di 72px di spazio verticale, perché il capolettera dovrebbe stare più o meno a filo con la linea del carattere del paragrafo, non con la parte superiore della linea. Ma la maggior parte dei font usa meno spazio verticale per un em di quanto non consenta la dimensione del font; quindi a 72px, potremmo ottenere solo 65px in altezza del glifo.
Ora per il vero CSS. Ti darò questo in formato a riga singola mentre lo creo e poi ti fornirò il codice finale in un formato più facile da leggere alla fine. Il codice per il paragrafo è piuttosto semplice:
E trasformeremo il capolettera in un elemento a livello di blocco, quindi lo sposteremo a sinistra del paragrafo:
Che viene fuori in questo modo:
C'era una volta un piccolo capolettera chiamato "O". Era un ragazzo generalmente decente senza arie, ma nei suoi momenti vanitosi gli piaceva pensare di essere come un rimorchiatore, trascinando i suoi lettori senza paura in un vasto mare di testo altrimenti indifferenziato. (Il suo stilista aveva dimenticato di comporre il suo contenuto con altri elementi scansionabili come paragrafi, elenchi e sottotitoli. Una storia molto triste.)
Non male, ma il glifo occupa meno spazio verticale di quanto dovrebbe. Con una dimensione del font di 72 px, la "O" di Gothic League è alta solo 55 pixel. E ha bisogno anche di un po 'di spazio per respirare; al momento è pieno zeppo di copie.
Potresti aver notato che Firefox posiziona in modo fastidioso il glifo sopra la media del paragrafo, mentre Chrome o Safari lo posizionano correttamente. Questo perché hanno idee diverse su dove si trova la parte superiore del paragrafo. Dovremo aggiungere un margine superiore in modo che Firefox posizioni correttamente il glifo; il che significa ridurre l'altezza della linea di conseguenza per Chrome. Con un po 'di sperimentazione, ho trovato quanto segue per funzionare in questa istanza, ma dovrai modificare il tuo codice a seconda dei caratteri, delle dimensioni dei caratteri e delle altezze delle linee che stai utilizzando:
Ecco come appare:
C'era una volta un piccolo capolettera chiamato "O". Era un ragazzo generalmente decente senza arie, ma nei suoi momenti vanitosi gli piaceva pensare di essere come un rimorchiatore, trascinando i suoi lettori senza paura in un vasto mare di testo altrimenti indifferenziato. (Il suo stilista aveva dimenticato di comporre il suo contenuto con altri elementi scansionabili come paragrafi, elenchi e sottotitoli. Una storia molto triste.)
Consiglio vivamente di provare anche diverse lettere. "M" e "A" spesso rivelano lievi problemi di posizionamento verticale, perché la loro altezza del cappuccio è solitamente maggiore di altre lettere per compensare l'illusione ottica di mancanza creata dai loro picchi. Controllate anche per vedere come appare "J", poiché a volte ha un discensore, anche in forma maiuscola. Infine, se il tuo font ha figure di vecchio stile, buttalo fuori e trovane uno con i numeri di fodera. Ecco a cosa servono!
Ok, aggiungiamo un colpo di eroe!
Creare un colpo di eroe
Ho detto prima che gli eroi e i capolettera possono competere per l'attenzione. In questo caso, cercherò di usarlo a mio vantaggio. Userò un colpo di eroe stilizzato che integra il capolettera e lo inserirò strettamente nel primo paragrafo. Poiché siamo cablati per selezionare e analizzare i volti sopra praticamente qualsiasi altra cosa, gli occhi dei lettori saranno attratti prima dall'eroe. Quando leggono la didascalia, scopriranno perché dovrebbero leggere la copia? e poi il capolettera va al lavoro, guidando gli occhi nel posto giusto.
Avvolgere un colpo di eroe
Potrebbe essere allettante creare un colpo di eroe semplicemente lanciando un D Bnonn Tennant, copywriter di Internet e esperto di direct marketing, su come aumentare i tassi di conversione spingendo i lettori della tua copia. La mia preferenza personale è posizionare l'eroe girato a destra, con un capolettera che lo integri a sinistra. Tuttavia, come sempre, l'ultima parola a questo riguardo è il test. Accordi diversi funzionano per un pubblico diverso e diversi design. Potresti scoprire di avere lettori migliori con solo un colpo di eroe a sinistra e nessun capolettera. O un capolettera e nessun colpo di eroe. Si noti inoltre che qualsiasi colpo di eroe di dimensioni decenti, con qualsiasi didascalia utile, si estenderà su almeno due paragrafi, anche quando il primo paragrafo è relativamente lungo. Assicurati di tenerlo nel tuo progetto. Questo sembra abbastanza buono, ma ci sono alcuni problemi. In primo luogo, l'immagine è posizionata un po 'in basso, perché c'è qualche spazio invisibile nell'immagine. In secondo luogo, la didascalia sembra un po 'distaccata dal tiro dell'eroe. In terzo luogo, poiché l'immagine è alta 100 px, che non è un multiplo dell'altezza della linea di 24 pixel che sto usando, la didascalia è leggermente fuori dalla griglia verticale. Con alcuni ritocchi, ho trovato che a 
margin-top di -15px per .hero-shote -11px per .heroshot p, sistemare le cose semplicemente (Se questi numeri sembrano sbagliati, probabilmente è perché sono sempre un po 'approssimativi: mettere tutto il testo in fila sulla stessa griglia verticale è praticamente impossibile). Controlla:
D Bnonn Tennant, copywriter di Internet e esperto di direct marketing, su come aumentare i tassi di conversione spingendo i lettori della tua copia.
La mia preferenza personale è posizionare l'eroe girato a destra, con un capolettera che lo integri a sinistra. Tuttavia, come sempre, l'ultima parola a questo riguardo è il test. Accordi diversi funzionano per un pubblico diverso e diversi design. Potresti scoprire di avere lettori migliori con solo un colpo di eroe a sinistra e nessun capolettera. O un capolettera e nessun colpo di eroe.
Si noti inoltre che qualsiasi colpo di eroe di dimensioni decenti, con qualsiasi didascalia utile, si estenderà su almeno due paragrafi, anche quando il primo paragrafo è relativamente lungo. Assicurati di tenerlo nel tuo progetto.
Il CSS finale
Ecco il codice CSS finale, come promesso (sei più che benvenuto a copiarlo direttamente):
Conclusione
E questo è tutto, siamo bravi con un berretto elegante e un colpo di eroe da abbinare. Sentiti libero di offrire i tuoi suggerimenti o critiche o di porre domande di follow-up nei commenti.