Diseño, desarrollo y programación web

  • Tu estás aquí:
  • Inicio
  • Blog
  • Cómo hacer una plantilla para mail con html

Cómo hacer una plantilla para mail con html

05. Plantilla mailing para Hotel los Robles
Cómo hacer una plantilla para mail con html

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 Sublime Text. Si quieren pueden usar DreamWeaver, Notepad++, etc… 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: o 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 eniarse como archivos adjuntos. 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 como 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.

3 Respuestas

    • Es cierto. Convengamos una cosa: las personas que se dedican a hacer campañas utilizan esos sistemas automatizados tal como el que mencionaste y otros más( Mailchimps, Envíalo Simple, etc…). Crean y administran bases de datos, campañas, mediciones exaustivas de aperturas y rebotes, etc… Y está bien, estoy de acuerdo. Sin embargo, este artículo está más bien orientado al diseñador, desarrollador, maquetador y/o programador de las plantillas a utilizar en sus respectivos sistemas de mailing, o también los sistemas de respuestas de formularios de contacto de algunos sitios web.
      Espero te haya servido. Saludos :-)
      Espero te haya servido.

  • La mejor manera de entender el proceso es hacerlo uno mismo desde los cimientos hacia arriba. Hoy vamos a realizar exactamente esto con el diseno de un email construyendo una plantilla en html desde cero.

Dejar un Comentario