La mejor manera de entender cualquier proceso consiste en llevarlo a cabo uno mismo, desde el principio hasta el final. Hoy vamos a hacer exactamente esto con el diseño de un email creando una sencilla plantilla de email HTML responsive desde cero.
Cuanto antes dejes de pelearte contra las peculiaridades del email, antes podrás usarlos en tu propio beneficio.” – Caity G. O'Connor
Populares plantillas de email HTML responsive disponibles en Envato Elements
Si estás buscando una solución profesional ya construida, hazte con una de las populares plantillas de email HTML de Envato Elements. Disponemos de cientos de opciones de plantillas de correo electrónico responsive todas incluidas en tu suscripción de Elements, con características fáciles de personalizar para ponerte en marcha.
La plantilla de email HTML responsive que vamos a crear
Aquí está la plantilla HTML de email responsive que estamos construyendo, siéntete libre de guardar el pen y de usarlo tú mismo. Ten en cuenta que cuando vemos esta plantilla a través de un navegador web, probablemente no nos toparemos con el tipo de problemas que sí encontraremos en los clientes de correo electrónico.
1. Empieza tu documento de plantilla de email HTML responsive
Para empezar, es importante mencionar de dónde obtuve algunos de los recursos.
- Los encantadores iconos 2D son de Justicon disponibles en Envato Elements
- Los iconos de redes sociales son de Metrize Icons
Ahora, tal y como vimos en el anterior tutorial, tendrás que empezar tu plantilla HTML para email con un tipo de documento HTML, y el lenguaje correcto para tus suscriptores. En este caso vamos a usar el tipo de documento HTML5, estableciendo nuestro idioma a inglés con <html lang="en">, e incluyendo también los namespaces de XML y de Microsoft Office (los fragmentos xmlns). Vamos a necesitarlos unas líneas más abajo, tal y como explicaré.
<!DOCTYPE html><html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="x-apple-disable-message-reformatting"> <title></title> <!--[if mso]> <noscript> <xml> <o:OfficeDocumentSettings> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript> <![endif]--> <style> table, td, div, h1, p {font-family: Arial, sans-serif;} table, td {border:2px solid #000000 !important;} </style></head></html>En el código de arriba hay unas cuantas cosas, pero es lo mínimo que necesitas para asegurarte que tu correo electrónico final se renderice perfectamente en cualquier sitio.
En primer lugar, tenemos algunas etiquetas meta para asegurarnos que la codificación del texto sea la adecuada, el escalado de la ventana gráfica en los distintos dispositivos móviles, y uno para evitar que Apple ajuste el tamaño de forma extraña en sus aplicaciones de correo electrónico.
Bajo la etiqueta <title></title> verás algo de código entre<!--[if mso]> y<![endif]-->. Al colocar el código dentro de esas dos etiquetas significa que solo Microsoft Outlook en Windows lo aplicará (mso= 'MicrosoftOutlook'). Y ahí, tenemos una pequeña cantidad de XML que asegurará que las imágenes PNG se muestren en el tamaño adecuado en Outlook en Windows. Los ajustes xmlns que ponemos en la etiqueta HTML aseguran que este código se va a interpretar adecuadamente.
Bajo esto, tenemos una etiqueta style con tan solo un par de reglas CSS. La primera establece la fuente para todos nuestros principales elementos, y esto es para beneficio del correo electrónico web de Gmail, el cual sobreescribirá nuestros ajustes de fuente a menos que incluyamos esto. Si al final más adelante cambias tus fuentes, asegúrate de hacer el cambio aquí también.
Por último, estamos incluyendotable, td {border:2px solid #000000 !important;} que dibujará un borde en cualquier cosa. Esto es simplemente para que podamos ver lo que estamos haciendo mientras construimos, y lo eliminaremos todo al final.
Sorteado esto, podemos empezar a construir el resto de la estructura.
2.Creación del cuerpo y la tabla principal
Primero, añadiremos una estructura general para nuestro email, empezando con una etiqueta <body>. Añade el siguiente código directamente bajo la etiqueta </head>:
<body style="margin:0;padding:0;"> <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;"> <tr> <td align="center" style="padding:0;"> Hello! </td> </tr> </table></body>
Puedes ver que los márgenes y los espacios de relleno (padding) de la etiqueta body están establecidos en cero para evitar cualquier espacio no deseado.
También hemos añadido una tabla con una anchura del 100%. Esto funciona realmente como una etiqueta body para nuestro email, ya que en ocasiones la etiqueta body es eliminada por los clientes de correo electrónico. Aplica cualquier color de fondo que desees al 'body' en esta etiqueta de tabla.
Todas nuestras tablas serán establecidas arole="presentation". Esto las hace más accesibles, ya que le indica a los lectores de pantalla que las traten como tablas visuales, no como tablas de datos.
Hemos establecidoborder-collapseacollapse, y tanto bordercomo border-spacinga cero para evitar cualquier espacio no deseado en la tabla.
Habrás notado que estamos usando<td align="center">, y si ya estás familiarizado con HTML te estarás preguntando por qué, si align es realmente ya una propiedad obsoleta. La usamos porque los clientes de correo electrónico varían mucho en cuanto a su soporte de CSS, y con frecuencia seguimos necesitando usar HTML obsoleto para asegurarnos de que todo se muestre adecuadamente en cualquier sitio. En esta instancia, lo hacemos porque Outlook para Windows no obedece al CSS margin:0 auto; para centrar las cosas.
Por último, asegúrate de que siempre estableces el espacio de relleno en las celdas de tus tablas a cero en los estilos en línea, por ejemplo,<td style="padding:0;">, de no hacerlo los clientes de email añadirán su propia cantidad de espacio de relleno. Cuando añadimos espacio de relleno nosotros mismos, podemos ajustar este valor, pero si no existe espacio de relleno aplicado a ninguno de los lados, debes establecerlo explícitamente a cero.
Una nota sobre el uso de las abreviaturas para especificar el espacio de relleno
Cuando uses el espacio de relleno CSS en las celdas de tablas, puedes escribirlo de forma segura de tres formas. O bien especificando un valor, por ejemplo, padding:20px lo cual aplicará 20 píxeles de espacio de relleno en cada lado de tu celda (arriba, a la derecha, abajo, y a la izquierda), o especificar el espacio de relleno en pares, por ejemplo,padding: 10px 20px, lo cual añadirá 10 píxeles de espacio tanto arriba como abajo, y 20 píxeles tanto a la izquierda como a la derecha. Si ninguno de estos son adecuados, deberías declarar cada lado, es decirpadding: 10px 10px 0 5px. En todos los casos debes establecer cada valor, incluso aunque algunos de ellos tengan un valor de cero. Además, especificar tres valores puede tener resultados impredecibles entre los distintos clientes de correo electrónico.
El espaciado de relleno funciona de forma confiable en las celdas de tabla en todos los clientes de correo electrónico, pero si estás teniendo problemas con él, no es necesario recurrir a GIF espaciadores. En un apuro puedes recurrir a divs o celdas espaciadoras. Simplemente incluye dentro de ellos un carácter de espacio irrompible ( ), establece una correspondiente altura (height) y una altura de línea (line height), y asegúrate de incluir mso-line-height-rule:exactly lo que se asegurará de que Microsoft Outlook para Windows lo renderice en un tamaño de píxeles perfecto. (Si estás creando espacios horizontales, tienes que especificar una anchura (width) en lugar de una altura, y podrías necesitar añadir tambiénfont-size:0;.) Aquí tienes un ejemplo de un espaciador dentro de una fila:
<tr><td style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </td></tr>
Y esto es un div espaciador:
<div style="line-height:10px;height:10px;mso-line-height-rule:exactly;"> </div>
Añadir la tabla principal
Coloquemos ahora una tabla con una anchura de 602 píxeles dentro de la tabla contenedora.
600 píxeles es una anchura máxima segura para que tu email HTML se presente cómodamente dentro de la mayoría de clientes de correo electrónico tanto de escritorio como web en la mayoría de las resoluciones de pantalla, y estamos añadiendo 2 píxeles de manera que tengamos un borde de 1 píxel alrededor del exterior, lo cual añadirá un píxel en cualquier lado.
Sustituiremos nuestro pequeño ‘Hello!’ de bienvenida con esta tabla.
Si existe un atributo en HTML, úsalo en vez de CSS
Ahora sitúa una tabla (table) centrada de 600 píxeles de ancho dentro de la tabla (table) contenedor. 600 píxeles es una anchura máxima segura para que nuestros emails se muestren adecuadamente en casi todas las resoluciones de pantalla de ordenadores de sobremesa y clientes web de correo electrónico.
Establece este ancho usando HTML en vez de CSS a través del atributo width. La regla de oro en el desarrollo de emails en HTML es: si un atributo de HTML existe úsalo en vez de CSS.
Reemplazaremos nuestro pequeño saludo Hello!, con esta tabla (table):
<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;"> <tr> <td style="padding:0;"> Hello! </td> </tr></table>
¡Excelente! Ahora tenemos nuestra tabla, y nuestra tabla de contenido principal dentro, preparada para algunas filas de contenido.
3.Creación de la estructura HTML de la plantilla y la cabecera del email
En nuestro diseño de plantilla de email HTML responsive podemos establecer que este esté dividido en algunas secciones lógicas, de manera que vamos a crear una fila para cada una.
Dupliquemos la fila única de la última tabla que añadimos de manera que tengamos tres en total, copiando todo lo existente entre (e incluyendo) las etiquetas <tr>y</tr>y pegándolo a continuación dos veces.
He cambiado el texto 'Hello!' para que lea Row 1, Row 2, y Row 3 de manera que ahora tenga el siguiente aspecto:
<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;"> <tr> <td style="padding:0;"> Row 1 </td> </tr> <tr> <td style="padding:0;"> Row 2 </td> </tr> <tr> <td style="padding:0;"> Row 3 </td> </tr></table>
Ahora les aplicaremos color de acuerdo al diseño añadiendo una propiedad CSS de background a la etiqueta style. Recuerda usar siempre todos los seis caracteres del código hexadecimal, como por ejemplo #ffffff, ya que las abreviaturas como #fff no funcionan siempre en todos los clientes de email.
<table role="presentation" style="width:602px;border-collapse:collapse;border:1px solid #cccccc;border-spacing:0;text-align:left;"> <tr> <td style="padding:0;background:#70bbd9;"> Row 1 </td> </tr> <tr> <td style="padding:0;"> Row 2 </td> </tr> <tr> <td style="padding:0;background:#ee4c50;"> Row 3 </td> </tr></table>
Bien, lo siguiente en nuestro diseño de plantilla de correo electrónico en lo que nos vamos a centrar es en la primera fila, es decir, Row 1. En la celda, cambiemos el espacio de relleno de 0 a40px 0 30px 0. Luego, dentro de la celda insertaremos nuestra imagen:
<td align="center" style="padding:40px 0 30px 0;background:#70bbd9;"> <img src="images/h1.png" alt="" width="300" style="height:auto;display:block;" /></td>
Especifica siempre la anchura de tus imágenes usando el atributo de anchura HTML en lugar de hacerlo con CSS, por ejemplo, width="300"tal y como se ve arriba, en lugar destyle="width:300px;". Si no lo haces, Microsoft Outlook para Windows mostrará tu imagen a su tamaño físico.
También hemos establecido la altura de la imagen (height) a auto para evitar cualquier aplastamiento, y displayablock, lo cual evitará que aparezcan huecos bajo ellas en algunos clientes de correo electrónico.
Por último, si tu imagen contiene información importante no mencionada en el texto de tu email, asegúrate de añadir una descripción de la misma en la etiqueta alt de manera que sea anunciada por los lectores de pantalla para aquellos que los estén usando.
Nota: Las imágenes no siempre se cargan y los textos alt no siempre se muestran como alternativa, así que cualquier información crucial siempre debería estar incluida como texto en vivo en tu correo electrónico en lugar de estar incrustado en una imagen.
¡Y esta es la cabecera terminada de nuestra plantilla de email HTML responsive!
4. Creación del área de contenido
A continuación de la cabecera, concentrémonos en el área de contenido de nuestro email. En primer lugar, añadiremos algo de espacio de relleno a las celdas de Row 2 de manera que la tabla de dentro tenga algún espacio a su alrededor, conforme a nuestro diseño, así que su aspecto ahora será el siguiente:
<tr> <td style="padding:36px 30px 42px 30px;"> Row 2 </td></tr>
Ahora sustituiremos el texto ‘Row 2’ con otra tabla para anidar dentro nuestro contenido principal dentro de ella. Al crear una plantilla HTML para email usando tablas, tenemos que anidarlas porque colspanyrowspan no son soportadas en todos los clientes de correo electrónico.
Hemos establecido la anchura de esta tabla al 100%. Es una buena práctica usar porcentajes para las anchuras siempre que sea posible en lugar de usar un valor en píxeles, ya que esto te ayudará posteriormente si quieres hacer tu email responsive, e incluso si simplemente necesitas ajustar más adelante la anchura de tu email. Las anchuras en porcentaje se adaptarán automáticamente al nuevo tamaño del contenedor, mientras que las anchuras en píxeles tendrían que ser actualizadas individualmente.
Ahora añadiremos nuestro contenido a la fila superior, que es una cabecera, un párrafo de texto, y un párrafo final con un enlace dentro. En este momento, no vamos a añadir a todos estos elementos.
Sustituye el texto 'Row 1' con lo siguiente:
<h1>Creating Email Magic</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p><p><a href="http://www.example.com">In tempus felis blandit</a></p>
A continuación vamos a añadir nuestras dos columnas de contenido a Row 2. Como queremos un huevo entre estas dos celdas, crearemos una tabla de tres columnas con una celda vacía entre las dos columnas exteriores. Existen unas cuantas formas de crear este diseño, pero esta es la más fiable para nuestros propósitos.
Aunque a mi me gusta adherirme a los porcentajes, cuando tengas contenido de un tamaño concreto, puede resultar confuso convertirlo a porcentajes (en este ejemplo, las columnas tendrían una anchura de 48.1%, lo que puede confundir). Por este motivo, dado que nuestras dos imágenes tienen una anchura de 260 píxeles, crearemos dos columnas con que también tienen una anchura de 260 píxeles, una celda haciendo de margen entre medias de 20 píxeles. (Esto hace un total de 540 px, que es igual a la anchura de nuestra tabla menos el espacio de relleno a cada lado de 30 px.) Asegúrate de asignar un valor de cero al tamaño de tu fuente (font-size) y a la altura de línea (line-height) y de añadir un carácter de espacio irrompible ( ) en la celda intermedia.
También estableceremos la alineación vertical (vertical-align) atop para ambas celdas de manera que se alineen verticalmente en la parte superior, incluso aunque una columna tenga más texto que la otra. La alineación vertical predeterminada es al medio (middle).
Sustituye 'Row 2' con esta tabla:
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;"> <tr> <td style="width:260px;padding:0;vertical-align:top;"> Column 1 </td> <td style="width:20px;padding:0;font-size:0;line-height:0;"> </td> <td style="width:260px;padding:0;vertical-align:top;"> Column 2 </td> </tr></table>
Ahora, añadamos nuestras imágenes y contenido a estas columnas. Los márgenes en las etiquetas <p> son bien soportados entre los clientes de email, así que envolveremos nuestro texto e imágenes entre etiquetas <p> y ajustaremos el espacio entre ellos usando más adelante un margen (margin) cuando añadamos todo nuestro estilo al texto.
Añadamos contenido a las columnas 1 y 2 de manera que toda la tabla tenga ahora el siguiente aspecto:
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;"> <tr> <td style="width:260px;padding:0;vertical-align:top;"> <p><img src="images/left.gif" alt="" width="260" style="height:auto;display:block;" /></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.</p> <p><a href="http://www.example.com">Blandit ipsum volutpat sed</a></p> </td> <td style="width:20px;padding:0;font-size:0;line-height:0;"> </td> <td style="width:260px;padding:0;vertical-align:top;"> <p><img src="images/right.gif" alt="" width="260" style="height:auto;display:block;" /></p> <p>Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.</p> <p><a href="http://www.example.com">In tempus felis blandit</a></p> </td> </tr></table>
Aquí hemos establecido la anchura de las imágenes usando de nuevo el atributo HTML width, de la misma manera que hicimos cuando insertamos la imagen de cabecera.
5. Aplicar estilo al pie de la plantilla de email HTML responsive
Ahora añadiremos nuestro espacio de relleno a la fila del pie.
<tr> <td style="padding:30px;background:#ee4c50;"> Row 3 </td></tr>
Dentro de esa celda, sustituiremos el texto ‘Row 3’ con otra tabla para obtener dos columnas, cada una con una anchura de 50%, estando la izquierda ajustada aalign="left"y la derecha aalign="right"de manera que el contenido en cada una de ellas esté alineado a esos lados y no proporcione un diseño de email equilibrado.
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;"> <tr> <td style="padding:0;width:50%;" align="left"> Left Column </td> <td style="padding:0;width:50%;" align="right"> Right Column </td> </tr></table>
Sustituye 'Left Column' con un párrafo de texto:
<p>® Someone, Somewhere 2021<br/><a href="http://www.example.com">Unsubscribe</a></p>
Crearemos otra pequeña tabla para los iconos de nuestras redes sociales, ya que es la mejor forma de obtener el espaciado más preciso que se renderice adecuadamente en cualquier lugar. Sustituye el texto 'Right Column' con la siguiente tabla.
Habrás notado que no estamos especificando una anchura de tabla, y esto es así de manera que la anchura de la tabla esté determinada por las celdas que contiene. Cada una tiene 38 px de anchura (igual que la anchura de nuestros iconos) más 10 píxeles de espacio de relleno a la izquierda.
<table role="presentation" style="border-collapse:collapse;border:0;border-spacing:0;"> <tr> <td style="padding:0 0 0 10px;width:38px;"> <a href="http://www.twitter.com/"><img src="images/tw.png" alt="Twitter" width="38" style="height:auto;display:block;border:0;" /></a> </td> <td style="padding:0 0 0 10px;width:38px;"> <a href="http://www.facebook.com/"><img src="images/fb.png" alt="Facebook" width="38" style="height:auto;display:block;border:0;" /></a> </td> </tr></table>
Y aquí lo tenemos, ¡el diseño de nuestra plantilla de email HTML responsive está completado!
6. Aplicar estilo al texto
Aplicar estilo al texto contenido en nuestra plantilla de email HTML es un paso muy importante. Primero, veamos la fila de contenido superior con nuestro texto h1 introductorio.
Nota importante sobre el uso de las etiquetas de párrafo y de encabezados
Cuando uses etiquetas de párrafo y de encabezados (p, h1, h2, etcétera) debes especificar tus ajustes de margen superior e inferior, de no hacerlo cada cliente de correo electrónico aplicará sus propios y extremadamente distintos márgenes predeterminados a estos elementos. También tienes que asegurarte de que tus márgenes superior e inferior estén establecidos a cero en el caso de que no desees ninguno de ellos, en ese caso establecerías tu encabezado a margin:0;. Si solo quieres un margen inferior, aun así debes establecer el margen superior a cero, por ejemplo, margin:0 0 10px 0;.
Con esto en mente, estableceremos nuestros deseados márgenes en todas nuestras etiquetas, y también queremos establecer el color del texto a #153643, el cual podemos aplicar a la celda, ya que todo lo que esta contiene heredará este color. Después de estos cambios, el total de la celda tendrá el siguiente aspecto:
<td style="padding:0 0 36px 0;color:#153643;"> <h1 style="font-size:24px;margin:0 0 20px 0;font-family:Arial,sans-serif;">Creating Email Magic</h1> <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan et dictum, nisi libero ultricies ipsum, posuere neque at erat.</p> <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p></td>
Habrás notado que arriba también hemos establecido la familia de la fuente (font-family) en cada elemento individual h1 y p, y posiblemente te estés preguntando por qué no podemos simplemente establecer esto en la etiqueta del cuerpo o en la de la tabla. Esto es así porque algunos clientes de correo electrónico sobreescriben tus fuentes si no las estableces en línea en cada elemento de párrafo o de encabezado. Hay otras consideraciones y enfoques a este problema, pero para simplificar y para asegurarnos de que nuestra plantilla de correo electrónico se renderice perfectamente en cualquier sitio en esta fase, las estableceremos en línea en cada elemento.
Ahora, avanzando a nuestra área de dos columnas, añade color a cada una de las celdas de 260px de anchura de manera que ambas tengan el siguiente aspecto:
<td style="width:260px;padding:0;vertical-align:top;color:#153643;">
Como arriba, añadiremos algo de estilo al texto y márgenes a nuestros párrafos y enlaces, y estableceremos un tamaño base de fuente a toda la tabla. Con todo esto, la tabla tiene ahora el siguiente aspecto:
<table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;"> <tr> <td style="width:260px;padding:0;vertical-align:top;color:#153643;"> <p style="margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><img src="images/left.gif" alt="" width="260" style="height:auto;display:block;" /></p> <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, est nisi libero ultricies ipsum, in posuere mauris neque at erat.</p> <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">Blandit ipsum volutpat sed</a></p> </td> <td style="width:20px;padding:0;font-size:0;line-height:0;"> </td> <td style="width:260px;padding:0;vertical-align:top;color:#153643;"> <p style="margin:0 0 25px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><img src="images/right.gif" alt="" width="260" style="height:auto;display:block;" /></p> <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;">Morbi porttitor, eget est accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed.</p> <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial,sans-serif;"><a href="http://www.example.com" style="color:#ee4c50;text-decoration:underline;">In tempus felis blandit</a></p> </td> </tr></table>
Por último, aplicaremos estilo al pie. En primer lugar, añadiremos algo de estilo a la fuente de la tabla principal del pie, dentro de nuestra celda roja del pie con un espacio de relleno de 30 px, de manera que ahora se vea así:
<td style="padding:30px;background:#ee4c50;"> <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;font-size:9px;font-family:Arial,sans-serif;">
En la columna izquierda de esta tabla, podemos actualizar nuestro párrafo y enlace para que incluir estilo y color:
<p style="margin:0;font-size:14px;line-height:16px;font-family:Arial,sans-serif;color:#ffffff;"> ® Someone, Somewhere 2021<br/><a href="http://www.example.com" style="color:#ffffff;text-decoration:underline;">Unsubscribe</a></p>
Y en nuestros iconos de redes sociales, aplicaremos estilo a los enlaces para que sean blancos, de modo que si las imágenes no se cargan, cualquier texto alt sea visible sobre el fondo rojo. Ajusta cada enlace de manera que tenga el siguiente aspecto:
<a href="http://www.twitter.com/" style="color:#ffffff;">
y
<a href="http://www.facebook.com/" style="color:#ffffff;">
¡Casi acabada!
¡Y ahí la tenemos! Todo en su sitio.
7. Realiza algunas pruebas
En este punto, es buena idea ejecutar tu código HTML a través de un servicio para realizar pruebas de email como Litmus, o Email on Acid. Dejar todos los bordes en todas las tablas y celdas puede ser útil para ver qué está ocurriendo en cada cliente de correo electrónico. (Dependiendo de cómo estés comprobando tu email, podrías necesitar primero alojar de forma remota tus imágenes, e insertar las URL remotas de cada imagen en tu código. Consulta el sitio web de tu servicio de pruebas para aprender cómo comprobar tu HTML.)
Aquí tienes algunos de los resultados de mi prueba en Email on Acid:
Ahora ha llegado el momento de eliminar esos bordes y ver el atractivo diseño de la plantilla de email. En la etiqueta style dentro de head, elimina la siguiente línea:
table, td {border:2px solid #000000 !important;}
¡Y eso es todo!
¡Has creado una sencilla plantilla HTML para email!
Antes de acabar la jornada, si has usado cualquier comentario en tu CSS en la cabecera de tu archivo por cualquier razón, deshazte de ellos. Algunos clientes de email pueden tener conflicto con los comentarios CSS así que es más inteligente no incluirlos.
Ahora es buen momento para hacer una prueba final con Litmus, o Email on Acid, ¡y después tu email HTML estará listo para ser enviado!
Descarga plantillas de email HTML responsive
Si necesitas más opciones, entonces es posible que nuestras plantillas de email HTML responsive sean justo lo que necesitas. Suscríbete a Envato Elements y obtendrás acceso ilimitado a cientos de plantillas de email HTML responsive personalizables, así como fotografías, iconos, y gráficos de stock, y muchos otros recursos digitales para tus proyectos.
- 13 geniales plantillas Campaign Monitor para emails y boletinesBrittany Jezouit14 May 2019
- Las Mejores Plantillas de Mailchimp para Newsletter de Empresa (2022) Brad Smith24 May 2022
- Domina MailChimp: plantillas MailChimp y tips para newslettersBrittany Jezouit10 Sep 2018
- 20 y más de las mejores plantillas responsivas de Mailchimp para marketing por correo electrónico (email marketing)Brenda Barron11 Aug 2020
- 17 plantillas de MailChimp para todo propósito y ocasiónPaula Borowska14 Jun 2022
Aprende más sobre cómo crear una plantilla HTML para email
¡Para llevar lo que has aprendido al siguiente nivel! Consulta nuestra guía de aprendizaje Dominar el email HTML para encontrar más tutoriales sobre las plantillas de email HTML, el diseño de emails, la codificación de emails resposive, la accesibilidad, el marketing, el email transaccional, los proveedores de servicios de email (ESPs), consejos para el flujo de trabajo de desarrollo, ¡y mucho más!
- Lo Que Usted Debería Saber Acerca del Correo Electrónico HTMLNicole Merlin10 Jun 2013
- La guía completa para diseñar por correo electrónicoNicole Merlin13 Dec 2013
- Guía de Principiante al Correo Accesibilidad (Checklist + Recursos)Stig Morten Myre11 Sep 2018
- Crea un Correo Electrónico Responsive Perdurable sin Media QueriesNicole Merlin21 Oct 2021
- Cómo formular una estrategia de desarrollo y diseño de correo electrónicoPaul Airy10 Sep 2018
- Cómo Aumentar las Conversiones de Correo Electrónico Con Personalización y Contenido DinámicoJustin Khoo14 Sep 2018
FAQs
¿Cómo hacer un email Responsive? ›
- 1# Adapta tus emails a los principales clientes.
- 2# Diseña el diseño responsive pensando en la comodidad de tus usuarios.
- 3# Recuerda que menos es más.
- 4# Acorta al máximo el proceso de conversión.
- 5# Trabaja el asunto de tus emails.
En segundo lugar, procederemos paso a paso a crear nuestro email en HTML: Crea una tabla para determinar la estructura del email. Algunas características como el float, margin y padding no se podrán ver correctamente en Gmail y Outlook 2007 por lo que las evitaremos. Fijaremos el ancho en las celdas, no en las tablas.
¿Cómo crear una plantilla de correo? ›- Abre Gmail y haz clic en Redactar.
- Haz clic en Más. Plantillas.
- Para insertar en tu correo una plantilla que tengas guardada, en Insertar plantilla, elige la que quieras.
- Termina de redactar el mensaje y haz clic en Enviar.
- En la pestaña Archivo, seleccione Opciones > Correo.
- En Redactar mensajes, en la lista Redactar mensajes en este formato, haga clic en HTML, Texto sin formato o Texto enriquecido.
- Contratar un servicio profesional como Mailchimp.
- Usar un cliente de Gmail que permita el envío de HTML crudo.
- Copiar HTML y pegarlo en el editor de Gmail.
- Usar la extensión de Chrome Gorgias.
- Posiblemente otras que no conozco.
Una plantilla de correo es un correo electrónico con formato HTML que usted puede usar para crear su propia plantilla de correo, al cambiar el contenido propuesto por el suyo.
¿Cómo enviar un correo con diseño? ›En la computadora, ve a Gmail. En la esquina superior izquierda, haz clic en Redactar . En la parte inferior de la ventana, haz clic en Diseños . Si nunca usaste los diseños, haz clic en Personalizar estilo.
¿Qué son las plantillas en HTML? ›Una plantilla HTML se utiliza como base para crear varias páginas con un diseño similar pero con distinto contenido. Un administrador de la web puede diseñar las plantillas propias de su sitio web y luego distribuirlas entre los contribuyentes para que las utilicen en el diseño de páginas HTML.
¿Qué es un template en HTML? ›El elemento HTML <template> es un mecanismo para mantener el contenido HTML del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.
¿Cómo crear una plantilla CSS? ›En la pestaña Plantillas, desplázate hasta CSS y hojas de estilo. Para agregar una hoja de estilo, haz clic en + Agregar hoja de estilo. Haz clic en la X junto a una hoja de estilo adjunta para eliminarla. Haz clic en Guardar.
¿Cómo hacer un banner para mandar por mail? ›
Cómo hacer un banner de email
Visite el creador VistaCreate para crear un banner de email que le guste. Vea, busque por palabra clave o mire en las categorías. Personalice el diseño añadiendo imágenes, cambiando colores y tamaños de elementos. ¡Cargue el logotipo, añada un eslogan, CTA, y el banner está listo!
En el cuerpo del mensaje, escriba el contenido que desee. y, a continuación, haga clic en Guardar como. En el cuadro de diálogo Guardar como, en la lista Guardar como tipo, haga clic en Plantilla de Outlook. En el cuadro Nombre de archivo, escriba un nombre para la plantilla y, a continuación, haga clic en Guardar.
¿Qué es una plantilla en HubSpot? ›Las plantillas definen el diseño de tus páginas, correos electrónicos y temas de HubSpot. Una plantilla se compone de módulos y parciales, y puede hacer referencia a otros materiales como hojas de estilo y archivos JavaScript.
¿Cómo crear una página web mediante el uso de plantillas? ›Crear una página Web utilizando una plantilla
En el menú Archivo, haga clic en Nuevo. En la ficha Páginas Web, haga clic en la plantilla en la que desee basar la página Web.
Si deseas establecer una imagen como fondo de una página web o un elemento HTML, en lugar de simplemente insertar la imagen, tendrás que utilizar la propiedad CSS background-image, la cual es el reemplazo del atributo background-image en versiones anteriores de HTML.
¿Cómo obtener el código HTML de una página web? ›- Haga clic en el icono de menú de la barra de herramientas del navegador.
- Seleccione Más herramientas y, a continuación, Ver código fuente.