Tipografía HTML dentro del correo electrónico
Tipografía HTML dentro del correo electrónico
Abrir un correo electrónico HTML en Microsoft Outlook y se dará cuenta de que las imágenes brillan por su ausencia. En cambio, están reemplazados con un mensaje de seguridad larga y oscura.
Esta peculiaridad bloqueo imagen no es único en Outlook.
Hay un número de otros clientes de correo electrónico y correo web, como Lotus Notes 8.5 y Yahoo Mail que no se muestran estas imágenes ‘hasta que el abonado de forma manual de los mensajes de correo electrónico peticiones de ellos.
Incluso aquellos que sí lo hacen, como Mail de Apple en OS X y el correo en IOS, dependen de Wi-Fi o una conexión de datos lo suficientemente fuerte como para mostrar imágenes en movimiento.
Imágenes, por lo tanto, simplemente no se puede confiar en ellos para comunicar el mensaje de un correo electrónico.
Como tal, yo diría que el correo electrónico es dependiente de la tipografía HTML. Los consejos en este tutorial – tomados de mi libro, un tipo de E-mail – ayudarán a implementar robusta tipografía HTML en el correo electrónico, y superar algunas de las peculiaridades e idiosincrasia de los clientes de correo electrónico y correo web.
01. Uso <table>, <tr> y <td>
Construir mensajes de correo electrónico HTML usando el elemento <table> ,<tr> y <td> elementos. Estos son los componentes básicos de correo electrónico HTML, y le ayudará a la hora de trabajar con la tipografía – la celda de tabla (<td> ), en particular.
02. Use los píxeles al estilo de fuente, tamaño
La unidad de píxel tiene un buen soporte a través de los clientes de correo electrónico y correo web, tanto en tamaño de fuente y line-height :
font-size : 14 px ; line-height : 21 px ;03. Aplicar en línea CSS
Aplicar CSS en línea para asegurar que todo el estilo esencial hace que, incluso si la CSS en el <head> es despojado a cabo – como lo será en Gmail.
Los títulos y los párrafos
Etiquetas semánticas ( <h1> , <h2> y <h3> ) se puede utilizar para los títulos de correo electrónico. Le recomiendo que use un <span> si están en una sola línea, o un <td> dentro de su propia mesa si están en varias líneas, aplicando el estilo partida dentro de la etiqueta de apertura.
Esto le ayudará a lograr la representación sin problemas a través de los clientes de correo electrónico y correo web.
En este ejemplo, el CSS mso-line-height-regla: exactamente también se ha aplicado, para mantener la línea de altura en Microsoft Outlook.
<td class = "h1" style = "font-family: Arial, sans-serif; font-size: 20px; line-height: 25px; color: # ff0000; mso-line-height-regla: exactamente;" > múltiple La partida de línea </ td>En los tamaños de texto mayor, es necesario aplicar suficiente line-height en proporción al tamaño de fuente , o pueden ser recortadas en Microsoft Outlook.
Una vez más, la etiqueta semántica <p> se puede utilizar para los párrafos, aunque se tendrá que aplicar CSS a todos y cada párrafo, dentro de la abertura<p> etiqueta.
Por lo tanto, existe una clara ventaja para el método alternativo: dejando párrafos ‘suelta’ en una celda de la tabla, y aplicando el estilo del texto de párrafo dentro de la abertura <td> etiqueta.
<td style = "font-family: Arial, sans-serif; font-size: 14px; line-height: 21px; color: # 666666;" > párrafo de texto . </ td>Cualquier estilo aplicado a la <td> se convierte en el valor predeterminado para su contenido. Puede añadir tantos párrafos de texto como desee dentro de la celda de la tabla, y lo único que necesita el estilo de una vez.
Con este enfoque lo hace sacrificar el espacio entre párrafos que se agrega automáticamente cuando se utiliza el <p> etiqueta.
Esto se puede solucionar mediante la inserción de dos <br> etiquetas después de cada párrafo de texto.Sin embargo, esta no es la solución más elegante – sobre todo cuando se necesita más control sobre la separación entre los títulos, subtítulos y párrafos.Afortunadamente, hay un truco para ayudar con esto:
<div style = "display: block; altura: 10px; font-size: 10px; line-height: 10px;" > </ div>Aquí tenemos un espacio de no separación envuelto en un par de <div>etiquetas, combinada con la altura , tamaño de fuente y la línea de altura a valores constantes, perteneciente a la cantidad de espacio (en píxeles) que se requieren – en este caso 10px.
Para crear un espacio párrafo grande o más pequeño, sólo tiene que cambiar los valores en consecuencia.
Los enlaces de texto
En los enlaces de texto, el color de y text-decoration normalmente tienen que ser de estilo dentro de la abertura <a> etiqueta.
<a href= "http://www.beyondtheenvelope.co.uk" target= "_blank" style= "color:#ff0000; text-decoration:underline;"> texto del enlace </a>04. Aplicar los colores de fondo
Cuando un mensaje se abre en un cliente que no muestra las imágenes de forma automática, un color de fondo, se aplica a cada uno de los <table> s que contiene imágenes, puede ayudar el sentido de abonado maquillaje de la estructura del correo electrónico, y animarles a ‘ la solicitud de las imágenes. El atributo HTML bgcolor es el método más fiable de aplicar color a un <table> .Aquí, los colores se especifican utilizando hexadecimal de seis dígitos, en lugar de taquigrafía.
<table bgcolor = "# FF0000" >
<Td>
// // Imagen
</ Td>
</ Table>Una vez que haya aplicado los colores de fondo, estilo del alt texto de la imagen en un tamaño más grande y contraste de color, por lo que se puede leer fácilmente.
<img src = "http://www.beyondtheenvelope.co.uk/Image.png" width = "600px" height = "350px" alt = "Descripción de la imagen" style = "font-family: Courier, espacio sencillo; Font- size: 20px; line-height: 25px; de color: #ffffff; text-decoration: none; display: block; border: 0; " >05. Fijar los enlaces azules
Una peculiaridad de correo de iOS es que hace que ciertos contenidos como “enlaces azules ‘y se aplica funcionalidad a los que se supone que será útil para el abonado.
Estos pueden ser los números de teléfono (que permite al abonado para llamar al número o añadirlo a sus contactos), fechas (que permite al abonado para añadirlo a su calendario), o direcciones (que permite que el abonado pueda localizar la dirección en mapas).
A pesar de sus mejores intenciones, iOS Correo veces comete errores, lo que resulta en enlaces azules se aplican a contenidos inapropiados.
Puede ser, por ejemplo, confundir un número de pedido para un número de teléfono y permita que el suscriptor lo llaman (o al menos intentar)!
Vale la pena señalar que este comportamiento no se manifestará en un navegador, pero sólo in situ; en IOS en un iPhone o un iPad, por ejemplo.
Es necesario, por tanto, para enviar una prueba de su correo electrónico para estos dos dispositivos, para identificar los enlaces azules.
Cambiar el estilo del enlace
Afortunadamente, el IOS Mail es capaz de manejar HTML y CSS de una manera convencional, la aplicación de hojas de estilo CSS a partir internas dentro de lasección <head> de un documento HTML de correo electrónico a los elementos marcados con clases correspondientes en su <body> .
Puede utilizar estas técnicas de desarrollo web convencionales para fijar los enlaces azules.
En primer lugar crear un nuevo estilo para el enlace – una que es en consonancia con la paleta de colores de su correo electrónico – y asignar un nombre de clase para él. ‘Ocultar’ el enlace, el estilo con el mismo color aplicado al párrafo de texto que lo rodea, junto con text-decoration: none .
Asegúrese de aplicar la ! Importante declaración para anular el estilo existente.
<style type = "text / css">
.appleBlackLink un { el color : # 666666 ! important ; text-decoration : ninguno ! important ; }
</ style>Una vez que haya creado el estilo y le asigna un nombre de clase para que, aplicarlo al texto afectado, envolviéndolo en un par de <span> etiquetas e insertar el nombre de la clase que ha creado dentro de la abertura <span> .Asegúrese de incluir palabras asociadas, tales como ‘desde’ y ‘hasta’ dentro de la<span> , como los enlaces azules se pueden aplicar también a aquellos.
<span class = "appleBlackLink" > del 1 de enero de </ span>Desactivar la funcionalidad del enlace
Mientras que el enlace ha sido reformado, puede permanecer activo, por lo que es posible para el abonado para activar accidentalmente el enlace.
Es necesario desactivar su funcionamiento para evitar esto.
Esto se logra mediante la adición de un poco de estilo adicional a la clase que ha creado en el <head> .
.appleBlackLink a { color : #666666 !important ; text-decoration : none !important ; pointer-events : none !important ; }Los CSS puntero-eventos: Ninguna importantes; deshabilita el enlace sin escrúpulos.
Resumiendo
Así que ahí lo tienen; cinco consejos para ayudarle en su camino a la implementación de la tipografía HTML en el correo electrónico. Por último, para ver cómo los clientes de correo electrónico y correo web hacen que su tipografía, asegúrese de probar el uso de su propio escritorio y los clientes de correo electrónico móvil, y una herramienta, como tornasol .
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros