¿Cómo crear una plantilla de correo electrónico con HTML y CSS?

Como diseñadores y desarrolladores, un día su cliente le pedirá una plantilla de correo electrónico para su boletín de noticias. Debo decir que las plantillas de correo electrónico no son tan emocionantes simplemente porque hay una gran brecha en la compatibilidad con HTML y CSS. Pensarías que en la era actual no sería el caso, ya que estamos avanzando con HTML5 y CSS3. Sin embargo, me entristece decir que cuando se trata de enviar correos electrónicos, ese no es el caso.

Lo primero que debe tener en cuenta al crear una plantilla de correo electrónico HTML es el hecho de que todos los estilos CSS deben realizarse en línea. En cualquier otro caso, este es un gran no-no. Pero, debido a que hay muy poco soporte para CSS externo e incluso CSS en la cabeza, en línea es la forma de hacerlo. Además, y estoy seguro de que ha oído hablar de esto antes, la plantilla debe crearse con TABLE, no DIV. Una vez más, esto es lamentable, pero es el camino a seguir. Dado que los correos electrónicos no son tan grandes en general, diseñarlos y crearlos no es difícil; es simplemente aburrido en comparación con el diseño web o móvil.

El diseño

 Recomendado para usted: ¿Cómo acelerar su proceso de diseño utilizando marcos CSS modernos?

La estructura

Dentro del cuerpo de la página HTML, pegue el código a continuación. Con solo mirar el código, puede darse cuenta de que no hay mucho en la estructura de este correo electrónico. En realidad, eso es algo muy bueno, ya que los correos electrónicos nunca deberían ser complejos. Hasta ahora, también hay una cantidad minúscula de estilo que especifica el ancho total de la tabla y que no hay nada entre las celdas de la tabla.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

El estilo

Bien, ahora vamos a agregar algo de CSS dentro del contenido del documento. No es nada lujoso en absoluto, solo un reinicio y una definición de color y estilo de enlace. Tendría mucho cuidado con el CSS que pones aquí, ya que a menudo los clientes de correo electrónico lo ignoran.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

El contenido

Ha llegado el momento de llenar las mesas de contenido. Puede encontrar las imágenes dentro del archivo que se le proporcionó anteriormente, al comienzo de este tutorial. Ahora debe completar todo el texto y las imágenes que deben estar dentro de este correo electrónico. Tenga en cuenta que en el tutorial no tiene que vincular los hipervínculos a nada y también puede usar sus propias imágenes. Hasta ahora, dentro del código, he definido el ancho de las tres imágenes solo para asegurarme de que su tamaño esté establecido.

Hay algo que necesito que tenga muy en cuenta: las imágenes son excelentes para los correos electrónicos siempre que sean a: de tamaño pequeño y b: tengan una etiqueta alt que las describa bien. Estoy seguro de que sabe que para que aparezcan imágenes en un correo electrónico, el destinatario de este correo electrónico debe permitir que aparezcan las imágenes. Si no lo hacen, no hay nada que les diga lo que deben esperar. También es un problema de accesibilidad si no proporciona una descripción para usuarios ciegos. Sin embargo, esa es otra historia. Entonces, la lección es: ¡siempre use una imagen pequeña con una etiqueta alt!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

El estilo en línea

Lo último que haremos será proporcionar el estilo CSS en línea para esta plantilla de correo electrónico HTML. Es lo que hace que el correo electrónico aparezca, como puede ver hasta ahora, este correo electrónico no se ha visto tan bonito en absoluto. Dividiré esta parte en pedazos pequeños para que no se vuelva demasiado abrumador.

 También te puede interesar: 7 consejos útiles para hacer que la línea de asunto de tu correo electrónico sea más fácil de hacer clic.

Cuerpo

Primero, configuremos el color de fondo de toda la página de correo electrónico, así como el tamaño de fuente y el color de fuente predeterminados.

 <body bgcolor="#f7d973" ></body>

Mesa

Lo siguiente que debe hacer es centrar el contenido del correo electrónico y proporcionarle su propio color de fondo para que se destaque.

Primera Fila – Encabezado

Están sucediendo muchas cosas dentro de la celda de la primera fila. Tenga en cuenta que el estilo en línea está en <td> no en <tr>. Lo que estamos haciendo aquí es un nuevo color de fondo para que coincida con el del logotipo. Además, también hay algo de relleno y alineación. Ahora, estoy cambiando el color del texto para que sea blanco porque el texto alternativo será negro de manera predeterminada. No podrá verlo en este fondo, así que me aseguro de que pueda cambiar el color del texto. Puede parecerle inútil, pero como dije, esto es muy importante para las personas que no tienen imágenes permitidas de forma predeterminada.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Segunda fila

Dentro de la fila, hay, una vez más, solo una celda que abarca dos columnas. Esta celda se está manipulando ligeramente al agregarle algo de relleno y una línea de separación en la parte inferior para separar su contenido de la fila de abajo. También tenemos un gran titular que está obteniendo algo de espacio a través de los márgenes. Y eso es todo por esta fila.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Tercera fila

Para ambas celdas aquí estamos configurando ancho y relleno. Son exactamente iguales para que las celdas se dividan uniformemente por la mitad. Además de eso, no hay nada más ya que las celdas se llenan con una imagen y algo de texto al respecto.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Cuarta Fila

Esta es, con mucho, la sección más estilizada de esta plantilla de correo electrónico HTML. Como puede ver en el código a continuación, están sucediendo muchas cosas. Primero, toda la fila recibe un nuevo color de fondo y color de texto para asegurarse de que el texto sea visible, al igual que en el encabezado. Tanto la primera como la segunda celda y su contenido obtienen exactamente los mismos cambios de estilo. Primero, la celda en sí está obteniendo un nuevo fondo y color de texto. Luego, el enlace dentro de su encabezado se cambia a amarillo. Por último, el último párrafo está subrayado y para agregar algo de separación también se agrega un margen. Como dije, la segunda celda y su contenido obtienen exactamente la misma estilización.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 Y por último, el pie de página. Hay muy poco que hacer aquí; ¡solo un poco de espacio a través del relleno y eso es todo!






<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Ultimas palabras

Este tutorial es un poco largo, pero espero que ahora comprenda lo que se necesita para crear una plantilla de correo electrónico HTML desde cero. No es un concepto complicado pero puede resultar tedioso. ¡Ahora es su turno de salir y comenzar a crear correos electrónicos de alta gama con un aspecto increíble! Puede combinar varias técnicas para crear una plantilla de correo electrónico para hacerla más única.
Este artículo está escrito por Hannah Butler. Trabaja como desarrolladora y diseñadora web. Además, le gusta compartir su experiencia en forma de artículos. En este caso, tiene su propia sección en el sitio web WriteMyPaper4Me.co. En el futuro, comenzará a escribir un blog para describir sus métodos de trabajo a otros.