comparte el articulo 

Aspectos básicos para estructurar un email con HTML – Parte 1

Actualizado el 05/10/2013 < > 1 Comentario

Resumen: El uso de correos electrónicos para promocionar un sitio, producto o contenido es una de las acciones más utilizadas en Internet, sin embargo muchos tienden a hacerlo de manera errónea, para evitar eso en este artículo explicamos cómo se debe estructurar un correo con HTML

Los correos electrónicos son una de las principales herramientas de comunicación que se han constituido desde la popularización del Internet. Gracias a ellos, se ha fomentado el establecimiento de relaciones entre personas y el intercambio de información en la red, dejando de lado medios que anteriormente predominaban.

Sobre la práctica, un correo electrónico es un medio increíble, te permite garantizar una entrega casi inmediata y personal de información; ya que con sólo dar un clic sobre el botón de enviar, nuestro contenido se deposita en la bandeja de entrada del cliente, sin líos, sin más pasos ni fases extras.

Debido a la sencillez que aparenta su proceso, el uso de emails generalmente es mal interpretado y utilizado de manera errónea. Es común que cuando abrimos un correo que ha llegado a nuestra cuenta, nos sintamos bombardeados por un mal marketing, una estructura mal hecho e incluso muchas veces invisible por el exceso de uso de imágenes, las cuales son muchas veces bloqueadas por los clientes de correo.

Con el notable crecimiento del uso de teléfonos inteligentes, cada vez es más común que los usuarios lean sus correos desde uno de éstos, pero lamentablemente los equipos de marketing dedicados al desarrollo de correos parecen omitirlo y terminan perdiendo una gran oportunidad de llegar a un gran mercado.

Una de las formas de poder hacer llegar nuestro mensaje de forma correcta, es la elaboración de código HTML el cual se integre a nuestro correo para que el contenido sea desplegado de manera correcta y agradable.

Estandarización

Si con anterioridad has intentado diseñar y estructurar correos electrónicos con HTML sabrás que puede resultar ser más complejo de lo que parece. Una de las principales causas de esto, es la falta de estandarización que existe en el mundo de los administradores y editores de correos electrónicos.

Lo cierto es que son tantos los dispositivos y clientes que existen, que es demasiado difícil poder establecer un estándar. Si bien es cierto que la experiencia de leer correos mediante una página de Internet en un ordenador puede resultar bastante similar y que los resultados se pueden mostrar exactamente igual de un navegador a otro, tenemos que recordar que no todo son clientes de correo online y que existen otra clase de dispositivos para visualizar los mensajes.

Cuando se trata de probar un producto para clientes de correo, tenemos que estar conscientes de que esto abarca un mundo de programas, tanto nuevos como viejos, un rango muy amplio que va desde el cliente más moderno desarrollado para Android o iOs, hasta alguna versión sin soporte de Outlook incluída como parte del paquete office, pasando por el infamemente conocido Lotus Notes para Office 2007 quien se reusa a interpretar tu código HTML por razones de “seguridad”.

Gracias a esto, existen muchas combinaciones posibles para poder mostrar un correo electrónico ante el cliente, por lo que si anteriormente ya has trabajado con diseño y desarrollo web, el mejor consejo que te podemos dar es que te olvides por un tiempo de eso y empieza a tratar al diseño de correos como algo totalmente diferente.

Enfoque

Un enfoque adecuado es lo primero que debemos de obtener para poder desarrollar un correo mediante HTML. Existen algunas sugerencias de flujo de trabajo que permiten encontrar este enfoque y a partir de ahí estructura el email.

Lo primero que se recomienda hacer es trabajar de manera estructurada, esto permitirá evitar muchos errores y problemas que se puedan presentar más adelante en el desarrollo. No es recomendable realizar todo el trabajo y luego probar si funciona, esto puede repercutir bastante en nuestros tiempos de trabajo y a la larga traer muchos errores que resolver en poco tiempo, con la posibilidad de que incluso algunos de ellos estén provocando otros.

Pruebas

Trata de probar constantemente tu plantilla, de esa manera te asegurarás de que hasta cierto punto se encontraba libre de errores. Para poder estructurar esto, se puede optar por el uso de milestones, una vez que se ha concluido esa fase se puede probar y pasar a la siguiente. Por ejemplo, el primer milestone del proyecto puede ser realizar la estructura básica de la plantilla.

Existen aplicaciones y páginas que te permiten hacer esta clase de pruebas, entre las mejores encontramos a Email on Acid y Litmus, éstas dan la facultad de previsualizar el correo, realizar un análisis de código y rastrear spam. Sin embargo ambas opciones son de paga, por lo que si hace falta dinero se puede optar por una alternativa gratuita como Browsershots.

Otro consejo que te puede ayudar bastante al probar tu plantilla, es el dejar el borde a tus tablas, como quizás ya sepas las estructuras de las plantillas de correo sólo interpretan tablas correctamente, por lo que es común hacer uso de ellas para ordenar. Mientras estás realizando tus pruebas, puedes dejar un borde visible para que de esa manera puedas ir observando como se acomodan y despliegan en el editor.

Flujo de trabajo

La manera en que se trabaja al desarrollar varia de un diseñador a otro, ya sea en base a la experiencia o a gustos propios, se opta por tomar un camino en especifico. Como en este artículo estamos tratando de ofrecer consejos para el desarrollo de plantillas de correos, te ofrecemos como sugerencia tomar un camino donde el primer paso sea crear el esqueleto de la plantilla, probar, después añadir contenido, probar otra vez, agregar las fuentes, colores y estilos, probar una vez más y finalmente remover los bordes para pasar a la prueba final.

Publicado el 23/07/2013, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. Sam

    Muy buena info

    Martes, 30 de julio 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras