Como crear un boletín electrónico

Ya que estoy formándome en diseño web, quería daros alguna herramienta para poder hacer marketing directo, en este caso aprovechando el medio de internet.

boletin electronicoSe trata del boletín electrónico. Es una herramienta efectiva, económica y sencilla que se envia periódicamente a todos los interesados que previamente han pedido recibirlo o simplemente e-mails que disponemos de clientes a los que les queremos enviar este boletín con información de la empresa.

Los potenciales clientes pueden responder positivamente a la información, avisos, ofertas, promociones que aparecen en esta herramienta de marketing por lo que es muy habitual usarla incluso si se trata de una pequeña empresa.

Por ese motivo, os pongo el código HTML de un boletín electrónico, el cual si deseais las imagenes podéis pedírmelas en este blog, aunque deberíais reemplazarlas por las de vuestra empresa o marca personal.

Esta imagen representa lo que el código muestra.

Eso sí, necesitáis algún editor de html para que podáis visualizar la imagen mientras modificáis el código html, como por ejemplo: HomeSite, Adobe Dreamweaver, etc.

Bueno, aquí está el código:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

<html><head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>

<title>Untitled Document</title>

</head>

<body leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”15″>

<tr>

<td align=”center” valign=”middle” bgcolor=”#ced9a7″>

<table width=”600″ border=”0″ cellpadding=”0″ cellspacing=”2″ bgcolor=”#2b302d”>

<tr>

<td align=”left” valign=”top” bgcolor=”#FFFFFF”>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td height=”110″ align=”left” valign=”middle” background=”http://www.benchmarkemail.com/images/templates_n/free_templates/images/header3.gif” bgcolor=”#164d65″ style=”padding-left:10px; padding-right:10px; font-family: Georgia, Times New Roman, Times, serif; color:#FFFFFF;”>          <div align=”right” style=”font-size:12px;”>August 2009

</div>

<div style=”font-size:40px;”>Newsletter Title

</div>

<div style=”font-size:18px;”>Newsletter Subtitle here

</div>

</td>

</tr>

<tr>         <td align=”left” valign=”top”>

<table width=”596″ border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr>

<td width=”182″ align=”left” valign=”top” bgcolor=”#d2e7e0″ style=”padding:10px;”>

<span style=”font-size:15px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>In This Issue

</span>

<br>

<span style=”font-size:11px;font-weight:normal;color:#333333;

font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>

<a href=”#1″ style=”color:#579b12;”>

<b>Newsletter Article 1

</b>

</a>

<br>

<a href=”#2″ style=”color:#579b12;”><b>Newsletter Article 2

</b>

</a>

<br>

<a href=”#3″ style=”color:#579b12;”>

<b>Newsletter Article 3

</b>

</a>

<a href=”#” style=”color:#579b12;”>

<br>

</a>

</span>

<br>

<span style=”font-size:15px;font-weight:bold;color:#006699;font-family: Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>Featured Article

</span>

<br>

<span style=”font-size:11px;font-weight:normal;color:#333333;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:130%;”>

Lorem ipsum dolor sit amet con sectetuer adipiscing elit. Sed at erat. Pha sellus cond imentum. Nullam sed magna. Donec quis tellus in neque congue porttitor. Proin sit amet ligula id leo porta fida utrum. Lorem ipsum dolor sit amet consectetuer adipiscing elit. Donec dolor. Tiubulum cursus sapien vel rutrum ultrices tortor lorem putate turpis sed semper elit felis nec ligula. Mimas id ante. In commodo.

</span>             <br>             <br>

<span style=”font-size:15px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>Upcoming Event

</span><br>

<span style=”font-size:11px;font-weight:normal;color:#333333;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:130%;”>

Nullam sed magna. Donec quis tellus in neque congue porttitor. Proin sit amet ligula id leo porta rutrum.Lorem ipsum dolor sit amet con sectetuer adipiscing elit. Donec dolor. Vestibulum cursus sapien vel rutrum ultrices tortor lorem vulp utate turpis sed semper elit felis nec ligula. Mimas id ante. In commodo. Mimas bibendum viverra massa. Integer nulla urna porttitor eget aliquam vel placerat feugiat.

<b>

<br>             Date:

<br>             Time:

<br>             Location:

</b>

</span><br>             <br>

<span style=”font-size:15px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>Useful Links</span><br> <span style=”font-size:11px;font-weight:normal;color:#333333;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>

<a href=”#” style=”color:#579b12;”><b>About Us</b></a><b><br>

<a href=”#” style=”color:#579b12;”>Our Services</a><br>

<a href=”#” style=”color:#579b12;”>Our Features</a><br>

<a href=”#” style=”color:#579b12;”>Press Room</a></b></span></td>

