Hacer una newsletter sencilla
Tíiiiiiiiipico que me pasó y que nunca encontré un tutorial de cómo hacer una newsletter a partir de un psd, es de lo más fácil solo hay que tomar algunos aspectos en cuenta antes y es muy muy facil.
1)Paso 1 (generalmente el más tardado) Tener claro qué es lo que quieres que haga tu newsltter y de juntar todos los materiales de los que dispones. (procura que tu newsltetter no mida más de 600px de ancho ya que es un estándar)
Terminado este paso tendrás algo más o menos así:
2) Este paso no es tan complicado pero tiene su truco, elegir música para escribir html y sentirte programador: una opción obvia es Aphex Twin.
3) Vamos a dividir nuestra imagen de manera lógica (es difícil si no hicimos el punto 1 bien)
3.1 La parte de: “Si no sabes cómo descargar las imágenes y no tienes idea de qué hacer con esto da click aqui” lo vamos a poner directamente como texto (este es un estándar mínimo de usabilidad porque la mayoría de los clientes de correo, incluídos hotmail, gmail y outlook traen bloqueadas las imágenes por default con este pequeño mensaje hasta el cerebro más obtuso y menos entrenado podrá ver nuestro grandioso newsletter).
3.2 El resto del las imágenes las vamos a cortar como un rompecabezas de preferencia uno muy sencillo que hasta un niño de 3 años sin brazos pueda armar. Para cortar las imágenes recomiendo guardar primero todo el newsletter a excepción del texto superior (que si leyeron el paso anterior entenderán el por que). Luego dividirlo en tres secciones sencillas está bien con ayuda de la herramienta de crop.<>
Cada imagen la guardaremos como jpg o png de baja resolución (que se vea bien definido pero no abusen) con un nombre distinto en una carpeta que se llame img
4. Creamos una carpeta que se llame newsletter (o pepitajuarez si lo prefieren) Y en dicha carpeta trabajamos todo y para tener más orden, ponen su carpeta de img y su archivo html Y POR EL AMOR DE DIOS NO USEN MAYÚSCULAS NI ACENTOS NI ESPACIOS EN LOS NOMBRES DE SUS CARPETAS Y ARCHIVOS
6. Vamos a crear un archivo html muy sencillo es más tan sencillo que pueden copiar y pegar lo que hago:
<html>
<head>
<title>Newsletter of your mom in marbles</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" >
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="10" cellspacing="0" width="500">
<tr>
<td><span style="color: #448ccb;font-family: Comic Sans MS;font-size: 12px;">
Si no sabes como descargar las imagenes y no tienes idea de que hacer con esto
da click <a href="el link donde van a subir esta misma newsletter.com">aqui</a>
</span></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="500" bgcolor="#a0e1fb">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="500" >
<tr>
<td>
<a href="link-para-comprar.com"><img src="img/imagen1.jpg"></a>
</td>
</tr>
<tr>
<td>
<img src="img/imagen2.jpg">
</td>
</tr>
<tr>
<td>
<a href="link-para-ir-a-hi5.com"><img src="img/imagen3.jpg"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
7. Copiar y pegar no basta si se fijan bien hay nombres de los archivos y una serie de cosas que tienen que hacer que coincidan si aun así resultan demasiado complejas están en severos problemas y deben recurrir al w3School y leer mucho sobre links, imágenes y tablas…y sobre internet…y emails.
8. Básicamente lo que hice fue hacer una tabla que esté siempre centrada hacer otra tabla para la cabeza donde va el texto y otra tabla para acomodar las tres imágenes para que se ensamblen una de bajo de la otra. Estas tablas tienen propiedades para medir el ancho de nuestras imágenes y están contenidas en columnas de la tabla superior…es algo abstracto pero cuando lo pongan en prueba me entenderán.
8.1 La imagen que tenía el botón de comprar le dí un link a nuestra tienda ficticia y la otra imagen para hacerte amigo en hi5.
9. Vamos a subir nuestro newsltter a algun servidor para que las personas lo puedan ver en línea. Pueden usar algun servidor gratuito como http://0000free.com/ que va bastante bien, después poner el link en la primera sección. Esto incluye nuestras imagenes para que las de más personas puedan verlas fuera de tu computadora (créeme todo es maravilloso hasta que lo envías y vez que tu y esa persona no comparten los mismos archivos)
10. Abrimos nuestro html en algún navegador, de preferencia chrome lo seleccionamos todo y le damos copiar y lo pegamos en nuestro outlook o en nuestro mac mail. IMPORTANTE: Esto solo funciona en Mac, si tienes PC usa esto
11.Le ponemos un “asunto” al mail que llame la atención
12.Lo enviamos, si por te lo pidió alguien para probar tus habilidades o porque esta persona lo quiere mandar: mándale la carpeta comprimida con tu html y con las imágenes.
Reflexión final: Algunos te dirán que es mejor dividir más la imágen y que solo den click la zonas específicas pero en mi opinión no aporta mucho tener una fracción de la imagen clicable si puedes tener botonsotes grandotes que hasta el más baboso usuario de teléfonos móviles pueda clicar en su minipantallita.
No usen mucho css y ni piensen en usar una hoja css fuera del documento, como verán lo que hice fue definir directamente en el html las propiedades css, en las partes con letra yo siempre uso spans para darles estilos y funcionan muy bien en todos los clientes de correo.
Si pueden, usen mailchimp para hacer sus primeros newsletters funciona muy muy bien y en un día lo dominan, pueden descargar los html y modificarlos y es bastante divertido
Tags: CSS, front-end, OC (Original Content pué), tutorial