Ahora tengo el agrado de enseñarles como hacer una buena plantilla de mail
corporativa. Muchas veces hemos recibido publicidad vía mail, algún newslétter,
etc... Pero la verdad es que nadie nos enseñó como hacerlas. Existen empresas
que se dedican a la publicidad viral por mail, campañas de mailing list y
podemos seguir con ejemplos. Son obviamente pagos. Pero como hacerlo a eso
nosotros, aprender y evitar una erogación cuantiosa? Pues bien, aquí están los
pasos.
1. Utilizarás tu editor web preferido, el que quieras. Yo uso DreamWeaver,
Sublime Text, o Notepa d++. Debemos olvidarnos del diseño web actual y su
filosofía. Quiero decir que tenemos que hacerlo a la antigua, usando tablas
para maquetar y diseñar. Me refiero al uso de las famosas etiquetas <table> y
</table>.
2. Jamás usemos etiquetas elaboradas como <div>, las HTML5, o selectores CSS3
y otras. Solo nos manejaremos con las básicas y simples. Tablas, párrafos,
encabezados de titulares, links, imágenes y listo. Me refiero a <table>, <p>,
<h1>...hasta el <h6>, <a> y <img>. Es recomendable de mi parte usar DremWeaver
o uno equivalente, ya que mientras vas creando las tablas vas viendo el diseño
como va quedando. Coda es un buen ejemplo.
3. Es muy importante lo anterior ya que un solo <div> nos arruinara todo.
Podemos usar CSS para dar estilo, diseñar y dar forma a nuestro proyecto. Hay
personas que directamente, a cada párrafo o titular le dan formato de manera
individual. O sea, esto es un ejemplo: <p align=“right“, style=“color:#ffdd22,
padding: 1em“>Texto de párrafo</p>. Yo no estoy de acuerdo! Esto es
desordenado, demasiado personalizado y tira por la borda todo lo que nos
indican los actuales principios de separar la "estructura, diseño y del
contenido". Lo que haremos es incluir lo siguiente entre las etiquetas <head> y
</head>:
<style>
Body
{
Background: #cccccc
Font-family: verdana, tahoma, serif
...y etc con todas etiquetas necesarias para dar un buen diseño.
}
</style>
Usaremos los selectores tanto de clases como de 'Id' que hagan falta. En lo
personal recomiendo muchas mas clases que de Id, ya que podemos usar.,
reutilizar las clases, y anidarlas. Incluso usar mas de una en una etiqueta.
Los Id's prefiero que sean pocos y sguiendo la modalidad de una web común: ó
sea, Header, Content, sidebar, footer, o la denominación mas cómoda parar uds.
Recomiendo mucho usar nombres que coincidan con las nuevas etiquetas de HTML5.
Así nos vamos acostumbrando, y a pensar en función de las nuevas tecnologías.
Otra cosa, si siguen estos consejos cualquiera que modifique la plantilla podrá
entenderlo fácilmente. "son reglas de buena estructuración y documentación de
código". Incluso se pueden agregar comentarios!!! Es genial y recomendable.
4. Suponiendo que ya tienes todo, ahora faltan las fotos. Ya tiene que estar
editadas y 'arregladas'. Lo importante es que jamás deben mandarse adjuntas.
Siempre tienen que estar cargadas en el servidor de tu sitio web. Lo que
figurara en el código html de la plantilla es solo la dirección URL hacia la
foto. O sea, <img
href="http://www.tusitio.com/wp-content/upload/tuplantilla-mail/header.jpg";> es
solo un ejemplo. Pero como estamos desarrollando y trabajando en local, las
imágenes las guardaremos, seguramente, en la carpeta de imágenes o en la misma
de la plantilla. Seamos prolijos, sigamos las pautas de buenas formas de
acomodar y organizar las cosas.
5. En las imágenes podemos incluir zonas activas o mapas para insertar enlaces.
Una vez hecho el diseño debemos incorporar la famosa frase al comienzo: si no
puede ver este mail haga clic aquí. Antes de colocar el enlace a algo que
todavía no subimos, tenemos que asegurarnos de la dirección física de URL que
le vamos a dar y el lugar o carpeta en nuestro webhosting. Aclaro esto porque a
veces nuestro servidor web te rechaza ciertos lugares o carpetas. Por mas que
físicamente, alojes la plantilla con las imágenes creada a tal efecto, te da el
mensaje de error 404 de página no encontrada. En el caso de WordPress suele
darte estos mensajes de error. La solución sera alojarla en la famosa carpeta
/wp-content/upload. La recomendación para acomodar todo con correcto criterio
organizativo, seria crear una carpeta con un nombre indicativo del proyecto
anteponiendole un numero de orden, sin espacios en blanco y que sea corto. No
mas de 20 caracteres. Unos ejemplos:
www.elotrositio.com.ar/wp-content/uploads/01-mail-VB
www.elotrositio.com.ar/wp-content/upload/02-mail-PCLan.
Ahora hay que seguir lo mismo con los archivos de nuestra plantilla. Numerarlos
y nombrarlos correctamente cómos los ejemplos anteriores.
6. Vamos a subir las cosas a nuestro hosting o el determinado hosting de tu
cliente. Tenemos que asegurarnos que tenemos todas las cosas listas, ok? Para
seguir una pauta organizada y secuenciada haremos lo siguente: una vez creada
la carpeta en el hosting subimos primero las imágenes.
7. Luego tomamos nuestra plantilla que seguramente sera a modo de ejemplo,
01-tu-plantalla.html
Y lo que haremos es cambiar todos los links de las fotos e imagenes por las que
recién alojamos en el hosting. Hacemos lo mismo con el resto de los links.
También, hay hacer lo mismo con el mensaje que esta al principio: "si no puede
ver ...haga clic aquí". Con este link tenemos que completarle al final con el
nombre de la plantilla, pues porque todavia no hemos subido el archivo. Esto es
como predictivo.
7. Ahora haremos algo raro. Cambiemos el nombre de la carpeta de la plantilla
de nuestra compu local y cambiamos de lugar la plantilla. La abrimos con
nuestro navegador preferido. Vamos probando los links, chequeamos que todas las
imágenes se cargaron correctamente. Vaciamos el historial y la caché del
navegador. Si cometimos un error allí lo notaremos. Generalmente los errores
son por algún error de alguna URL.
8. Una vez terminado importamos la plantilla con nuestro cliente de correo y
procedemos a enviar mails. Y vualaaaá! A disfrutar!
PD: cada mail que enviemos implicara crear una plantilla nueva y subirla al
servidor de web hosting, el tuyo o el de tu respectivo cliente; el que
corresponda. O sea con nuevo contenido y fotos. Pero la misma estructura. Por
eso la recomendación de la numeración. Para seguir un orden en la linea de
tiempo.
Edgard_Roul
...:: In Trance We Trust ::...
www.WebModerna.com.ar
i...@webmoderna.com.ar
www.Facebook/edgardroul
Enviado desde mi MoraNegra® (BlackBerry en inglés) de Claro Argentina
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
![http://www.tusitio.com/wp-content/upload/tuplantilla-mail/header.jpg"](http://www.tusitio.com/wp-content/upload/tuplantilla-mail/header.jpg"){kind=link}