Hay dos cosas que puede agregar a casi cualquier sitio para aumentar el número de lectores: casquillos y disparos de héroe. Estos no son nada nuevo, y de ninguna manera son "secretos". Pero muchos diseñadores no se dan cuenta de que se usan por algo más que por razones estéticas. Hoy voy a explicar por qué funcionan y les mostraré cómo implementarlos mejor.
Justo antes de sumergirme, una advertencia. Utilizando estos elementos aumentar las tasas de audiencia. Es decir, más personas leerán tu copia. Pero si tu copia es mala, el uso de gorras y disparos de héroe también disminuir las tasas de respuesta. Entonces necesitas tener una copia fuerte para usar estos elementos de manera efectiva. De lo contrario, obtendrás menos conversiones. Puede consultar mi artículo anterior aquí en Design Shack para obtener una guía de inicio rápido para detectar y escribir copias persuasivas.
Drop Caps
Todos los diseñadores están familiarizados con los personajes elegantes y de gran tamaño que arreglan el comienzo de un bloque de texto. También llamadas iniciales, las gorras se originaron en el arte insular del siglo VIII de las Islas Británicas. Para empezar, parecen haber sido completamente decorativos, y se mantuvieron en el Renacimiento y en el uso moderno porque? bueno, se ven lindas
Sin embargo, resulta que son más que simples a la vista. También aumentan el número de lectores, aprovechando una necesidad humana básica: la necesidad de estar completos. En pocas palabras, la gente no puede soportar dejar algo a la mitad. Tienen que terminarlo. Cuando estás leyendo un libro antes de irte a la cama y piensas: "Lo pondré al final de la página", en realidad nunca hacer-porque la página siempre termina a la mitad de una oración. Tienes que dar la vuelta para terminarlo, ¿no?
Las gorras de gota funcionan de la misma manera. Porque se destacan, y porque están pegados a tu ojo natural en una página, son casi imposibles. no leer. Solo necesita una mirada simple para leer una sola letra. Pero una vez que lo ha asimilado, su necesidad de integridad exige que al menos lea el resto de la palabra. Y una vez que has leído la palabra, esa misma necesidad te mantiene al final de la oración. Con una buena línea de apertura, esto puede ser todo lo que necesitas para que luego desees leer el párrafo. Y así.
Algunas mejores prácticas para soltar casquillos
Mantenlos razonablemente pequeños
Puedes, por supuesto, hacer un gorro tan enorme como quieras. Pero esto es contraproducente. Una vez que tienen más de tres líneas de altura, las iniciales comienzan a "separarse" del resto del texto y son independientes, lo que anula su propósito. Además, los primeros párrafos pueden ser bastante cortos. Por lo tanto, si está aplicando dinámicamente un límite máximo muy grande al inicio de cada página utilizando CSS, podría ocupar más espacio vertical que el párrafo al que está adjunto. Lo que parece ridículo.
Déjeme también mencionar aquí que quiere asegurarse de que su medida (ancho de línea) no sea demasiado grande, ya que de lo contrario todavía tendrá problemas con esto. Más de 80 caracteres por línea reduce la legibilidad, por lo que si te tomas la molestia de colocar mayúsculas, probablemente querrás mantener tu medida agradable y magra para que valga la pena. yo suelo ancho máximo: 75ex; para todos mis contenidos envoltorios.
Usa un color fuerte
También es aconsejable colocar gorras en un color llamativo, en lugar de en gris oscuro o negro como el resto de su texto (nuevamente, supongo que está usando el diseño más legible posible; el texto invertido reduce el número de lectores. ) Los colores naranja o rojo son naturalmente mejores, ya que son los colores más provocativos, pero cualquier color que permita su diseño probablemente funcionará mejor que el gris liso o el negro.
Disparos de héroe
Una foto de héroe es una fotografía de retrato del autor, situada junto al párrafo inicial. Puede sobresalir del párrafo de la izquierda o la derecha, o flotar en línea como una gorra.
¿Por qué funciona? Dos razones:
- Los rostros atraen nuestra atención como locos. De todas las formas y patrones en el mundo, son los que estamos más programados para reconocer y fijar. ¿Por qué pensaste que la Virgen María se aparece a tanta gente en sus cereales?
- Confiamos en las personas mucho más cuando sentimos que las conocemos. Si podemos ver qué aspecto tiene el autor de una pieza, comenzamos a formar una relación más fuerte con él. Esto es bueno no solo para lectores, sino también para conversiones. La conexión que sentimos con el autor aumenta nuestra confianza en él, lo que aumenta el valor percibido de lo que está diciendo, y el valor percibido es lo que hace que los clientes potenciales hagan clic en las llamadas a la acción.
Algunas mejores prácticas para disparos de héroe
Recuerda tus subtítulos
Siempre siempre utilizar un título Los subtítulos se leen un 200% más que una copia del cuerpo, por lo que desea aprovecharlos al máximo. Además de proporcionar el nombre completo y las credenciales del autor, es aconsejable incluir un punto de venta importante: resumir un beneficio clave, garantía, prima o similar.
Emparejar la voz de copia
Naturalmente, solo tiene sentido usar un disparo de héroe cuando la copia se escribe como si fuera de una sola persona. Para los freelancers, las tomas de héroe son excelentes, por lo que la mayoría de los mejores redactores los usan. (Violar flagrantemente esta regla en mi propio sitio, debido a mi misteriosa persona como Information Highwayman). Sin embargo, para las grandes corporaciones, a menudo no son apropiadas en cada página.
No abrume a su lector
Recuerda que tiros de héroe tiran. De Verdad difícil. Esto significa que competirán con otros elementos en la página, incluyendo las mayúsculas. Si tiene que elegir entre usar uno u otro, probablemente la mejor opción sea una foto de héroe (prueba dividida para asegurarse, por supuesto, ya que su millaje puede variar).Si solo está utilizando el disparo de héroe, colóquelo a la izquierda para apoyar, en lugar de romper, la vía ocular natural del lector.
Utilice solo una imagen de alta calidad
Es mejor no usar ninguna imagen que usar una pésima. Si no tienes una buena imagen, no uses una foto de héroe. Recuerde, el propósito es fomentar en el lector el sentido de una relación con el autor para reforzar la confianza. ¿Una foto con los dientes enganchados se redimensionó de 640 a 480 a una miniatura de 50? 38 y luego se redujo a una imagen de héroe 120? no tan bien. Ninguna de las dos, en general, es una foto del autor que parece sin afeitar, despeinada, ebria, drogada o dudosa. Recuerde que el estilo de la foto puede contribuir o disminuir la credibilidad percibida de la persona que representa.
Esto también significa que debe evitar el uso de una imagen que choque con su diseño. En el ejemplo a continuación, verás que uso un disparo de héroe estilizado para coincidir con mi gorra.
Ejemplos con código
A continuación, te daré algunos consejos para codificar tanto una gorra de lanzamiento como un disparo de héroe. Siéntase libre de participar y criticar mis métodos. Es lo que he encontrado que funciona mejor, pero siempre hay más de una forma de despellejar a un gato.
Creando un Drop Cap
El tiempo era que las gorras tenían que ser hackeadas junto con celdas de mesa. Afortunadamente, crearlos es mucho más fácil y más elegante en estos días. Dependiendo de cómo desee que se aplique su límite, deberá decidir si desea utilizar una clase, los selectores de CSS o ambos.
Si está contento de que se aplique un límite a la primera letra de cada página, solo puede utilizar los selectores. Por ejemplo, digamos que el primer párrafo siempre sigue un encabezado de primer nivel en su marca. En ese caso, puede usar el selector de hermanos adyacentes CSS en combinación con el primera letra pseudo-clase:
Es agradable y fácil, y funciona en cualquier navegador que vale la pena mencionar (y algunos que no lo son). Pero lo más probable es que su marca no siempre sea tan básica. Por ejemplo, ¿qué sucede si en algunas páginas está utilizando un encabezado de primer y segundo nivel? De nuevo, esto se resuelve fácilmente con el selector de hermanos adyacentes:
O, si estás usando HTML5 y colocando tus encabezados en grupos:
Personalmente, quiero más control granular que esto. Además de tener un límite al principio de cada página, a veces quiero colocar una manualmente (después de un salto de sección, tal vez). En casos así, uso una clase.
Ahora, he visto a mucha gente usando lapso Elementos para crear mayúsculas, simplemente envolver la letra en una Con la clase correcta adjunta, y listo. Siempre he considerado esto como poco elegante, pero si tienes algún tipo de limitación con tu CMS que hace que mi solución sea problemática, hazlo. Prefiero adjuntar una clase a un párrafo. Aquí está el CSS:
Yo no uso p.drop-cap: primera letra {} Porque me gusta mantener mis opciones abiertas. Algún día me gustaría poner un límite de caída en un blockquote, por ejemplo. De todos modos, el HTML que acompaña es simple:
Está bien, tanto para activar la tapa de caída. Pero, ¿qué hay de estilizarlo? Hay dos pequeñas advertencias aquí.
Elija una fuente adecuada
Tienes que recordar que las diferentes fuentes tienen diferentes estilos de mayúsculas. En general, una letra mayúscula debe ser de aproximadamente 1 em. Pero algunos tipos de letra tienen? idiosincrasias A veces, encontrará que una "A" ocupa mucho más espacio vertical que una "H", por ejemplo. O una "J" empujará hacia abajo por debajo de la línea de base. Todo tipo de pequeños caprichos como este pueden hacer que lograr un buen gorro sea extremadamente difícil. Le sugiero que haga lo contrario de lo que hice cuando creé mi sitio web, y encuentre una fuente con mayúsculas uniformes para usar para sus mayúsculas. En los ejemplos a continuación, voy a usar League Gothic para la tapa, y Aller Light para la pantalla.
Altura de la línea
Los navegadores basados en Gecko no parecen preocuparse por la altura de la línea, pero sí lo hacen los WebKit. Si obtienes un error de altura de línea, no lo notarás en Firefox, pero la tapa de descarga se establecerá en la posición vertical incorrecta en Chrome y Safari.
Entonces, ¿cómo sabe qué altura de línea (y tamaño de fuente) debe usar? Puede obtener un buen rango de inicio tomando el número de líneas de párrafo que desea que cubra el límite inferior y multiplicándolo por la altura de la línea de su párrafo. En el siguiente ejemplo, estoy usando una altura de línea de 24 px, y el límite de caída cubre tres líneas, así que comienzo con un tamaño de fuente de 24? 3 = 72 px, establezco la altura de línea en la misma y veo cómo se ve.
Tenga en cuenta que en realidad no quiero ocupar un total de 72 píxeles de espacio vertical, ya que la tapa de caída debe quedar más o menos al mismo nivel que la línea del párrafo, no con la parte superior de la línea. Pero la mayoría de las fuentes utilizan mucho menos espacio vertical para un em que lo que permite el tamaño de fuente; así que a 72px, solo podríamos obtener 65px en altura de glifo.
Ahora para el CSS real. Te daré esto en formato de una sola línea a medida que lo construyo, y luego te daré el código final en un formato que sea más fácil de leer al final. El código para el párrafo es bastante básico:
Y vamos a hacer que la tapa se convierta en un elemento de nivel de bloque, y luego flotar a la izquierda del párrafo:
Que sale así:
Érase una vez, había una pequeña gorra llamada "O". En general, era un tipo decente, sin aires, pero en sus momentos vanos le gustaba pensar que era como un remolcador que arrastraba audazmente a sus lectores a un vasto mar de texto, por lo demás indiferenciado. (Su diseñador se había olvidado de componer su contenido con otros elementos escaneables como párrafos, listas y subtítulos. Una historia muy triste).
No está mal, pero el glifo ocupa menos espacio vertical del que debería. Con un tamaño de fuente de 72 píxeles, la "O" de League Gothic solo tiene 55 píxeles de alto. Y también necesita un poco de espacio para respirar; Es un poco abarrotado contra la copia en este momento.
Puede que hayas notado que Firefox coloca el glifo por encima de la línea media del párrafo, mientras que Chrome o Safari lo colocan correctamente al ras. Esto se debe a que tienen diferentes ideas sobre dónde está la parte superior del párrafo. Vamos a tener que agregar un margen superior para que Firefox posicione el glifo correctamente; lo que significa reducir la altura de la línea en consecuencia para Chrome. Con un poco de experimentación, encontré que lo siguiente funciona en esta instancia, pero tendrás que modificar tu propio código dependiendo de las fuentes, tamaños de fuente y alturas de línea que estés usando:
Así es como se ve:
Érase una vez, había una pequeña gorra llamada "O". En general, era un tipo decente, sin aires, pero en sus momentos vanos le gustaba pensar que era como un remolcador que arrastraba audazmente a sus lectores a un vasto mar de texto, por lo demás indiferenciado. (Su diseñador se había olvidado de componer su contenido con otros elementos escaneables como párrafos, listas y subtítulos. Una historia muy triste).
Realmente recomiendo probar diferentes letras también. "M" y "A" a menudo revelan problemas leves de posicionamiento vertical, debido a que su altura máxima suele ser mayor que otras letras para compensar la ilusión óptica de la falta de claridad creada por sus picos. También revise para ver cómo se ve "J", ya que a veces tiene un descendiente, incluso en forma de mayúsculas. Por último, si su fuente tiene figuras de estilo antiguo, simplemente tírela y busque una con números de línea. ¡Para eso están!
¡De acuerdo, vamos a añadir un tiro de héroe!
Creando un disparo de héroe
Dije antes que los disparos de héroe y las gorras de caída pueden competir por atención. En este caso, voy a intentar usar eso para mi ventaja. Usaré un disparo de héroe estilizado que complementa la tapa, y lo estableceré firmemente en el primer párrafo. Debido a que estamos programados para seleccionar y analizar las caras por encima de casi cualquier otra cosa, los ojos de los lectores se verán atraídos primero por el héroe asesinado. Cuando lean la leyenda, descubrirán por qué deberían leer la copia. y luego la gorra se pone a trabajar, guiando sus ojos al lugar correcto.
Envolviendo un disparo de héroe
Puede ser tentador crear un disparo de héroe simplemente lanzando una D Bnonn Tennant, redactor de Internet y experto en marketing directo, sobre cómo aumentar sus tasas de conversión al aumentar el número de lectores de su copia. Mi preferencia personal es colocar el tiro del héroe a la derecha, con un gorro complementario a la izquierda. Sin embargo, como siempre, la última palabra a este respecto es probar. Diferentes arreglos funcionan para diferentes públicos y diferentes diseños. Puede encontrar que obtiene una mejor cantidad de lectores con solo un disparo de héroe a la izquierda y sin límite. O una gorra y ningún héroe disparó. Tenga en cuenta también que cualquier disparo de héroe de tamaño decente, con cualquier título útil, se extenderá a lo largo de al menos dos párrafos, incluso cuando el primer párrafo sea relativamente largo. Asegúrese de permitir esto en su diseño. Esto se ve bastante bien, pero hay algunos problemas. En primer lugar, la imagen se coloca un poco baja, porque hay un espacio invisible en la imagen. En segundo lugar, la leyenda parece un poco separada del héroe disparado. Y en tercer lugar, debido a que la imagen es de 100 px de alto, que no es un múltiplo de la altura de línea de 24 px que estoy usando, el título está ligeramente fuera de la cuadrícula vertical. Con algunos ajustes, encontré que un 
margen superior de -15px para .hero-shoty -11px para .heroshot p, prepara las cosas simplemente bien. (Si estos números parecen estar equivocados, probablemente sea porque son siempre algo aproximados; hacer que todo el texto se alinee en la misma cuadrícula vertical es casi imposible). Echale un vistazo:
D Bnonn Tennant, redactor de Internet y experto en marketing directo, sobre cómo aumentar sus tasas de conversión al aumentar el número de lectores de su copia.
Mi preferencia personal es colocar el tiro del héroe a la derecha, con un gorro complementario a la izquierda. Sin embargo, como siempre, la última palabra a este respecto es probar. Diferentes arreglos funcionan para diferentes públicos y diferentes diseños. Puede encontrar que obtiene una mejor cantidad de lectores con solo un disparo de héroe a la izquierda y sin límite. O una gorra y ningún héroe disparó.
Tenga en cuenta también que cualquier disparo de héroe de tamaño decente, con cualquier título útil, se extenderá a lo largo de al menos dos párrafos, incluso cuando el primer párrafo sea relativamente largo. Asegúrese de permitir esto en su diseño.
El CSS final
Aquí está el código CSS final, según lo prometido (eres más que bienvenido a copiarlo directamente):
Conclusión
Y eso es todo, estamos bien para ir con una elegante gorra y un héroe con disparo a juego. Siéntase libre de ofrecer sus propios consejos o críticas, o haga preguntas de seguimiento, en los comentarios.