<td width=”414″ align=”left” valign=”top” style=”padding:15px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#333333; line-height:130%;”>

<span style=”font-size:18px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>Hello and Welcome

</span><br>             <br>

Dear customer name,<br>

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Donec dolor. Vestibulum cursus sapien vel rutrum ultrices tortor lorem vulputate turpis sed semper elit felis nec ligula. Mimas id ante. In commodo. Mimas bibendum viverra massa. Integer nulla urna porttitor eget aliquam vel placerat feugiat orci. Phasellus tellus pede pulvinar et scelerisque a tempor a velit. Morbi feugiat. Etiam ut elit ac metus facilisis fermentum. Curabitur magna magna elementum fermentum placerat vel commodo vel tortor. Sed justo. Ut a orci ut arcu molestie pretium. Donec a mauris. Nullam vitae urna. Integer suscipit hendrerit magna.  <a href=”#” style=”color:#569b11;”>

<b>read more&gt;

</b>

</a>

<br>            <br>

<span style=”font-size:18px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”><a name=”1″></a>Newsletter Article 1

</span><br>

<img src=”http://www.benchmarkemail.com/images/templates_n/free_templates/images/pic1.gif” width=”128″ height=”99″ align=”left” style=”margin-right:10px;”>

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Donec dolor. Vestibulum cursus sapien vel rutrum ultrices tortor lorem vulputate turpis sed semper  felis nec ligula. Mimas id ante. In commodo. Mimas bibendum viverra massa. Integer nulla urna porttitor eget aliquam feugiat orci. Phasellus tellus pede pulvinar et scelerisque a tempor a velit. Morbi feugiat. Etiam ut elit ac metus facilisis fermentum. Curabitur magna magna elementum fermentum placerat vel commodo vel tortor. Sed justo. Ut a orci ut arcu molestie pretium. Donec a mauris. Nullam vitae urna. Integer suscipit  <a href=”#” style=”color:#569b11;”>

<b>read more&gt;

</b></a> <b><br>

</b><br>

<span style=”font-size:18px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”>

<a name=”2″>

</a>

Newsletter Article 2

</span><br><img src=”http://www.benchmarkemail.com/images/templates_n/free_templates/images/pic2.gif” width=”128″ height=”99″ align=”left” style=”margin-right:10px;”>Lorem ipsum dolor sit amet consectetuer adipiscing elit. Donec dolor. Vestibulum rsus sapien vel rutrum ultrices tortor rem lputate turpis sed semper elit felis nec ligula. Mimas id ante. In commodo. mas bibendum viverra massa. Integer nulla urna porttitor eget uam placerat feugiat orci. Phasellus tellus pede pulvinar et scelerisque a tempor a velit. Morbi feugiat. Etiam ut elit ac metus facilisis fermentum. abitur magna magna elemtum ntum placerat vel mmodo vel tortor. Sed justo. Ut a orci ut arcu molestie pretium. Donec a mauris. Nullam vitae urna. Integer suscipit  <a href=”#” style=”color:#569b11;”>

<b>read more&gt;</b>

</a> <br> <br><span style=”font-size:18px;font-weight:bold;color:#006699;font-family:Verdana, Arial, Helvetica, sans-serif;line-height:150%;”><a name=”3″>

</a>Newsletter Article 3</span><br>

<img src=”http://www.benchmarkemail.com/images/templates_n/free_templates/images/pic3.gif” width=”129″ height=”98″ align=”left” style=”margin-right:10px;”>

Lorem ipsum dolor sit amet consectetuer adipiscing elit. Donec dolor. Vestibulum cursus sapien vel rutrum ultrices tortor lorem vulputate turpis sed semper ligula felis nec ligula. Mimas id ante. In mmodo. Mimas bibendum viverra massa. Integer nulla urna porttitor eget aliquam vel cro placerat feugiat orci. Phasellus tellus pede pulvinar et scele risq tempor a velit. Morbi feugiat. Etiam ut elit ac metus facilisis entum. Curabitur magna magna elementum fermentum placerat vemodo vel tortor. Sed justo. Ut a orci ut arcu molestie pretium. Donec a mauris. Nullam vitae urna.

<a href=”#” style=”color:#569b11;”>

<b>read more&gt;</b>

</a><br>

<p align=”center”>

<a href=”#” style=”font-size:16px; color:#579b12;”>

<b>Subscribe to our Newsletter</b>

</a>

<br>            <br>            <br>

</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align=”left” valign=”top” bgcolor=”#2b302d”>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”10″>

<tr>

<td align=”left” valign=”top” style=”font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;”><b>Company Name</b><br>123 James Street, Suite100, Long Beach CA, 90000<br>          Phone: (000) 123 4567</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td></tr>

</table></body></html>

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s