Ahora que hemos cubierto Cómo diseñar una plantilla de boletín informativo por correo electrónico en 7 pasos simples, es hora de entrar en detalles para hacer que funcione correctamente. En este tutorial, lo guiaré a través de los pasos necesarios para codificar un correo electrónico funcional en HTML que se muestre bien en la mayoría de los programas de correo electrónico.
Ya sea que prefiera codificar un correo electrónico a mano o usar una plantilla preexistente, hay dos reglas que debe tener en cuenta al crear un correo electrónico HTML:
Deben utilizarse tablas HTML para el espacio de correo electrónico. Es posible que esté familiarizado y acostumbrado a usar CSS para controlar el diseño de los sitios web, pero esto no funcionará en un correo electrónico.
Puede usar CSS en línea para elementos en línea como colores de fondo y fuentes.
El diseño del boletín es simple y directo: simplemente reemplace las imágenes actuales con las suyas propias si decide usar una plantilla similar.
¡Pongamos manos a la obra!
1. Junta tus imágenes
Abra el psd que contiene el diseño del correo electrónico y corte y exporte cualquier imagen que se vaya a utilizar en el correo electrónico. En mi caso agarré el encabezado, tres imágenes y los rectángulos de red social y compartir en la parte inferior.
2. Crea un nuevo archivo HTML
NOTA: Si solo desea que el código completo para el resultado final se use como plantilla inicial, desplácese hasta la parte inferior de esta publicación y cópielo y péguelo.
Si es nuevo en esto (e incluso si no lo es), es posible que desee utilizar un programa de diseño web como Adobe Dreamweaver para crear su archivo HTML. Copie y pegue el siguiente código en el documento entre después de la etiqueta del cuerpo abierto.
Si está utilizando Dreamweaver o algo similar, probablemente comenzará con algo parecido a lo que se muestra a continuación. Si está creando el archivo HTML desde cero con un editor de texto como el Bloc de notas, deberá copiar y pegar el siguiente código en su archivo .txt.
ConsejoNotarás a lo largo de este tutorial que no se usa CSS (no hay DIV ni posicionamiento CSS). CSS no funcionará en la mayoría de los servicios de correo electrónico basados en navegador, como Gmail o Yahoo! Mail. CSS en línea como etiquetas de fuentes es su opción más segura.
3. Crea el encabezado
Crea una tabla con un ancho de 600px. Recuerde que la mayoría de las personas ven su correo electrónico en un panel de vista previa que, en promedio, tiene alrededor de 600 px, así que diseñe sus correos electrónicos en consecuencia. Dale estilo a la tabla con bordes izquierdo y derecho con un ancho de 2px usando el color #e6e6e6.
Primero usaremos los elementos TR y TD para crear una nueva celda y darle estilo, agregando una altura de 50 px y un fondo de #fffff (blanco). Esta primera celda contendrá un enlace para que los usuarios puedan ver el correo electrónico en su navegador web.
Recuerde envolver sus enlaces en etiquetas span. Establezca la familia de fuentes en arial, sans-serif; y el color a negro.
Siempre debes dar tus imágenes alt atributos; es absolutamente vital en los correos electrónicos HTML. De forma predeterminada, muchos clientes de correo electrónico no muestran imágenes cuando se abre un correo electrónico por primera vez. En su lugar, piden a los usuarios que elijan activamente mostrar imágenes.
4. Crear contenido principal
Cree una nueva tabla usando la misma estructura de tabla que la anterior. Esta vez agregaremos dos TR adicionales para tener en cuenta las imágenes y la descripción de cada entrada. Si es posible, incrusta tus imágenes en tu mail. El correo electrónico no tendrá que comunicarse con un servidor web externo para descargarlos y no aparecerán como archivos adjuntos al correo electrónico. También agrego un relleno de celda de «25» para darle al contenido un poco de espacio para respirar.
El HTML para esta celda debería verse así:
30 fotógrafos de mascotas inspiradores:
<tr> <td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="middle" valign="middle"> <a href="#"><img src="img/petphotography.jpg" border="0" alt="Pet Photographers" align="center" /></a></td> <tr> <td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;" align="center"><p><span style="margin-bottom: 10px; font-size: 12px; font-weight: normal; color: #494a48; font-family: arial; line-height: 110%;">These days pets are increasingly being considered members of the family. As people are having children later in life, the focus on ones career brings pets into the scene. These pets are often cherished as much as children and their quality of life is a top priority in the minds of their owners. This regard for animal welfare, along with the design savvy culture we live in, has influenced pet photography as well as the pet industry in general.This showcase portrays how good design and aesthetics can change our perception of pet photography. Enjoy!</span></p> <p><a href="https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/link" style="font-family: arial"><span style="font-family: arial; font-size: 12px; color:#b0589d">View Blog Post -></span></a></p> <p><a href="#"><img src="img/spacer.jpg" border="0" alt="Pet Photographers" align="center" /></a></p></tr> </table>
Consejo: No lo hice aquí por el bien de este tutorial, pero use URL absolutas para sus gráficos (es decir, http://www.crazyegg.com/images/image.gif)
Para las otras dos entradas de este boletín, simplemente copie y pegue este código dos veces para llegar a las tres entradas. Luego cambie los nombres de las imágenes a las otras imágenes guardadas en cada declaración
Así es como se ve una de las entradas:
Consejo: para definir el color del enlace, agregue un tramo adicional dentro de las etiquetas de su enlace y defina el color en el elemento principal y secundario, como se muestra a continuación:
6. Agregar información de contacto y opción de cancelación de suscripción
Finalmente, permitiremos que los suscriptores se comuniquen fácilmente proporcionando información de contacto. Siempre querrá dar a sus suscriptores la opción de darse de baja de sus correos electrónicos también. Para esto, solo use una estructura de tabla similar a la que hemos usado en todo el correo electrónico. Así es como se ve el código:
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;" align="center">
<span style="font-size: 10px; color: #575757; line-height: 120%; font-family: arial; text-decoration: none;">
<a href="https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/mailto:info@petanthology.com">
Contact Us?</a><br>
Visit us on the web at <a href="default.asp">petanthology.com</a></span></td>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: right; height: 50px;" align="center">
<span style="font-size: 10px; color: #575757; line-height: 120%;
font-family: arial; text-decoration: none;">If you no longer want to receive our emails, please <a href="default.asp">un-subscribe here</a>.</span>
</table>
Así es como se ve la parte inferior del correo electrónico:
¡Ahí tienes! Su boletín de correo electrónico está completo.
¿Quieres el código completo de una vez?
Si desea la versión HTML completa de esto de principio a fin, puede comenzar con el código a continuación.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<!-- -->
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ebebeb">
<tbody>
<tr>
<td align="center" valign="top"></td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ebebeb">
<tbody>
<tr>
<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: center; height: 50px;" align="center"><span style="font-size: 11px; color: #575757; line-height: 200%; font-family: arial; text-decoration: none;">Having trouble viewing this email? <a style="font-size: 11px; color: #575757; line-height: 200%; font-family: Arial; text-decoration: none; font-weight: bold;" href="#">View it in your browser.</a></span></td>
</tr>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle"><a href="#"><img src="img/header.jpg" border="0" alt="The Pet Anthology Newsletter" align="center" /></a></td>
</tr>
</tbody>
</table>
<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="25" width="605">
<td width="596" align="center" style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;"><p style="margin-bottom: 10px; font-size: 22px; font-weight: bold; color: #494a48; font-family: arial; line-height: 110%;">30 Inspirational Pet Photographers:</p></td>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="middle" valign="middle">
<a href="#"><img src="img/petphotography.jpg" border="0" alt="Pet Photographers" align="center" /></a></td>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;" align="center"><p><span style="margin-bottom: 10px; font-size: 12px; font-weight: normal; color: #494a48; font-family: arial; line-height: 110%;">These days pets are increasingly being considered members of the family. As people are having children later in life, the focus on ones career brings pets into the scene. These pets are often cherished as much as children and their quality of life is a top priority in the minds of their owners. This regard for animal welfare, along with the design savvy culture we live in, has influenced pet photography as well as the pet industry in general.This showcase portrays how good design and aesthetics can change our perception of pet photography. Enjoy!</span></p>
<p><a href="https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/link" style="font-family: arial"><span style="font-family: arial; font-size: 12px; color:#b0589d">View Blog Post -></span></a></p>
<p><a href="#"><img src="img/spacer.jpg" border="0" alt="Pet Photographers" align="center" /></a></p></tr>
</table>
<td bgcolor="d0d0d0"><table width="604" cellpadding="5" cellspacing="0">
<tr>
<td width="288" bgcolor="#ffffff"><img src="https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/img/socialnetworks.jpg" /><br />
<td width="294" bgcolor="#ffffff" align="right"> <img src="img/share.jpg" />
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: left; height: 50px;" align="center">
<span style="font-size: 10px; color: #575757; line-height: 120%; font-family: arial; text-decoration: none;">
<a href="https://www.crazyegg.com/blog/how-to-code-an-email-newsletter/mailto:info@petanthology.com">
Contact Us?</a><br>
Visit us on the web at <a href="default.asp">petanthology.com</a></span></td>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: right; height: 50px;" align="center">
<span style="font-size: 10px; color: #575757; line-height: 120%;
font-family: arial; text-decoration: none;">If you no longer want to receive our emails, please <a href="default.asp">un-subscribe here</a>.</span>
</table>
</body>
</html>
Este tutorial estaba destinado a brindarle una explicación rápida de cómo codificar un boletín HTML. Para artículos más detallados sobre las mejores prácticas, consulte artículos como este punto del sitio una.
Ahora puede archivar todos los archivos en un único archivo .zip y cargarlo en una aplicación de marketing por correo electrónico basada en la web. yo suelo Contacto constantepero hay muchas otras opciones que pueden satisfacer sus necesidades.
Para ver la primera parte de este tutorial, diríjase a Cómo diseñar una plantilla de boletín informativo por correo electrónico en 7 pasos simples
